Using jQuery.getJSON in Chrome Extension

Question

I need to do a cross-domain request in a chrome extension. I know I can it via message passing but I'd rather stick to just jQuery idioms (so my javascript can also work as a <script src="">).

I do the normal:

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

but in the error console I see:

Uncaught ReferenceError: jsonp1271044791817 is not defined

Is jQuery not inserting the callback function correctly into the document? What can I do to make this work?

(If I paste the code into a chrome console, it works fine, but if I put it as the page.js in an extension is when the problem appears.)

Answer 1

I think your problem is you're missing one parameter

the [data]

jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] )

try sending a null

and try removing callback( in callback(function(data)

this should be it... (not tested but might fixed your problem)

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

Answer 2

The syntax is a little off. There's no need for the callback( bit. This works flawlessly. Tested in the javascript console of Chrome on this StackOverflow page (which includes jQuery):

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

Answer 3

You could try this syntax.

$.ajax({
    url: "http://api.flickr.com/services/feeds/photos_public.gne",
    data: {
        tags:    "cat",
        tagmode: "any",
        format:  "json"
    },
    dataType: "jsonp",
    jsonp: "jsoncallback",
    success: function(data) {
        for(var x in data)
            alert(x + ": " + data[x]);
    }
});

Answer 4

If you specify "api.flickr.com" in your manifest.json file you will not need to use the JSONP callback, script injection style of cross domain request.

For example:

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

This should work beautifully in you code. I would remove the querystring parameter "&jsoncallback" as there is no JSONP work needed.

The reason why your current code is not working is your code is injecting into pages DOM, content scripts have access to the DOM but no access to javascript context, so there is no method to call on callback.

Answer 5

Alas, none of these worked, so I ended up doing the communication via the background.html.

background.html

<script src="http://code.jquery.com/jquery-1.4.2.js"&gt;&lt;/script&gt;
<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 6

As many of you will know, Google Chrome doesn't support any of the handy GM_ functions at the moment.

As such, it is impossible to do cross site AJAX requests due to various sandbox restrictions (even using great tools like James Padolsey's Cross Domain Request Script)

I needed a way for users to know when my Greasemonkey script had been updated in Chrome (since Chrome doesn't do that either...). I came up with a solution which is documented here (and in use in my Lighthouse++ script) and worth a read for those of you wanting to version check your scripts:

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