Greasemonkey & jQuery

23 March 2010
4:13 PM

7 Comments

I taught a class this past fall where we used Greasemonkey as a tool for building prototypes of new browser functionality. We also used jQuery extensively to make JavaScript in the browser simpler. There are some tricks to getting the two to work together that I’ve been meaning to share.

Loading jQuery in a Greasemonkey script

Simply loading jQuery within Greasemonkey hasn’t always been straightforward. I think they should just bundle jQuery with the Greasemonkey package since just about everyone is using it already, but that’s a separate issue.

The old way to include jQuery in your Greasemonkey scripts was to add a <script> tag to every page you visit linking to the jQuery library. Although this works, it’s a clunky solution. It introduces timing issues: since you can’t be sure when the script would load, you have to poll continually, checking to see if jQuery has downloaded yet. Once you detect that jQuery is available, you can run your script. This approach also might clobber other JavaScript running on the main page (like the Prototype library) before you have a chance to call jQuery.noConflict.

Fortunately, later versions of Greasemonkey made this hack unnecessary by adding the @require attribute to scripts. When you install a Greasemonkey script that has an @require statement, the listed resource is downloaded once and included in the script as if it were pasted directly into the document. Unfortunately, there’s a small stumbling block for people testing their scripts: the @require statement is only executed when you install a script. This means that if you create a new Greasemonkey script in Firefox, add the @require line, and save your file nothing will happen. You have to uninstall your script and reinstall it because @require is only processed at installation. Once you do this, you can use jQuery all you want in your script. Except for…

jQuery AJAX and Greasemonkey

By default, jQuery’s helpful AJAX methods like $.get and $.post don’t work in Greasemonkey. jQuery acts as a wrapper around browser’s varying implementations of XMLHttpRequest (XHR), which is what makes AJAX possible. In a Greasemonkey script you don’t have XMLHttpRequest. Instead you get GM_xmlhttpRequest. You can use jQuery’s .ajaxSetup() to specify a different object for requests, but GM\_XMLHttpRequest actually operates differently than a normal XHR.

When you create a new XMLHttpRequest you get an object that you can use to set options like the URL, HTTP verb, callback functions, and so forth. Once everything is set up, you start the XHR with the .send() method. With GM_XMLHttpRequest, you set all these options when you create the object because it sends immediately when you create it. In order to use GM_XMLHttpRequest with jQuery, we need a way to encapsulate its functionality. This script does that:

// Wrapper for GM_xmlhttpRequest
function GM_XHR() {
    this.type = null;
    this.url = null;
    this.async = null;
    this.username = null;
    this.password = null;
    this.status = null;
    this.headers = {};
    this.readyState = null;

    this.open = function(type, url, async, username, password) {
        this.type = type ? type : null;
        this.url = url ? url : null;
        this.async = async ? async : null;
        this.username = username ? username : null;
        this.password = password ? password : null;
        this.readyState = 1;
    };

    this.setRequestHeader = function(name, value) {
        this.headers[name] = value;
    };

    this.abort = function() {
        this.readyState = 0;
    };

    this.getResponseHeader = function(name) {
        return this.headers[name];
    };

    this.send = function(data) {
        this.data = data;
        var that = this;
        GM_xmlhttpRequest({
            method: this.type,
            url: this.url,
            headers: this.headers,
            data: this.data,
            onload: function(rsp) {
                // Populate wrapper object with returned data
                for (k in rsp) {
                    that[k] = rsp[k];
                }
            },
            onerror: function(rsp) {
                for (k in rsp) {
                    that[k] = rsp[k];
                }
            },
            onreadystatechange: function(rsp) {
                for (k in rsp) {
                    that[k] = rsp[k];
                }
            }
        });
    };
};

Once we have this wrapper object, we need to tell jQuery to use it instead of the standard browser XHR:

$.ajaxSetup({
    xhr: function(){return new GM_XHR;}
});

If you include this code in your Greasemonkey script (or @require it—see above), you will be able to use $.ajax, $.get, and $.post in your scripts. I’m not sure about $.getScript, and I know that $.getJSON will often fail.

Cross-site scripting with Greasemonkey and jQuery

The short story: using $.getJSON in Greasemonkey will fail anytime you request a resource on another site. To avoid this, just use $.get and parse the returned JSON yourself (using eval() or—better yet—JSON.parse() (see also json2.js).

Update 2010-04-11: jQuery 1.4 added the $.parseJSON method which is what you should use to handle JSON responses (via Paul Tarjan).

For cross-domain JSON requests jQuery uses <script> tags and JSONP as a workaround for the same origin policy. JSONP works because the responding server wraps its response with the name of a user-defined callback function. Instead of returning:

{"param": "value"}

the server will respond with

callback_function_name({"param": "value"})

where callback_function_name is something jQuery creates automatically. When you use Greasemonkey, jQuery defines this function in the scope of the Greasemonkey window, but the browser looks for the function in the main window’s scope and you get an error. The solution is simply to avoid $.getJSON and use $.get instead. Since GM_xmlhttprequest doesn’t have to abide by the same origin policy you don’t need JSONP.

I hope these tips are helpful for people familiar with jQuery who want to try their hand at making a Greasemonkey script.

Comments

If you already have jQuery on the page, you could use it to parse the JSON:

      var data = jQuery.parseJSON( xhr.responseText )

Thanks for the tip, Paul. The $.parseJSON method is new in jQuery 1.4.1 and it is exactly what people should use when handling JSON responses themselves. I’ve updated the article to reflect this.

Ryan, thanks for your script, I’ve been using it for months.

I just started using GM + jQuery 1.4, using a hack at http://forum.jquery.com/topic/importing-jquery-1-4-1-into-greasemonkey-scripts-generates-an-error to get it working.

After I did this, I found that the above script stopped working.

However, I modified your script slightly by adding that.onreadystatechange(); as below.

onreadystatechange: function(rsp) {
    for (k in rsp) {
        that[k] = rsp[k];
    }
    that.onreadystatechange();
}

With that change, the script allows me to do cross-domain AJAX in GM + jQuery 1.4.

I’m not entirely sure that is the best, but I hope that it helps someone!

Thanks Ryan for this script and Travis for the fix. I had no idea where to start looking when it didn’t work with jquery 1.4.2 :)

Ryan,

I may be trying to do too much, maybe not.

I’ve got your code working with the latest version of jQuery. That much works.

But I’m on an SSL-protected page and I’m trying to call (.get or .getJSON) from a different domain, also SSL-protected.

The JS console record this, which seems relatively straightforwardly to be an issue to do with SSL certificate validation:

“server does not support RFC 5746, see CVE-2009-3555”

Now, it’s news to me that there’s anything wrong with my cert! Could it in fact be something else? I’ve “googled” around the place but I’m lucking out on help here.

Any thoughts?

I’m so close on this one, but being thwarted :(

-Aliste

Hi!

Thanks a lot for the post. To make it working with JQuery 1.5.1, I had to implement getAllResponseHeaders. Furthermore, I removed GM_xmlhttpRequest.onreadystatechange which is not required. I put the working version on https://gist.github.com/999065.

Regards,

—Martin

Ryan, Martin - thanks, guys. Much helpful.