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?
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
, orGM_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.
// ==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.
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.
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
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)})};