Pass large blob or file from chrome extension

google-chrome, google-chrome-extension, javascript

Solution

You're almost there.

After creating the `blob:`-URL on the background page and passing it to the content script, don't forward it to the web page. Instead, retrieve the blob using XMLHttpRequest, create a new blob:-URL, then send it to the web page.

// assuming that you've got a valid blob:chrome-extension-URL...
var blobchromeextensionurlhere = 'blob:chrome-extension....';
var x = new XMLHttpRequest();
x.open('GET', blobchromeextensionurlhere);
x.responseType = 'blob';
x.onload = function() {
    var url = URL.createObjectURL(x.response);
    // Example: blob:http%3A//example.com/17e9d36c-f5cd-48e6-b6b9-589890de1d23
    // Now pass url to the page, e.g. using postMessage
};
x.send();

If your current setup does not use content scripts, but e.g. the webRequest API to redirect request to the cached result, then another option is to use data-URIs (a File or Blob can be converted to a data-URI using `<FileReader>.readAsDataURL`. Data-URIs cannot be read using XMLHttpRequest, but this will be possible in future versions of Chrome (http://crbug.com/308768).

Problem

I try to write an extension caching some large media files used on my website so you can locally cache those files when the extension is installed: - I pass the URLs via chrome.runtime.sendMessage to the extension (works) - fetch the media file via XMLHttpRequest in the background page (works) - store the file using FileSystem API (works) - get a File object and convert it to a URL using URL.createObjectURL (works) - return the URL to the webpage (error) Unfortunately the URL can not be used on the webpage. I get the following error: Not allowed to load local resource: blob:chrome-extension%3A//hlcoamoijhlmhjjxxxbl/e66a4ebc-1787-47e9-aaaa-f4236b710bda What is the best way to pass a large file object from an extension to the webpage?

Original source