Question

我有一个Chrome扩展程序，可以在扩展程序页面内的iframe中显示来自Web服务的UI。我正在使用以下方法将一些内容脚本注入远程UI：

"content_scripts": [
  {
    "matches" : [ "https://mywebservice.com/frontend/*" ] ,
    "js" : [ "frontend-page-contentscript.js" ],
    "all_frames" : true
  }
]

因为（也在manifest.json中）允许这样做：[编辑：这不是在iframe中运行内容脚本所必需的 - 但删除它并不能使AJAX按照我的预期工作]。

"sandbox" : {
  "pages" : [
    "cocoon_page_proxy.html"
  ]
}

但是，当我进行一个简单的ajax调用时（不是来自内容脚本，来自iframe）：

$.get('asdf',function success(data) { console.log("Success"); },
             function error(xhr) { console.log("Error: "+xhr.responseText); });

我没有得到任何回复，它停止了并获得状态的“0”。这（根据我的经验）通常是由于跨域权限问题，但它不应该 - 它正在从主页来自同一服务器请求另一个资源。

建议？

Answer 1

假设我理解正确并且您正在将chrome-extension://网址加载到框架中并尝试从那里XHR远程页面的内容，则需要request cross-origin permissions该域名。

Answer 2

叹息 - 在webrequest重定向代码中，结果是我的扩展程序中其他地方出现的错误。

Answer 3

因此，您实际上可以使用Chrome中的webRequest api强制跨域ajax。您只需在onHeadersReceived上添加http标头Access-Control-Allow-Origin。

chrome.webRequest.onHeadersReceived.addListener(function onHeadersReceived(resp) {
  resp.responseHeaders.forEach(function forEachHeader(header, index) {
    if(header.name.toLowerCase() === "access-control-allow-origin") {
      resp.responseHeaders[index].value = "*";
    }
  });
  resp.responseHeaders[resp.responseHeaders.length] = {
    "name":"Access-Control-Allow-Origin",
    "value":"*"
  };
  return {responseHeaders: resp.responseHeaders};
}, {
  urls: [
  //chrome-extension://jkafskjifsf/cocoon_page_proxy.html
    chrome.extension.getURL('') + 'cocoon_page_proxy.html',
   '*://your.api.endpoint.domain.com/*'
  ] ,
  types: [
    'sub_frame'
  ]
}, ['blocking', 'responseHeaders']);

尝试将其添加到您的背景页面。如果您没有后台页面，请将其添加到manifest.json并创建关联文件：

"background": {
  "scripts": [ "background.js" ]
}

您还需要将这些项添加到manifest.json文件中的现有permissions列表中：

//"permissions": [
    "chrome-extension://<put_your_extension_id_here>/cocoon_page_proxy.html",
    "*://your.api.endpoint.domain.com/*",
    "webRequest",
    "webRequestBlocking"
//],

对于网址，例如*://your.api.endpoint.domain.com/*，请添加您发出ajax请求所需的任何网址。

请评论其运作方式以及是否遇到任何问题。

AJAX在扩展页面内的iframe内调用

3 个答案: