在 Google Chrome 扩展程序中上传文件答案

【问题标题】：Upload a File in a Google Chrome Extension在 Google Chrome 扩展程序中上传文件
【发布时间】：2011-05-04 20:53:10
【问题描述】：

我正在为 Chrome 编写扩展程序，我需要从用户当前所在的页面上传文件到我的服务器进行处理，但我不知道如何上传文件。我考虑只是将链接传递给服务器并让服务器下载文件，但是如果站点需要身份验证，这将不起作用。是否可以通过 Chrome 扩展程序将文件上传到我的服务器？

【问题讨论】：

标签： google-chrome-extension upload

【解决方案1】：

我最近开发了一个 Chrome 扩展程序，它可以从页面中检索内容，并将其发送到服务器。

使用了以下方法：

文件下载：例如，获取 <img> 元素的 src 属性。
从缓存中获取文件 - 使用后台页面中的XMLHttpRequest。
在后台页面中使用Web Worker 来处理上传。

旁注，要获取图像的校验和，可以使用Crypto-JS: MD5。示例（其中xhr 是XMLHttpRequest 对象，其中responseType 设置为arraybuffer，请参阅Worker 演示）：

var md5sum = Crypto.MD5( new Uint8Array(xhr.response) );

完整示例

Content script

// Example: Grab the first <img> from the document if it exists.
var img = document.images[0];
if (img) {
    // Send the target of the image:
    chrome.runtime.sendMessage({method: 'postUrl', url: img.src});
}

后台脚本（带 Worker）

chrome.runtime.onMessage.addListener(function(request) {
    if (request.method == 'postUrl') {
        var worker = new Worker('worker.js');
        worker.postMessage(request.url);
    }
});

网络工作者

// Define the FormData object for the Web worker:
importScripts('xhr2-FormData.js')

// Note: In a Web worker, the global object is called "self" instead of "window"
self.onmessage = function(event) {
    var resourceUrl = event.data;   // From the background page
    var xhr = new XMLHttpRequest();
    xhr.open('GET', resourceUrl, true);

    // Response type arraybuffer - XMLHttpRequest 2
    xhr.responseType = 'arraybuffer';
    xhr.onload = function(e) {
        if (xhr.status == 200) {
            nextStep(xhr.response);
        }
    };
    xhr.send();
};
function nextStep(arrayBuffer) {
    var xhr = new XMLHttpRequest();
    // Using FormData polyfill for Web workers!
    var fd = new FormData();
    fd.append('server-method', 'upload');

    // The native FormData.append method ONLY takes Blobs, Files or strings
    // The FormData for Web workers polyfill can also deal with array buffers
    fd.append('file', arrayBuffer);

    xhr.open('POST', 'http://YOUR.DOMAIN.HERE/posturl.php', true);

    // Transmit the form to the server
    xhr.send(fd);
};

`FormData` 网络工作者 POLYFILL

Web workers 本身不支持FormData 对象，用于传输multipart/form-data 表单。这就是为什么我为它写了一个polyfill。此代码必须包含在 Web Worker 中，使用 importScripts('xhr2-FormData.js')。

polyfill 的源代码在https://gist.github.com/Rob--W/8b5adedd84c0d36aba64

清单文件：

{
  "name": "Rob W - Demo: Scraping images and posting data",
  "version": "1.0",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["contentscript.js"]
    }
   ],
   "background": {
       "scripts": ["background.js"]
   },
   "permissions": ["http://*/*", "https://*/*"]
}