Trying to load jquery into tampermonkey script

Question

I am writing a script which logs into my college network when the login page is loaded.

The code looks as follows

// ==UserScript==
// @name       My Fancy New Userscript
// @namespace  http://use.i.E.your.homepage/
// @version    0.1
// @description  enter something useful
// @match      <College login page>
// @copyright  2012+, You
// ==/UserScript==    
$(document).ready(function() {

    var usr=document.getElementsByName("username");

    var pass = document.getElementByName("password");

    usr.value="usrname";    
    pass.value="password";    

    var submitButton = document.querySelector ('input[type="submit"][value="Login"]');

    var clickEvent  = document.createEvent ('MouseEvents');

    clickEvent.initEvent ('click', true, true);

    submitButton.dispatchEvent (clickEvent);

    });

The console shows a error saying

$ is not defined

Can someone tell me what is going on here?

score 361 · Accepted Answer · edited Aug 22 '22 at 07:20

361

You need to have a @require in the user script header to load jQuery. Something like:

// @require https://code.jquery.com/jquery-3.6.0.min.js

(Selecting your desired version from the of list of available versions of jQuery)

edited Aug 22 '22 at 07:20

Métoule

13,062
2
56
84

answered Aug 07 '14 at 01:14

Aardvark99

3,626
1
12
2

19

Please don't use `jquery-latest`. https://blog.jquery.com/2014/07/03/dont-use-jquery-latest-js/ – Oct 04 '16 at 18:32
9

Be warned that this may interfere with the page's own definition of `$` – Owen Feb 05 '17 at 18:51
1

@Owen and how would we deal with that – Menasheh Apr 17 '18 at 18:43
3

@Menasheh [jQuery.noConflict()](https://api.jquery.com/jquery.noconflict/). – Dan Atkinson May 17 '18 at 10:46
Also be aware the the page's own jQuery may come along and clobber the `@require`d version. `noConflict` will also help with that. – jinglesthula Jun 08 '18 at 14:56
To deal with 2 jQeries clashing, jQery provides a relinquishing mechanism.More info [here](https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/) – YetAnotherBot Oct 28 '20 at 11:48

score 14 · Answer 2 · answered Feb 28 '21 at 10:16

14

For future googlers,

If you have used the above method and still jQuery doesn't seem to be loaded by your script try looking at the spaces, And try to match the indentation with the rest of the header. Apparently the indentation is important.

Faulty:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://stackoverflow.com/*
// @require http://code.jquery.com/jquery-3.4.1.min.js 
// @grant        none
// ==/UserScript==

Correct:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://stackoverflow.com/*
// @require      http://code.jquery.com/jquery-3.4.1.min.js 
// @grant        none
// ==/UserScript==

answered Feb 28 '21 at 10:16

Mohd Abdul Mujib

13,071
8
64
88

Thanks for this! Just a thought: can't the accepted answer be edited instead of an extra post ? – deryb Apr 01 '22 at 11:34
1

By that logic, every answer would end up with just one very long answer edited over time. Don't you think? – Mohd Abdul Mujib Apr 01 '22 at 12:33
to be honest, a comment like "take care of indent when inserting @require" would also be enough and could easily be edited. and i agree a bit with your statement in the comment above, but on the other hand, if every question had several answeres, than the answere isnt good enough. even one LONG answere is may just bad explained ^^ – Dwza Jul 19 '22 at 09:39

Trying to load jquery into tampermonkey script

2 Answers2

Linked