在 Chrome 扩展中使用 jQuery.getJSON答案

【问题标题】：Using jQuery.getJSON in Chrome Extension在 Chrome 扩展中使用 jQuery.getJSON
【发布时间】：2011-02-06 20:52:06
【问题描述】：

我需要在 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 放在扩展程序中，则会出现问题。）

【问题讨论】：

标签： google-chrome jquery jsonp

【解决方案1】：

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

背景.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
});

【讨论】：

当我这样做时，我得到了这个错误：Port error: Could not establish connection. Receiving end does not exist.
如果我想显示 JSON 数组中的元素，我应该在函数中包含什么？

【解决方案2】：

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

例如：

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

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

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

【讨论】：

这是任何人查看的正确答案。 developer.chrome.com/extensions/declare_permissions因为developer.chrome.com/apps/contentSecurityPolicy

【解决方案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();

【讨论】：

这适用于我在 TamperMonkey 脚本中调用 JSONP。谢谢！

【解决方案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);
});

【讨论】：

修正了语法（复制粘贴抱歉）。它在控制台中运行良好，但在作为扩展的page.js 运行时就不行
page.js 是内容脚本吗？
仅供参考，他说的是铬扩展。不在浏览器中。

【解决方案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

【讨论】：