1

やりたいこと
クリップボードの画像を直接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}) を書き換えた。

(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);
        }
    })
})();

dispatchEventにてエラー発生

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

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

③の当該部分

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");
    }
  });
  1. ①のコードのitems.filetr部分を直し、greasemonkeyのrequireにjQueryを追加した。
    jQueryが無いのなら追加してしまえば良いと考えgreasemonkeyの機能を使って必要なライブラリとしてjqueryを読み込むようにしました。
// ==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");
        }
    })
})();

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

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

その他参考サイト
JavaScriptでjQueryを使わずにイベントをtriggerする - Qiita
JavaScript と jQuery の書き方の比較 | knooto

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。