代码之家 › 专栏 › 技术社区 › Paul Tarjan

在chrome扩展中使用jquery.getjson

jsonp jquery google-chrome

Paul Tarjan · 技术社区 · 16 年前

我需要在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放在扩展中,则会在出现问题时出现。)

5 回复 | 直到 14 年前

Paul Tarjan 16 年前

唉,这些都不起作用,所以我最终通过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/页面.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
});

Kinlan 16 年前

如果您在 manifest.json 文件不需要使用jsonp回调,脚本注入方式的跨域请求。

例如:

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

这在你的代码中应该能很好地工作。我将删除querystring参数“&jsoncallback”,因为不需要jsonp工作。

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

MrChrisRodriguez plam4u 14 年前

我认为这是失败的,因为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();

Max Shawabkeh 16 年前

语法有点不对劲。不需要 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);
});

James Nisbet 15 年前

很多人都知道,google chrome目前不支持任何方便的gm_u功能。

因此,它是 不可能的 由于各种沙盒限制(甚至使用诸如 James Padolsey's Cross Domain Request Script )

我需要一种方法让用户知道我的Greasemonkey脚本是什么时候在Chrome中更新的(因为Chrome也不这么做…)。我想出了一个解决方案,在这里有记录(并在我的 Lighthouse++ 脚本)值得一读的是,对于那些想要版本检查脚本的人:

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