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

Question

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

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

很遗憾，该网址无法在网页上使用。我收到以下错误:

Not allowed to load local resource: 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 将请求重定向到缓存的结果，那么另一种选择是使用数据 URI(可以使用 <FileReader>.readAsDataURL 将文件或 Blob 转换为数据 URI。使用 XMLHttpRequest 无法读取数据 URI，但这将在未来版本的 Chrome ( http://crbug.com/308768 ) 中是可能的。