javascript - Pass large blob or file from chrome extension

Question

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:

1. I pass the URLs via chrome.runtime.sendMessage to the extension (works)
2. fetch the media file via XMLHttpRequest in the background page (works)
3. store the file using FileSystem API (works)
4. get a File object and convert it to a URL using URL.createObjectURL (works)
5. 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?

Answer 1

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).