Twitter 以编程方式添加照片

我为 Firefox 制作了裁剪屏幕截图和上传插件。我想带来一个允许用户发布图像的功能。

手动（像人类一样）的过程是这样的：

1. 打开 twitter.com（如果未登录，请告诉用户登录）
2. 点击“新推文”就完成了
3. Attach images by doing "Add photo" and browse to file
   • This is gif of this process:
4. 然后我聚焦选项卡并聚焦推文输入框
5. 因此，用户可以输入消息，然后输入“照片中的人”（如果需要），然后单击推文。使用这种方法的好处是，图像不会打扰 Twitter 服务器，因为直到用户最终注销（当他们单击“推文”按钮时）才会上传图像。因此，用户有机会决定在点击“推文”之前单击 X 删除附加的屏幕截图。我发现这种方式对用户和 Twitter 服务器非常友好。（如果可以附加的文件大小有限制，我会检查我的附加组件并让用户知道它无法进入）

问题

我正在尝试自动化步骤 1-4。我可以完美地完成1、2和4。

我正在尝试以编程方式执行步骤 3。Twitter 似乎不使用input[type=file].fileshtml5 api，他们正在做一些自定义的javascript。有谁知道如何以编程方式添加图像？我拥有 javascript 代码访问的完全权限，因为这是一个 Firefox 插件。

我不能告诉用户自己附加的一个重要原因是这些图像存储在内存中以提高性能，而不是存储在文件中，因此我需要以编程方式附加它们。

我尝试过的代码（HTML5 FileList API）

它使用mozSetFileArray此处定义：https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement和它的兄弟mozSetFileNameArray here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/mozSetFileNameArray https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/mozSetFileNameArray

// Step 1 - Open twitter.com (for testing purposes, twitter.com is open in tab 7 so I dont load it here)
var aContentWindow = gBrowser.tabContainer.childNodes[6].linkedBrowser.contentWindow; // gets window of tab 7
var aContentDocument = aContentWindow.document;

// Step 2 - Open tweet modal    
var btnNewTweet = aContentDocument.getElementById('global-new-tweet-button');
console.info('btnNewTweet:', btnNewTweet);

if (!btnNewTweet) {
    throw new Error('global tweet button not found, probably not logged in');
}

btnNewTweet.click();

// Step 3 - Attach two File instances for test purposes (in production will attach Blob)
var inputAddPhoto = aContentDocument.getElementById('global-tweet-dialog').querySelector('input[type=file]');
console.info('inputAddPhoto:', inputAddPhoto, inputAddPhoto.mozGetFileNameArray);

if (!inputAddPhoto) {
    throw new Error('add photo button not found! i have no idea what could cause this');
}

var newFiles = [];
var myFile1 = new File('C:\\Users\\Vayeate\\Pictures\\Screenshot - Tuesday, August 11, 2015 6-33-58 AM.png'); // using local file for testing
var myFile2 = new File('C:\\Users\\Vayeate\\Pictures\\Screenshot - Tuesday, August 11, 2015 6-38-08 AM.png'); // using local file for testing

newFiles.push(myFile1);
newFiles.push(myFile2);

inputAddPhoto.mozSetFileArray(newFiles);


// Step 4 - Focus message field
// var richInputTweetMsg = aContentDocument.getElementById('tweet-box-global');
// richInputTweetMsg.focus(); // not needed because as when the modal opens twitter puts focus into here anways

// Step 5 - Done, now user can choose to type message, tag "whose in photo", and remove previews. The great thing is with this method, the images have not bothered twitter servers, the images are not uploaded until users final write off, when they click the "Tweet" button

检查

我做了一些调试器检查，我在 drop 上放置了一个断点，发现它来到这里，有某种add功能。