CODEWITHSUNDEEP
javascriptjquerygreasemonkey
Carl
Carl

Reputation: 1726

How to embed additional jQuery plugins into Greasemonkey

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.

Upvotes: 5

Views: 6660

Answers (2)

Michael Paulukonis
Michael Paulukonis

Reputation: 9100

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

Upvotes: 2

Steve Davis
Steve Davis

Reputation: 716

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'>");

Upvotes: 11

Related Questions