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

David Grassi picture David Grassi · Apr 6, 2010 · Viewed 11.2k times · Source

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?

Answer

Jeremy picture Jeremy · Jul 26, 2011

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)})};