How to detect mouse click when using Userscripts?

Question

I tried to add some functions to some websites I use everyday. I want to add a function that will remove some element when I click on certain links. So I use Tampermonkey and tried to test the following code:

function removeSth(){

    $('a').click(function(){
        alert ("warning");
        return false;
    });
}
removeSth();

Sadly, it doesn't work. This is what it says:

ReferenceError: $ is not defined

at removeUsers (eval at (eval at eventHandler (eval at <anonymous> (chrome-extension://dhdgffkkebhmkfjojejmpbldmpobfkfo/content.js:56:21))), <anonymous>:65:5)

I have no idea what these mean, honestly.

score 2 · Answer 1 · edited May 23 '17 at 12:27

Userscripts and most Greasemonkey scripts operate in sandboxes. So, the script needs to either load jQuery (the $ object your code is using) itself, or it needs to inject code to use the target page's version of jQuery.

The best way to use jQuery in a cross-browser script is via this stunningly brilliant method. (^_^)

So, your script would become:

// ==UserScript==
// @name     _Mouse-click detect
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_info
// ==/UserScript==

function GM_main ($) {
    function removeSth () {
        $('a').click (function () {
            alert ("warning");
            return false;
        } );
    }
    removeSth ();
}

if (typeof GM_info !== "undefined") {
    GM_main ($);
}
else {
    add_jQuery (GM_main);
}

function add_jQuery (callbackFn, jqVersion) {
    var jqVersion   = jqVersion || "1.7.2";
    var D           = document;
    var targ        = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    var scriptNode  = D.createElement ('script');
    scriptNode.src  = 'http://ajax.googleapis.com/ajax/libs/jquery/'
                    + jqVersion
                    + '/jquery.min.js'
                    ;
    scriptNode.addEventListener ("load", function () {
        var scriptNode          = D.createElement ("script");
        scriptNode.textContent  =
            'var gm_jQuery  = jQuery.noConflict (true);\n'
            + '(' + callbackFn.toString () + ')(gm_jQuery);'
        ;
        targ.appendChild (scriptNode);
    }, false);
    targ.appendChild (scriptNode);
}

However, for just Firefox-Greasemonkey and Tampermonkey, you can simplify the script to:

// ==UserScript==
// @name     _Mouse-click detect
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_info
// ==/UserScript==

function removeSth () {
    $('a').click (function () {
        alert ("warning");
        return false;
    } );
}
removeSth ();

The first example works in Chrome. The second example also works in Chrome if you are using the Tampermonkey extension (which you totally should). — Brock Adams, Mar 08 '14 at 20:25
Okay I must did something wrong because it gives me "ReferenceError: $ is not defined" again. I also tried different urls for jquery. Anyways, I ended up just not using jquery. — Aero Wang, Mar 09 '14 at 02:21

score 0 · Answer 2 · answered Oct 10 '12 at 08:17

0

You have to include jQuery in your userscript. There are a a number of user-scripted versions of jQuery on userscripts.com that you can @require so they are available.

Though for simply detecting a click, using addEventListener is a lot lighter weight.

BTW: You really do need to learn to read error messages.

ReferenceError: $ is not defined

tells you everything you needed to know.

answered Oct 10 '12 at 08:17

Jeremy J Starcher

23,369
6
54
74

Included. Doesn't pass through to Chrome. – Aero Wang Mar 09 '14 at 01:03

zevy_boy · Answer 3 · 2012-10-10T12:21:07.810

If the site already has jQuery.why load another jquery library use it like below. Also I use jq than $ because I have seen issues in many sites its better to be safe but again its optional.

    // ==UserScript==
    // @name           jquery usage
    // @namespace      zevy_boy
    // @include        http://www.wwe.com/*
    // ==/UserScript==

    function jqx(){
    jq=jQuery;
    //todo
    }



    var head= document.body;
    var script= document.createElement('script');
    script.type= 'text/javascript';
    script.text= jqx.toString()+"jhqx();";
    head.appendChild(script);

How to detect mouse click when using Userscripts?

3 Answers3