Chrome扩展中的JSONP请求,回调函数不存在？

Question

我在chrome扩展(内容脚本)中发出JSONP请求.当我作为网页运行 - 在我的浏览器中加载HTML文件时,一切都运行良好,但是当我将其作为chrome扩展加载时,当服务器给出响应时,jquery创建的jsonp回调函数似乎不存在.

我的控制台说:

Uncaught ReferenceError: jQuery17105683612572029233_1323808231542 is not defined

这是我的ajax请求:

$.ajax({
    url: 'http://example.com',
    data: 
    {
        imgUrl: this.href,
        returnString:true
    },
    dataType: "jsonp",
    success: function(msg){
        newNode.src = msg.data;
    },
    error: function(msg){
        console.log(msg.data);
    }
})

Answer 1

问题是JSONP响应被实际页面捕获,在Chrome内容脚本限制您的沙盒JavaScript代码之外.

jQuery17105683612572029233_1323808231542是jQuery JSONP调用为特定调用动态生成的回调函数的名称.此功能正在内容脚本可以访问的沙盒区域中定义.

我所知道的唯一可行的解​​决方法是从内容脚本中进行XHR调用.从Chrome 13开始,您可以从内容脚本中进行跨域XHR调用(非常酷).在清单文件中,您需要将外部URL添加到权限:

{
    ...
    "permissions": [
        "http://example.com"
    ]
}

然后您可以像这样进行XHR调用:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
       //handle the xhr response here
  }
}
xhr.send();

您将需要执行jQuery为您自动执行的一些操作,例如将数据对象的值编码到XHR URL(在您的情况下为"imrUrl"和"returnString")以及转换响应来自xhr.responeText或xhr.reponseXML到一个对象中.

这种方法的缺点是,如果您在Chrome扩展程序和其他内容(如书签)之间共享此代码,则现在必须为Chrome用例提供不同的逻辑.

有关详细信息,请参阅:Chrome扩展XHR