Question

我需要在Chrome扩展程序中执行跨域请求。我知道我可以通过message passing来实现它，但我宁愿坚持使用jQuery习语（所以我的javascript也可以作为<script src="">）。

我做正常的事：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data) {
  console.log(data);
});

但在错误控制台中我看到：

Uncaught ReferenceError: jsonp1271044791817 is not defined

jQuery没有正确地将回调函数插入到文档中吗？我能做些什么才能做到这一点？

（如果我将代码粘贴到chrome控制台中，它可以正常工作，但如果我把它作为page.js放在扩展名中就会出现问题。）

Answer 1

唉，这些都不起作用，所以我最终通过background.html进行了沟通。

background.html

<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>
function onRequest(request, sender, callback) {
  if (request.action == 'getJSON') {
    $.getJSON(request.url, callback);
  }
}

chrome.extension.onRequest.addListener(onRequest);
</script>

javascripts / page.js

chrome_getJSON = function(url, callback) {
  console.log("sending RPC");
  chrome.extension.sendRequest({action:'getJSON',url:url}, callback);
}

$(function(){
  // use chrome_getJSON instead of $.getJSON
});

Answer 2

如果在manifest.json文件中指定“api.flickr.com”，则无需使用JSONP回调，跨域请求的脚本注入方式。

例如：

"permissions": ["http://api.flickr.com"],

这应该在你的代码中很好地工作。我会删除查询字符串参数“＆amp; jsoncallback”，因为不需要JSONP工作。

您当前代码无法正常工作的原因是您的代码注入了DOM页面，内容脚本可以访问DOM但无法访问javascript上下文，因此没有方法可以调用回调。

Answer 3

我的印象是，这失败是因为jQuery回调函数是在Chrome扩展程序的“隔离世界”内创建的，并且在响应回来时无法访问：

http://code.google.com/chrome/extensions/content_scripts.html#execution-environment

我出于各种原因使用Prototype和jQuery，但我的快速修复应该很容易解析：

// Add the callback function to the page
s = new Element('script').update("function boom(e){console.log(e);}");
$$('body')[0].insert(s);

// Tell jQuery which method to call in the response
function shrink_link(oldLink, callback){
    jQuery.ajax({
        type: "POST",
        url: "http://api.awe.sm/url.json",
        data: {
            v: 3,
            url: oldLink,
            key: "5c8b1a212434c2153c2f2c2f2c765a36140add243bf6eae876345f8fd11045d9",
            tool: "mKU7uN",
            channel: "twitter"
        },
        dataType: "jsonp",
        jsonpCallback: callback
    });
}

// And make it so.
shrink_link('http://www.google.com', "boom");

或者，您可以尝试使用扩展XHR功能：

http://code.google.com/chrome/extensions/xhr.html

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // JSON.parse does not evaluate the attacker's scripts.
    var resp = JSON.parse(xhr.responseText);
  }
}
xhr.send();

Answer 4

语法有点偏。不需要callback(位。这完美无瑕。在此StackOverflow页面（包括jQuery）上的Chrome的javascript控制台中进行了测试：

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?", function(data) {
  console.log(data);
});

Answer 5

许多人都知道，谷歌浏览器目前不支持任何便捷的GM_功能。

因此，由于各种沙箱限制（即使使用James Padolsey's Cross Domain Request Script这样的优秀工具），跨站点AJAX请求不可能

我需要一种方法让用户知道我的Greasemonkey脚本何时在Chrome中更新过（因为Chrome也没有这样做...）。我提出了一个解决方案，这里有一个解决方案（并在我的Lighthouse++脚本中使用），值得一读，以便你想要对你的脚本进行版本检查：

http://blog.bandit.co.nz/post/1048347342/version-check-chrome-greasemonkey-script

在Chrome扩展程序中使用jQuery.getJSON

5 个答案: