Upload a File in a Google Chrome Extension

Question

I'm writing an extension for Chrome, and I need to upload a file from the page the user is currently on to my server to be processed, I cannot figure out how to upload the file though. I considered just passing the link to the server and having the server download the file, however if the site requires authentication this will not work. Is it possible to upload a file via a Chrome extension to my server?

Answer 1

I've recently developed a Chrome extension which retrieves content from a page, and sends it to the server.

The following approach was used:

1. File downloads: Get the src property of an <img> element, for example.
2. Fetch the file from the Cache - use XMLHttpRequest from the background page.
3. Use a Web Worker in the background page to handle the upload.

Side note, to take the checksum of the image, Crypto-JS: MD5 can be used. Example (where xhr is the XMLHttpRequest object with responseType set to arraybuffer, see Worker demo):

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

Full example

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}); } 

Background script (with Worker)

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

Web Worker

// 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 for Web workers POLYFILL

Web workers do not natively support the FormData object, used to transmit multipart/form-data forms. That's why I've written a polyfill for it. This code has to be included in the Web worker, using importScripts('xhr2-FormData.js').

The source code of the polyfill is available at https://gist.github.com/Rob--W/8b5adedd84c0d36aba64

Manifest file:

{   "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://*/*"] } 

Relevant documentation

• Message passing ^{Google Chrome Extensions}
• chrome.runtime.onMessage ^{Google Chrome Extensions}
• XMLHttpRequest Level 2 ^{W3c specification}
• FormData (XHR2) ^MDN
• ArrayBuffer responses (XHR2) ^{HTML5 rocks} (note: arraybuffer responses are deprecated in favor of typed arrays, the polyfill has been updated to reflect this change)