javascript - Chrome - 跨源 XMLHttpRequest 似乎不适用于内容脚本

Question

在我的后台脚本中，我将注入(inject)我的 contentScript，如下所示:

chrome.webRequest.onHeadersReceived.addListener(function(details){
    if(isPDF(details))
    {   
        chrome.tabs.executeScript(details.tabId, {file: "content.js", runAt: "document_end"}, function(result){
            if(chrome.runtime.lastError)
            {
                console.log(chrome.runtime.lastError.message);
            }
        });
        return {
            responseHeaders: [{
              name: 'X-Content-Type-Options', 
              value: 'nosniff'
            }, {
              name: 'X-Frame-Options', 
              value: 'deny'
            }]
          };
        }
}, {
    urls: ['*://*/*'],
    types: ['main_frame']
}, ['blocking', 'responseHeaders']);

在 content.js 中，我有以下代码:

function reqHandler()
{
    alert("hello");
    var imgData = "" + this.responseText;
    //document.write("" + imgData);
    document.body.innerHTML = "";
    var img = document.createElement("img");
    img.setAttribute("src", 'data:image/jpeg;base64,'  + "" + imgData);
    document.body.appendChild(img);
}

//debugger;
var PDFdata = document.body.innerHTML;  
document.body.innerHTML = "";
var xhr = new XMLHttpRequest();

xhr.onload = reqHandler;
xhr.open("GET", "http://localhost:81/getImage.php", true);
xhr.send(); 

正如你所看到的，我在这里创建了一个跨源 XMLHTTPRequest。我面临的问题是 content.js 脚本正在执行，但我的 reqHandler 函数应该在 xhr 请求完成后运行，但根本没有运行。

其中的警报未显示。可能是什么问题？

更新这是扩展的 list 文件:

{
    "manifest_version": 2,

    "name": "My Extension",
    "version": "1.0",

    "background": {
        "scripts": ["background.js"],
        "persistent": true
    },

    "permissions": [
        "webRequest",
        "<all_urls>",
        "webRequestBlocking",
        "tabs",
        "webNavigation"
    ]
}

Answer 1

据我所知，只有在特权上下文中执行的内部扩展脚本(例如后台页面脚本)(不是无法访问特权 API 的内容脚本)才能进行跨源 XMLHttpRequest(更多信息请参阅 official docs )。

在后台页面脚本中调用 XHR，send a message到选项卡的内容脚本。

• 背景.js:

  chrome.webRequest.onHeadersReceived.addListener(function(details){
      if(isPDF(details))
      {   
          var xhr = new XMLHttpRequest();
          var tabId = details.tabId; // save id in the local context
          xhr.onload = function() {
              chrome.tabs.sendMessage(tabId, {imgData: this.responseText});
          };
          xhr.open("GET", "http://localhost:81/getImage.php", true);
          xhr.send(); 
  
          chrome.tabs.executeScript(details.tabId, {file: "content.js", ..............
  ..................
  

• 内容脚本:

  chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
      if (message.imgData) {
          document.body.innerHTML = "";
          var img = document.createElement("img");
          img.src = "data:image/jpeg;base64," + message.imgData;
          document.body.appendChild(img);
      }
  });