Why doesn't jQuery work in Chrome user scripts (Greasemonkey)?

Question

Possible Duplicate:
How can I use jQuery in Greasemonkey scripts in Google Chrome?

I'm unable to get this user script to work in Google Chrome.

// ==UserScript==
// @name           voip
// @namespace      1
// @description    voip
// @include        *
// @require        http://jquery.com/src/jquery-latest.js
// ==/UserScript==

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

The alert doesn't show up. If I just put alert("Hello world!"); in the script, it works.

How can I use jQuery in Chrome user scripts?

Solution 1

The design document for Chrome's user script's implementation mentions these known issues:

• Chromium does not support @require, @resource, unsafeWindow, GM_registerMenuCommand, GM_setValue, or GM_getValue.
• GM_xmlhttpRequest is same-origin only.

This is addressed in the question Include Jquery inside GreaseMonkey script under Google Chrome. Here is my answer from that question:

---

I have written a few functions based on the script from Erik Vold's answer to help run me run functions, code and other scripts in a document. You can use them to load jQuery into the page, and then run code under the global window scope.

Example Usage

// ==UserScript==
// @name           Example from https://stackoverflow.com/q/6825715
// @version        1.2
// @namespace      https://stackoverflow.com/q/6825715
// @description    An example, adding a border to a post on Stack Overflow.
// @include        https://stackoverflow.com/questions/2588513/*
// ==/UserScript==

var load,execute,loadAndExecute;load=function(a,b,c){var d;d=document.createElement("script"),d.setAttribute("src",a),b!=null&&d.addEventListener("load",b),c!=null&&d.addEventListener("error",c),document.body.appendChild(d);return d},execute=function(a){var b,c;typeof a=="function"?b="("+a+")();":b=a,c=document.createElement("script"),c.textContent=b,document.body.appendChild(c);return c},loadAndExecute=function(a,b){return load(a,function(){return execute(b)})};

loadAndExecute("//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", function() {
    $("#answer-6825715").css("border", ".5em solid black");
});

You can click here to install it, if you trust that I'm not trying to trick you into installing something malicious, and that nobody has edited my post to point to something else. Reload the page and you should see a border around my post.

Functions

load(url, onLoad, onError)

Loads the script at url into the document. Optionally, callbacks may be provided for onLoad and onError.

execute(functionOrCode)

Inserts a function or string of code into the document and executes it. The functions are converted to source code before being inserted, so they lose their current scope/closures and are run underneath the global window scope.

loadAndExecute(url, functionOrCode)

A shortcut; this loads a script from url, then inserts and executes functionOrCode if successful.

Code

Source CoffeeScript

I wrote these in CoffeeScript (a little language that compiles to JavaScript). Here is the CoffeeScript source for use of you are using CofeeScript yourself. For JavaScript users the compiled and minified code is included below.

load = (url, onLoad, onError) ->
    e = document.createElement "script"
    e.setAttribute "src", url

    if onLoad? then e.addEventListener "load", onLoad
    if onError? then e.addEventListener "error", onError

    document.body.appendChild e

    return e

execute = (functionOrCode) ->
    if typeof functionOrCode is "function"
        code = "(#{functionOrCode})();"
    else
        code = functionOrCode

    e = document.createElement "script"
    e.textContent = code

    document.body.appendChild e

    return e

loadAndExecute = (url, functionOrCode) ->
    load url, -> execute functionOrCode

Compiled and Minified JavaScript (468 characters)

var load,execute,loadAndExecute;load=function(a,b,c){var d;d=document.createElement("script"),d.setAttribute("src",a),b!=null&&d.addEventListener("load",b),c!=null&&d.addEventListener("error",c),document.body.appendChild(d);return d},execute=function(a){var b,c;typeof a=="function"?b="("+a+")();":b=a,c=document.createElement("script"),c.textContent=b,document.body.appendChild(c);return c},loadAndExecute=function(a,b){return load(a,function(){return execute(b)})};

Solution 2

This is a nice article: How to play nicely with jQuery and Greasemonkey

The method explained works for chrome as well.

Update:

I came up with a better method that works on all browsers, which you can read about here.

Solution 3

Greasemonkey support in Chrome does not include require statements. You'd be better off creating an extension rather than a Greasemonkey script.

That, or you could use the Google API to load jQuery.

Solution 4

Easy solution (if viable for you) would be to just copy paste the minified version of jQuery into your greasemonkey script.

// ==UserScript==
// @name           voip
// @namespace      1
// @description    voip
// @include        *
// ==/UserScript==
//jQuery 1.4.2 minified code
(function(A,w){function ma(){if(!c.isReady){try{s.documentElement.doScroll...
....
A.jQuery=A.$=c})(window);
//your code
$(document).ready(function() {  
    alert("Hello world!");
});

Solution 5

Try using TamperMonkey.

Your script worked as-is for me and I've made a number of other user scripts that make use of jQuery.

View more solutions

Comments

[David Grassi]

would doing document.getElementsByTagName('head')[0].appendChild(GM_JQ); work?

[Arda Xi]

If GM_JQ is a script element containing a link to jQuery, sure that'll work.

[Arda Xi]

It would be more efficient to have the jQuery code in cache once than in every script that uses it.

[cal meacham]

I know that. Do you have a better solution?

[Tobbe]

Are you sure this works? I tried, but never got the "Hello World" alert. (FireFox 3.6)

[cal meacham]

No I'm not sure this works. And I didn't try. Btw. this solution was meant for chrome. Not for firefox where @require is supported anyway

[Yoshiyahu]

You have a trailing comma after "run at":"document_end".

[Peter Taylor]

Your second link is dead.

[Benoit Blanchon]

@PeterTaylor Here is a snapshot on archive.org