Chrome 扩展：将下载的文件移动到输入字段答案

【问题标题】：Chrome extension: move downloaded file to input fieldChrome 扩展：将下载的文件移动到输入字段
【发布时间】：2017-07-06 19:54:39
【问题描述】：

我正在尝试使用我构建的小型 chrome 扩展来迁移图像。该扩展由 5 个文件组成：

popup.html - 插件 html 文档

 Has some html buttons
also has script link to my settings.js file that listens for the image downlaod button to be clicked and send a message to my content script : run.js to find the images

run.js - 内容脚本（可以访问网页 DOM）。

This script recieves the message from run.js which then finds all the images names and image links i want to download. It puts them into an object and sends them via message to the backgorund script : bootstrap.js

bootstrap.js - 运行后台页面并可以访问 chrome api。

var Downloads = [];
chrome.extension.onMessage.addListener(function(request, sender, sendResponse)
{
if(request.message.method == 'download'){
    for( var d = 0; d <= request.message.imageLinks.length; d++ ){
      chrome.downloads.download( {url: request.message.imageLinks[d],
             filename: request.message.imageName[d]}, function(id){

        });
          sendResponse('done');
    }
}
});

这一切都很好而且花花公子。它遍历图像并下载它们。我现在需要做的是：获取我刚刚下载的图像，并将它们插入到具有相同字段名称等的其他网站（我在另一个选项卡中打开）上的文件上传字段中。我看到 chrome 有一个

//Initiate dragging the downloaded file to another application. Call in a javascript ondragstart handler.
chrome.downloads.drag(integer downloadId)

起初我认为这可能有效，因为您可以手动将下载的图像拖到 html 文件上传字段中，而无需单击并选择文件。但我找不到任何文档/示例。

有谁知道使用 javascript / chrome api 可以实现这一点？

【问题讨论】：

标签： javascript google-chrome plugins

【解决方案1】：

首先你需要访问你下载的文件的内容。

为此，您需要在清单文件中添加对file://* 的权限。然后，您可以使用 chrome.downloads.search 循环浏览您下载的文件，并获取系统中每个文件的路径（DownloadItem.filename 属性）。对于每个文件，向 url file://{filepath} 发出 GET XMLHttpRequest 以获取文件的内容。

获得该内容后，您可以将其转换为 DataUrl 并以编程方式将该文件添加到表单的 FormData（虽然不是实际输入，只是最后提交的 FormData）。这部分请见this answer。

【讨论】：