251

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!

Keira Nighly
  • 15,326
  • 8
  • 29
  • 28
  • @Rob and who will that work? How can you install a script that never goes into userscripts.org? – Jorge Vargas Feb 12 '10 at 23:42
  • 14
    @Jorge, didn't you know that that Web site has absolutely no magic in it? You can browse to anything with a .user.js file extension, and Greasemonkey will ask whether you want to install it. That includes files on your local computer. Installing any script is as simple as dragging it onto your browser. – Rob Kennedy Feb 13 '10 at 01:51
  • 5
    It looks like it now works well even when editing file after installation. – Josef Sábl Jul 15 '11 at 10:56
  • 6
    Josef is right – [since version 0.9.0](http://wiki.greasespot.net/Version_history#0.9.0), Greasemonkey will now install @required files as soon as the file is edited. – Rory O'Kane Apr 10 '12 at 21:17
  • 1
    Also don't forget to still use `$(document).ready(function() {...});` in your code – User Dec 08 '14 at 11:21
  • 2
    The easiest way to refresh you `@requires` is to add a hash or querystring to the end of the `@require` statement, and change it whenever it needs updating. Similar to the way you'd "cachebust" a favicon. `// @require http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js?v=changeme` – Apache Sep 03 '15 at 11:40

10 Answers10

210

Perhaps you don't have a recent enough version of Greasemonkey. It was version 0.8 that added @require.

// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

If you don't have 0.8, then use the technique Joan Piedra describes for manually adding a script element to the page.

Between version 0.8 and 0.9, @require is only processed when the script is first installed. If you change the list of required scripts, you need to uninstall your script and reinstall it; Greasemonkey downloads the required script once at installation and uses a cached copy thereafter.

As of 0.9, Greasemonkey behavior has changed (to address a tangentially related issue) so that it now loads the required scripts after every edit; reinstalling the script is no longer necessary.

Pikamander2
  • 7,332
  • 3
  • 48
  • 69
Rob Kennedy
  • 161,384
  • 21
  • 275
  • 467
  • Rob, So what do I need to do? I'm creating my user scripts using the New User Script link. I add the @require and it didn't work. So how can I make it work? Please explain I want the @require method to work cause it is much more elegant than the script element method – Keira Nighly May 13 '09 at 16:59
  • 1
    Ok So I made it work. Thanks!!! I uploaded the script in Greasespot and installed it from there. – Keira Nighly May 13 '09 at 17:03
  • 2
    I imagine that when you create a new script from within Greasemonkey, the script is installed immediately. That script is the default empty file, which means you've missed your chance to require any external scripts. – Rob Kennedy May 13 '09 at 21:14
  • So there's no way to use @require on a new script you're making? :/ – quano May 13 '10 at 13:30
  • 4
    It's quite simple, @Quano. Make a new .user.js file, write your script in it, and then drag it onto your browser to install it. The limitation on requiring external scripts is only present if you *create* the script from within Greasemonkey's UI, but there's no requirement that you must use Greasemonkey to create the script file. You can edit the script after it's installed, but if you want to add new `@require` directives, you'll need to uninstall and reinstall the script for it to take effect. – Rob Kennedy May 13 '10 at 14:04
  • you have to use Greasemonkey unsafeWinfow method if you need to unbind events from a webpage http://stackoverflow.com/questions/859024/how-can-i-use-jquery-in-greasemonkey/11476441#11476441 – baptx Jul 13 '12 at 18:44
  • Minor note for us newbies, make sure you add the ```@require``` line *before* the closing ```==/UserScript==``` tag. – user8675309 Sep 03 '21 at 15:59
89

If you want to use jQuery on a site where it is already included, this is the way to go (inspired by BrunoLM):

var $ = unsafeWindow.jQuery;

I know this wasn't the original intent of the question, but it is increasingly becoming a common case and you didn't explicitly exclude this case. ;)

Henrik Heimbuerger
  • 9,924
  • 6
  • 56
  • 69
  • 4
    Not supported in Chrome apparently - http://www.chromium.org/developers/design-documents/user-scripts – Ashley Apr 07 '12 at 13:38
  • Works in Scriptish of Firefox! – Gqqnbig May 07 '13 at 14:04
  • 2
    Will want to test that you do not already have it like so: `if(typeof $ == 'undefined'){ var $ = unsafeWindow.jQuery; }` In Chrome, a sites Jquery will already be available. – Jonathon Aug 04 '13 at 16:13
  • Hmm. I am getting really strange error when using this. This `alert($('.submit_entry').length);` is both error-ing out, and sending the appropriate alert, at the same time. – Jonathon Aug 04 '13 at 16:22
21

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.

Dan Lew
  • 85,990
  • 32
  • 182
  • 176
7

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().

Ryan
  • 1,658
  • 14
  • 25
4

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://*</Include>
        <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!

Auspex
  • 49
  • 1
4

If you are using chrome you have to opt for an alternative as Chromium does not support @require.

Source: The Chromium Project - User scripts

More details and alternatives on How can I use jQuery in Greasemonkey scripts in Google Chrome?

Community
  • 1
  • 1
filype
  • 8,034
  • 10
  • 40
  • 66
4

Update: As the comment below says, this answer is obsolete.

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.

Conley Owens
  • 8,691
  • 5
  • 30
  • 43
2

the @require meta does not work when you want to unbind events on a webpage using jQuery, you have to use a jQuery library included in the webpage and then get it in Greasemonkey with var $ = unsafeWindow.jQuery; How do I unbind jquery event handlers in greasemonkey?

Community
  • 1
  • 1
baptx
  • 3,428
  • 6
  • 33
  • 42
2

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");
BrunoLM
  • 97,872
  • 84
  • 296
  • 452
  • I realize this is 5 yo, but just wondering: isn't it wrong to get the jQuery object like it was already defined on the page, referring to it as unsafeWindow.jQuery? – Redoman May 17 '15 at 13:50
0

@require is NOT only processed when the script is first installed! On my observations it is proccessed on the first execution time! So you can install a script via Greasemonkey's command for creating a brand-new script. The only thing you have to take care about is, that there is no page reload triggered, befor you add the @requirepart. (and save the new script...)

Dunstkreis
  • 104
  • 1
  • 7