How can a Chrome extension transfer an ArrayBuffer or Blob from a content script to the background script without compromising its data type?

Question

How can a Chrome extension transfer an ArrayBuffer or Blob from a content script to the background script without compromising its data type?

In my current script, I am downloading binary data using XHR in the content script and sending it to the background script:

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

... later ...
sendResponse({data: me.binaryData});

Once the data is received in the background script, I want to make another XHR request to upload this binary data to the server. This is how I attempt to do it:

let formData = new FormData();
let blobBuilder = new WebKitBlobBuilder();
blobBuilder.append(data.data);
formData.append("data", blobBuilder.getBlob(data.contentType));
let request = new XMLHttpRequest();
request.open("POST", serverUrl);
request.send(formData);

The issue I encountered is that the file uploaded to the server only contains the string: "[object Object]". I suspect that ArrayBuffer type is somehow lost during the transfer from the content process to the background. How can I address this problem?

javascript json google-chrome-extension typed-arrays xmlhttprequest-level2

Answer 1

Answer №1

When communicating between a Content Script and a background page, the messages exchanged are JSON-serialized.

If you need to send an ArrayBuffer object through a JSON-serialized channel, make sure to wrap the buffer in a view both before and after transferring it.

This example is presented in isolation to demonstrate a generally applicable solution. It showcases how to manipulate ArrayBuffers and typed arrays, but this method can also be utilized with File and Blob objects by leveraging the FileReader API.

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

// Sending data over a JSON-serialized channel (e.g., sendResponse)
var transportData = JSON.stringify(data);

// Receiving end of the transmission (e.g., chrome.extension.onRequest)
var receivedData = JSON.parse(transportData);

// Transforming received data into an ArrayBuffer object
receivedData.data = new Uint8Array(receivedData.data).buffer;
// Now, receivedData represents the expected ArrayBuffer object

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

new Uint8Array(xhr.response) is used to create a view of the ArrayBuffer, allowing access to individual bytes.
```
Array.apply(null, <Uint8Array>)
```
creates a plain array using keys from the Uint8Array view, reducing serialization message size. Note: This method may not work for large amounts of data. If handling substantial data, opt for alternative conversion methods between typed arrays and plain arrays.
At the receiving end, obtain the original buffer by creating a new Uint8Array and accessing the buffer attribute.

Integration within your Google Chrome extension:

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

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

MDN: Typed Arrays
MDN: ArrayBuffer
MDN: Uint8Array
MDN: <Function> .apply
Google Chrome Extension docs: Messaging > Simple one-time requests
"This allows sending a one-time JSON-serializable message between a content script and an extension."
Explore more: Upload a File in a Google Chrome Extension - Utilizing Web workers for managing binary data operations.

Answer 2

When communicating between a Content Script and a background page, the messages exchanged are JSON-serialized.

If you need to send an ArrayBuffer object through a JSON-serialized channel, make sure to wrap the buffer in a view both before and after transferring it.

This example is presented in isolation to demonstrate a generally applicable solution. It showcases how to manipulate ArrayBuffers and typed arrays, but this method can also be utilized with File and Blob objects by leveraging the FileReader API.

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

// Sending data over a JSON-serialized channel (e.g., sendResponse)
var transportData = JSON.stringify(data);

// Receiving end of the transmission (e.g., chrome.extension.onRequest)
var receivedData = JSON.parse(transportData);

// Transforming received data into an ArrayBuffer object
receivedData.data = new Uint8Array(receivedData.data).buffer;
// Now, receivedData represents the expected ArrayBuffer object

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

new Uint8Array(xhr.response) is used to create a view of the ArrayBuffer, allowing access to individual bytes.
```
Array.apply(null, <Uint8Array>)
```
creates a plain array using keys from the Uint8Array view, reducing serialization message size. Note: This method may not work for large amounts of data. If handling substantial data, opt for alternative conversion methods between typed arrays and plain arrays.
At the receiving end, obtain the original buffer by creating a new Uint8Array and accessing the buffer attribute.

Integration within your Google Chrome extension:

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

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

Answer №2

When it comes to Chromium Extensions manifest v3, using the URL.createObjectURL() approach is no longer an option due to restrictions in service workers.

The most efficient way to exchange data between a service worker and a content script is by converting the blob into a base64 representation.

const fetchBlob = async url => {
    const response = await fetch(url);
    const blob = await response.blob();
    const base64 = await convertBlobToBase64(blob);
    return base64;
};

const convertBlobToBase64 = blob => new Promise(resolve => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
        const base64data = reader.result;
        resolve(base64data);
    };
});

Afterwards, transmit the base64 data to the content script.

Service worker:

chrome.tabs.sendMessage(sender.tab.id, { type: "LOADED_FILE", base64: base64 });

Content script:

chrome.runtime.onMessage.addListener(async (request, sender) => {
    if (request.type == "LOADED_FILE" && sender.id == '<your_extension_id>') {
        // Perform desired operations on the data received from the service worker.
        // For example, you could convert it back to a blob
        const response = await fetch(request.base64);
        const blob = await response.blob();
    }
});

Answer 4

When it comes to Chromium Extensions manifest v3, using the URL.createObjectURL() approach is no longer an option due to restrictions in service workers.

The most efficient way to exchange data between a service worker and a content script is by converting the blob into a base64 representation.

const fetchBlob = async url => {
    const response = await fetch(url);
    const blob = await response.blob();
    const base64 = await convertBlobToBase64(blob);
    return base64;
};

const convertBlobToBase64 = blob => new Promise(resolve => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => {
        const base64data = reader.result;
        resolve(base64data);
    };
});

Afterwards, transmit the base64 data to the content script.

Service worker:

chrome.tabs.sendMessage(sender.tab.id, { type: "LOADED_FILE", base64: base64 });

Content script:

chrome.runtime.onMessage.addListener(async (request, sender) => {
    if (request.type == "LOADED_FILE" && sender.id == '<your_extension_id>') {
        // Perform desired operations on the data received from the service worker.
        // For example, you could convert it back to a blob
        const response = await fetch(request.base64);
        const blob = await response.blob();
    }
});

How can a Chrome extension transfer an ArrayBuffer or Blob from a content script to the background script without compromising its data type?

Answer №1

Integration within your Google Chrome extension:

Further Reading

Answer №2

Similar questions

Obtain JSON data instead of XML data from a web service through Ajax with the option 'contentType' set to 'false'

Unable to connect with controller after deploying asp.net mvc ajax call on server

The type 'Data' is lacking the following attributes from its definition

Passing a class as a parameter in Typescript functions

iOS app launch does not trigger Phonegap handleOpenURL

Upgrading Bootstrap from version 3.4 to 5.3 in a .NET project

Trouble with Title Updating in Next.js and Tailwind CSS Project

What is the best method for retrieving a URL from a property within a JSON object?

Error encountered when trying to fetch data from JSON using Ajax

The page abruptly jumps to the top whenever I display an ID element

What is the best method to set variables to zero using this array in JavaScript?

The Art of jQuery Data Processing

What is the process for generating an array of arrays in a React component?

Caution in React: Utilizing functions with Object.assign() may not be a valid approach when dealing with React children

Pop-up message on card selection using JavaScript, CSS, and PHP

Link HTMLMediaElement with Android's playback controls

creating a countdown timer for the carousel

The jQuery library triggers an error that can only be resolved by refreshing the

Javascript - Single line conditional statement

Combining two classes into a single class using ‘this’ in JavaScript