通过大blob或文件从chrome扩展

Pass large blob or file from chrome extension

本文关键字：chrome 扩展 文件 blob      更新时间：2023-09-26

我试着写一个扩展缓存我的网站上使用的一些大型媒体文件，这样你就可以在安装扩展时本地缓存这些文件:

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

遗憾的是，该URL不能在网页上使用。我得到以下错误:

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

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

你就快成功了。

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

// 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(一个文件或Blob可以使用<FileReader>.readAsDataURL转换为数据uri)。不能使用XMLHttpRequest读取data - uri，但这在Chrome的未来版本中是可能的(http://crbug.com/308768)。

我能想到的两种可能性

1)使用externally_connectable

这个方法在这里的文档中有描述。

它的本质是:你可以声明这样那样的网页可以传递消息给你的扩展，然后chrome.runtime.connect和chrome.runtime.sendMessage就会暴露给这个网页。

你可以让网页打开一个端口到你的扩展，并使用它的数据。请注意，只有网页可以发起连接。

2)使用window.PostMessage

该方法在文档中提到(注意过时的提到window.webkitPostMessage)，并在这里详细描述。

你可以，据我所知，从该方法的文档(来自不同的地方)，传递任何对象与它，包括blobs。

相关文章：