How can I use jQuery in Greasemonkey?

Question

I tried putting this line but it doesn't work:

// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js

jQuery doesn't work in Greasemonkey at all. Is there other way to use jQuery in Greasemonkey?

--

For all the people who have the same problem, you must upload the file to greasespot then install it from there.

The Create New Script option wouldn't work!

Answer 1

Perhaps you don't have a recent enough version of Greasemonkey. It was version 0.8 that added @require. Also, remember that @require is only processed when the script is first installed. If you change the list of required scripts, you need to uninstall it and reinstall it; Greasemonkey downloads the required script once at installation and uses a cached copy thereafter.

Have you tried the technique given on the Greasespot wiki, which adds a script element manually?

• Use jQuery in a GreaseMonkey script

Answer 2

There's absolutely nothing wrong with including the entirety of jQuery within your Greasemonkey script. Just take the source, and place it at the top of your user script. No need to make a script tag, since you're already executing JavaScript!

The user only downloads the script once anyways, so size of script is not a big concern. In addition, if you ever want your Greasemonkey script to work in non-GM environments (such as Opera's GM-esque user scripts, or Greasekit on Safari), it'll help not to use GM-unique constructs such as @require.

Answer 3

You can create a new script using the New User Script in Greasemonkey but you have to edit the config.xml file inside the gm_scripts folder.

Your config.xml file should have a similar syntax as this:

<Script filename="jquery_test.user.js" name="jQuery Test" namespace="http://www.example.com/jQueryPlay/" description="Just a test" enabled="true" basedir="jquery_test">
     <Include>http://*&lt;/Include&gt;
     <Require filename="jquery.js"/>
</Script>

Notice the <Require> tag.

In your script you can use direct jQuery syntax. Make sure you have the require tag in the Greasemonkey header. Here is a Hello World example:

// ==UserScript==
// @name           Test jQuery
// @namespace      http://www.example.com/jQueryPlay/
// @description    Just a test
// @include        http://*
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js
// ==/UserScript==

$(document).ready(function() {  
     alert("Hello world!");
});

Remember that after modifying the config.xml you have to restart your browser for Greasemonkey to reload the settings again.

Also note that you need to copy the jquery.js file to your script directory folder in order for this to work. I tested this, and it only works if you actually copy the file manually there.

Happy jQuerying!

Answer 4

http://joanpiedra.com/jquery/greasemonkey/

Answer 5

Rob's solution is the right one--use @require with the jQuery library and be sure to reinstall your script so the directive gets processed.

One thing I think is worth adding is that you can use jQuery normally once you have included it in your script, except for AJAX methods. By default jQuery looks for XMLHttpRequest, which doesn't exist in the Greasemonkey context. I wrote about a workaround where you create a wrapper for GM_xmlhttpRequest (the Greasemonkey version of XHR) and use jQuery's ajaxSetup() to specify your wrapped version as the default. Once you do this, you can use $.get and $.post as usual.

You may also have problems with jQuery's $.getJSON because it loads JSONP using <script> tags. This leads to errors because jQuery defines the callback function in the scope of the Greasemonkey window, and the loaded scripts looks for the callback in the scope of the main window. Your best bet is to use $.get instead and parse the result with JSON.parse().

Answer 6

As everyone else has said, @require only gets run when the script has installed. However, you should note as well that currently jQuery 1.4.* doesn't work with greasemonkey. You can see here for details: http://forum.jquery.com/topic/importing-jquery-1-4-1-into-greasemonkey-scripts-generates-an-error

You will have to use jQuery 1.3.2 until things change.

Answer 7

You might get Component unavailable if you import the jQuery script directly.

Maybe it's what @Conley was talking about...

You can use

@require        http://userscripts.org/scripts/source/85365.user.js

which is an modified version to work on Greasemonkey, and then get the jQuery object

var $ = unsafeWindow.jQuery;
$("div").css("display", "none");