Chrome extension: how to pass ArrayBuffer or Blob from content script to the background without losing its type?

Question

I have this content script that downloads some binary data using XHR, which is sent later to the background script:

var self = this;
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
  if (this.status == 200) {
     self.data = {
        data: xhr.response,
        contentType: xhr.getResponseHeader('Content-Type')
     };
  }
};
xhr.send();

... later ...
sendResponse({data: self.data});

After receiving this data in background script, I'd like to form another XHR request that uploads this binary data to my server, so I do:

var formData = new FormData();
var bb = new WebKitBlobBuilder();
bb.append(data.data);
formData.append("data", bb.getBlob(data.contentType));
var req = new XMLHttpRequest();
req.open("POST", serverUrl);
req.send(formData);

The problem is that the file uploaded to the server contains just this string: "[object Object]". I guess this happens because ArrayBuffer type is lost somehow while transferring it from content process to the background? How can I solve that?

Answer 1

Messages passed between a Content Script and a background page are JSON-serialized.

If you want to transfer an ArrayBuffer object through a JSON-serialized channel, wrap the buffer in a view, before and after transferring.

I show an isolated example, so that the solution is generally applicable, and not just in your case. The example shows how to pass around ArrayBuffers and typed arrays, but the method can also be applied to File and Blob objects, by using the FileReader API.

// In your case: self.data = { data: new Uint8Array(xhr.response), ...
// Generic example:
var example = new ArrayBuffer(10);
var data = {
    // Create a view
    data: Array.apply(null, new Uint8Array(example)),
    contentType: 'x-an-example'
};

// Transport over a JSON-serialized channel. In your case: sendResponse
var transportData = JSON.stringify(data);
//"{"data":[0,0,0,0,0,0,0,0,0,0],"contentType":"x-an-example"}"

// At the receivers end. In your case: chrome.extension.onRequest
var receivedData = JSON.parse(transportData);

// data.data is an Object, NOT an ArrayBuffer or Uint8Array
receivedData.data = new Uint8Array(receivedData.data).buffer;
// Now, receivedData is the expected ArrayBuffer object

This solution has been tested successfully in Chrome 18 and Firefox.

• new Uint8Array(xhr.response) is used to create a view of the ArrayBuffer, so that the individual bytes can be read.

• Array.apply(null, <Uint8Array>) is used to create a plain array, using the keys from the Uint8Array view. This step reduces the size of the serialized message. WARNING: This method only works for small amounts of data. When the size of the typed array exceeds 125836, a RangeError will be thrown. If you need to handle large pieces of data, use other methods to do the conversion between typed arrays and plain arrays.

• At the receivers end, the original buffer can be obtained by creating a new Uint8Array, and reading the buffer attribute.

Implementation in your Google Chrome extension:

// Part of the Content script
    self.data = {
        data: Array.apply(null, new Uint8Array(xhr.response)),
        contentType: xhr.getResponseHeader('Content-Type')
    };
...
sendResponse({data: self.data});

// Part of the background page
chrome.runtime.onMessage.addListener(function(data, sender, callback) {
    ...
    data.data = new Uint8Array(data.data).buffer;

Documentation

• MDN: Typed Arrays
• MDN: ArrayBuffer
• MDN: Uint8Array
• MDN: <Function> .apply
• Google Chrome Extension docs: Messaging > Simple one-time requests
  "This lets you send a one-time JSON-serializable message from a content script to extension, or vice versa, respectively"
• SO bonus: Upload a File in a Google Chrome Extension - Using a Web worker to request, validate, process and submit binary data.

Answer 2

There is a better way to pass Blob (or ArrayBuffer) between any parts of the same Chrome extension (content scripts, background page and ordinary pages) then creating an ordinary JS Array or a binary string and passing this (sometimes extremely big) chunk of data in a message body! Remember that they are JSONified at the sender's end and then unJSONified at the receiver's end!

Just create and pass Object URL:

sendResponse(URL.createObjectURL(blob));

or create Blob first from ArrayBuffer:

var blob = new Blob([ arrayBuffer ], { type: 'image/jpeg' });
sendResponse(URL.createObjectURL(blob));

BTW XMLHttpRequest 2 can return both Blob and ArrayBuffer.

Notes

• Object URLs can be alive for a qute long time so if you don't need data anymore don't forget to release such URLs calling URL.revokeObjectURL(objectURL)
• Object URLs as any URL are subject of Cross-Origin restrictions but all parts of your extension are in the same origin of course.
• BTW: I got a 4x performance boost when start passing such URLs instead of passing data itself in my Chrome extension! (My data were quite big images.)