从Chrome扩展中传递大块或文件 [英] Pass large blob or file from chrome extension

问题描述

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

1. 我通过chrome.runtime.sendMessage将网址传递给扩展名（works）


2. 通过后台页面中的XMLHttpRequest获取媒体文件（作品）
   
3. 使用FileSystem API存储文件


4. 获取File对象并使用URL.createObjectURL（works）将其转换为URL


5. 将网址返回给网页（error）

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

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

将扩展名中的大型文件对象传递给网页的最佳方式是什么？

解决方案

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

  //假设你有一个有效的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）; 
 //示例：blob：http％3A // example.com / 17e9d36c-f5cd-48e6-b6b9-589890de1d23 
 //将网址传递给网页，例如使用postMessage 
}; 
 x.send（）; 
  

如果您当前的设置不使用内容脚本， webRequest API将请求重定向到缓存的结果，则另一种选择是使用数据URI（可以使用 < FileReader> .readAsDataURL 无法读取数据URI XMLHttpRequest，但在未来的Chrome版本中这是可能的（ http://crbug.com/308768 ）。

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?

解决方案

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

这篇关于从Chrome扩展中传递大块或文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！