How to embed additional jQuery plugins into Greasemonkey

Question

So I've been able to get Greasemonkey and jQuery 1.2.6 to work together without issue, but, now I'm wondering how to embed additional jQuery plugins into my Greasemonkey script, such as Eric Martin's SimpleModal plugin (http://www.ericmmartin.com/projects/simplemodal/).

The following code gets jQuery loaded, but I'm not sure how to get SimpleModal loaded properly:

    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

    var GM_JQ_SM = document.createElement('script');
    GM_JQ_SM.src = 'http://simplemodal.googlecode.com/files/jquery.simplemodal-1.2.2.min.js';
    GM_JQ_SM.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ_SM);

    // Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') { 
            window.setTimeout(GM_wait,100); 
        }
        else { 
            $ = unsafeWindow.jQuery; 
        }

    }
    GM_wait();

Anyone have any ideas? Thanks.

Answer 1

First, if you are OK with not having Firebug debugging access the easiest way to include jquery is to use the require settings:

// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
// @require        http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.2/jquery-ui.min.js 

Following that line you can include other external scripts. Most of the jquery plugins are not available like the jquery api, but you can host it yourself.

Using the require also allows you to dump all the loading code and simply go with:

$(document).ready( function() { ... });

Firebug will report bugs, but you will not be able to step into the debugger.

Additionally, once you have jquery loaded you can load other items to like so:

$('head').append("<link href='http://www.somewebsite.com/styles.css' type='text/css' rel='stylesheet'>"); 

Answer 2

Also checkout the GreaseMonkeyWiki pages on using JQuery in a GreaseMonkey script and on the @require block.