从chrome扩展程序传递大blob或文件

Question

我尝试编写一个扩展缓存我网站上使用的一些大型媒体文件,以便在安装扩展时可以在本地缓存这些文件:

1. 我通过chrome.runtime.sendMessage将URL传递给扩展(工作)
2. 通过后台页面中的XMLHttpRequest获取媒体文件(有效)
3. 使用FileSystem API存储文件(工作)
4. 获取一个File对象并使用URL.createObjectURL将其转换为URL(有效)
5. 将URL返回到网页(错误)

遗憾的是,该网址无法使用该网址.我收到以下错误:

不允许加载本地资源:blob:chrome-extension%3A // hlcoamoijhlmhjjxxxbl/e66a4ebc-1787-47e9-aaaa-f4236b710bda

将大文件对象从扩展名传递到网页的最佳方法是什么？

Answer 1

你快到了.

在blob:后台页面上创建-URL并将其传递给内容脚本后,请不要将其转发到网页.相反,使用XMLHttpRequest检索blob,创建一个新的blob:-URL,然后将其发送到网页.

// 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();

如果您当前的设置不使用内容脚本,但是例如webRequest API将请求重定向到缓存结果,则另一个选项是使用data-URI(可以使用.Data-URI将文件或Blob转换为数据URI)<FileReader>.readAsDataURL.无法使用XMLHttpRequest读取,但这可以在将来的Chrome版本中使用(http://crbug.com/308768).