やりたいこと
クリップボードの画像を直接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");
}
});
- ①のコードの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