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

时间:2012-10-02 01:12:52

标签: jquery google-chrome-extension

我有一个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”。这(根据我的经验)通常是由于跨域权限问题,但它不应该 - 它正在从主页来自同一服务器请求另一个资源。

建议?

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

因此,您实际上可以使用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请求所需的任何网址。

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