Question

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

我通过chrome.runtime.sendMessage将URL传递给扩展（工作）
在后台页面（作品）中通过XMLHttpRequest获取媒体文件
使用FileSystem API（工作）存储文件
使用URL.createObjectURL（works）
将网址返回网页（错误）

不幸的是，该网址无法使用该网址。我收到以下错误：

不允许加载本地资源：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-URIs（可以使用<FileReader>.readAsDataURL将文件或Blob转换为数据URI。使用XMLHttpRequest无法读取数据URI，但是这可以在以后的Chrome版本中使用（http://crbug.com/308768）。

Answer 2

我能想到的两种可能性。

1）雇用externally_connectable。

此方法在文档here中进行了描述。

它的本质：您可以声明此类网页可以将消息传递到您的扩展程序，然后chrome.runtime.connect和chrome.runtime.sendMessage将会公开到该网页。

然后，您可以使网页打开扩展程序的端口并将其用于数据。请注意，只有网页才能启动连接。

2）使用window.PostMessage。

docs中提到了该方法（请注意过时提及window.webkitPostMessage），并详细介绍了here。

根据方法文档（来自不同地方），我可以通过它传递任何对象，包括blob。

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

2 个答案: