

**やりたいこと**  
クリップボードの画像を直接tweetdeckに投稿できるようにしたい。

既存のuser script (greasemonkeyにて動作確認)  
① <https://greasyfork.org/ja/scripts/27927-tweetdeck-image-paste-support/code>  
② <https://gist.github.com/gaeulbyul/4f622ba80513e0f4d0dd3f13dcd085db>  
拡張機能 (better tweet deck)  
③
<https://github.com/eramdam/BetterTweetDeck/blob/b093ca98dac8c4ae800fa40fbd5784287e0d8cf7/src/js/inject.js>

③ 以外は動きませんでした。

**やったこと**  
1\. tweetdeckは現在jQueryを利用していないのでpure js で ①の
$(document).trigger("uiFilesAdded",{files}) を書き換えた。

[code]

    (function() {
        'use strict';
    
        document.addEventListener('paste', function(e){
            if(e.clipboardData) {
                var items = e.clipboardData.items;
                var files = [];
                for (let i = 0; i<items.length; i++){
                    if (items[i].type.indexOf("image") != -1){
                        files.push(items[i].getAsFile());
                    }
                }
                console.log(files);
                if (files.length === 0) return;
                // $(document).trigger("uiFilesAdded",{files})
                var event = new CustomEvent('uiFilesAdded', { bubbles: false, cancelable: false, detail: {files} });
                document.dispatchEvent(event);
            }
        })
    })();
    
[/code]

dispatchEventにてエラー発生

[code]

    TypeError: t is undefined　bundle.ca851fdb22.js:13:1031228
        handleUiComposeFilesAdded https://ton.twimg.com/tweetdeck-web/web/dist/bundle.ca851fdb22.js:13
        dispatch https://ton.twimg.com/tweetdeck-web/web/dist/vendor.a136e3fe7e.js:25
        handle https://ton.twimg.com/tweetdeck-web/web/dist/vendor.a136e3fe7e.js:25
        trigger https://ton.twimg.com/tweetdeck-web/web/dist/vendor.a136e3fe7e.js:25
        trigger https://ton.twimg.com/tweetdeck-web/web/dist/vendor.a136e3fe7e.js:25
        each https://ton.twimg.com/tweetdeck-web/web/dist/vendor.a136e3fe7e.js:14
        each https://ton.twimg.com/tweetdeck-web/web/dist/vendor.a136e3fe7e.js:14
        trigger https://ton.twimg.com/tweetdeck-web/web/dist/vendor.a136e3fe7e.js:25
        trigger https://ton.twimg.com/tweetdeck-web/web/dist/vendor.a136e3fe7e.js:28
        handleFilesAdded https://ton.twimg.com/tweetdeck-web/web/dist/bundle.ca851fdb22.js:13
        <匿名> self-hosted:875
        dispatch https://ton.twimg.com/tweetdeck-web/web/dist/vendor.a136e3fe7e.js:25
        handle https://ton.twimg.com/tweetdeck-web/web/dist/vendor.a136e3fe7e.js:25
        <匿名> debugger eval code:17
    
[/code]

tがundefinedだと言われるも、tがどれを指すのかがわかりませんでした。  
detailに入力しているobjectの書式が間違っているのかと思いましたが、③ better tweetdeck
でも同じようにarrayにfileオブジェクトをpushしたものをeventに渡しているのでここが間違っているわけではなさそうです。

③の当該部分

[code]

    document.addEventListener('paste', (ev) => {
        if (ev.clipboardData) {
          const items = ev.clipboardData.items;
    
          if (!items) {
            return;
          }
    
          const files = [];
    
          [...items].forEach((item) => {
            if (item.type.indexOf('image') < 0) {
              return;
            }
            const blob = item.getAsFile();
    
            files.push(blob);
          });
    
          if (files.length === 0) {
            return;
          }
          console.log("start");
          $(document).trigger('uiFilesAdded', {
            files,
          });
          console.log("end");
        }
      });
    
[/code]

  2. ①のコードのitems.filetr部分を直し、greasemonkeyのrequireにjQueryを追加した。  
jQueryが無いのなら追加してしまえば良いと考えgreasemonkeyの機能を使って必要なライブラリとしてjqueryを読み込むようにしました。

[code]

    // ==UserScript==
    // @name         test
    // @namespace    aaa
    // @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
    // @match        https://tweetdeck.twitter.com/*
    // @run-at       document-end
    // ==/UserScript==
    
    (function() {
        'use strict';
    
        document.addEventListener('paste', function(e){
            if(e.clipboardData) {
                var items = e.clipboardData.items;
                var files = [];
                for (let i = 0; i<items.length; i++){
                    if (items[i].type.indexOf("image") != -1){
                        files.push(items[i].getAsFile());
                    }
                }
                console.log(files);
                if (files.length === 0) return;
                $(document).trigger("uiFilesAdded",{files})
                console.log("end");
            }
        })
    })();
    
[/code]

この場合エラーは発生せず最後のendまでコンソールには表示されるものの、画像のアップロードができていませんでした。

やることは"uiFilesAdded"イベントにfilesを渡して発火させるだけだと思うのですが、なぜうまくいかないのか全くわかりません。  
どなたかご教授お願いします。

その他参考サイト  
[JavaScriptでjQueryを使わずにイベントをtriggerする -
Qiita](https://qiita.com/ryounagaoka/items/a48d3a4c4faf78a99ae5)  
[JavaScript と jQuery の書き方の比較 | knooto](https://knooto.info/javascript-vs-
jquery/)


CC BY-SA 4.0
2020-04-16T12:08:58.540
65684
2020-04-16T16:50:07.680
2020-04-16T16:50:07.680
3060
20533
question
javascript twitter
jsで特定のeventを強制的に発火させる方法について