Twitter以编程方式添加照片

时间:2015-08-11 20:53:12

标签: javascript twitter

我制作了剪辑截图并上传了Firefox的插件。我想带一个允许用户发推特图片的功能。

手动(就像人类一样)过程就是:

  1. 打开twitter.com(如果没有登录告诉用户登录)
  2. 点击"新推文"这已经完成了
  3. 通过执行"添加照片"附加图像并浏览到文件
    • 这是此过程的GIF:
  4. 然后我关注标签并关注推文输入框
  5. 因此,用户可以输入消息,然后在照片中输入"如果他们想要,请点击推文。 最棒的是这种方法,图像没有打扰Twitter服务器,因为图像不会上传,直到用户最终注销,当他们点击"推文"按钮。因此,用户有机会在点击" Tweet"之前决定点击X以删除附加的屏幕截图。我发现这种方式对用户和Twitter服务器非常友好。 (如果有文件大小限制可以附加,请检查我的插件并让用户知道它无法进入)
  6. 问题

    我正在尝试自动执行步骤1-4。我可以完美地做1,2和4。

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

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

    我试过的代码(HTML5 FileList API)

    它使用此处定义的mozSetFileArrayhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement及其兄弟mozSetFileNameArrayhttps://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
    

    检验

    我做了一些调试器检查,我在断点上放了一个断点,发现它出现在这里,有某种add函数。

0 个答案:

没有答案