Question

我想将输入文件从内容页面传递到扩展后台脚本，然后在扩展后台脚本中使用 FileReader（）加载它。

因此，在网页中我有一个<input type="file">，并且从onchange事件我将文件从内容脚本传递到背景页面，如下所示：

 var myfile = document.getElementById('fileid').files[0];
 chrome.runtime.sendMessage({myevent: "start", inputfile: myfile}, function(response) {});

在后台脚本中我有这个：

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){

   if(message.myevent==="start")
   {
      var reader = new FileReader();

         reader.onload = function(e) {
              // file is loaded 
         }  


       reader.readAsArrayBuffer(message.inputfile);
   }
});

但是FileReader没有加载它，我不确定这是否是正确的方法，但我需要的是将输入文件元素传递给后台脚本并使用FileReader加载它以使用后台脚本的HTTP POST发送它。请告诉我有什么问题或如何正确地做到这一点。如果我看到示例代码，它将会有很大帮助，因为我是Chrome扩展程序开发的新手，并且不那么经验。

Answer 1

通过Chrome扩展程序消息API发送的所有邮件必须是JSON可序列化的。如果要在后台页面获取文件的内容，最好为File对象创建（临时）URL，将此URL传递到后台页面并使用XMLHttpRequest抓取其内容：

// Create URL
var url = URL.createObjectURL(myfile);
// Pass URL to background page (ommited for brevity) and load it..
var x = new XMLHttpRequest();
x.onload = function() {
     var result = x.response;
     // TODO: Use [object ArrayBuffer]
};
x.open('GET', url); // <-- blob:-url created in content script
x.responseType = 'arraybuffer';
x.send();

虽然为什么要将文件发送到后台页面？内容脚本也可以发送跨源请求。

Answer 2

这适用于 chrome。您可以在此处找到完整的生产代码。

https://github.com/Leslie-Wong-H/BoostPic/tree/7513b3b8d67fc6f57718dc8b9ff1d5646ad03c75/BoostPic_Chrome/js

main.js：


    // Crossbrowser support for URL
    const URLObj = window.URL || webkitURL;

    // Creates a DOMString containing a URL representing the object given in the parameter
    // namely the original Blob
    const blobUrl = URLObj.createObjectURL(imageBlob);
    console.log(blobUrl);
    chrome.runtime.sendMessage(blobUrl, (res) => {
      imgUrl = res;
      console.log(imgUrl);
      clearInterval(refreshIntervalId);
      // To prevent that it happens to halt at "  Image uploading ..."
      setTimeout(() => {
        var imgUrlText = document.querySelector(imgUrlTextBoxId);
        imgUrlText.value = imgUrl;
      }, 1000);
      // double check to clear interval to prevent infinite error loop of LoadingStateOne
      // Hope it works.
      setTimeout(() => {
        clearInterval(refreshIntervalId);
      }, 500);
      console.log("Stop uploading state message");

background.js:


chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.startsWith("blob")) {
    console.log("RECEIVED");
    getBase64Url(request).then((res) => {
      console.log("Arrived here");
      // Acquired from https://stackoverflow.com/questions/18650168/convert-blob-to-base64/18650249#
      const reader = new FileReader();
      reader.readAsDataURL(res);
      reader.onloadend = function () {
        const base64data = reader.result;
        console.log(base64data);

将输入文件传递给后台脚本

2 个答案: