Greasemonkey for developers

If you are Mozilla Firefox user you probably know what are addons and use some of them to make surf life more comfortable.

This article is about GreaseMonkey addon. I’d like to introduce it mostly for developers and want to share my knowledge cause I was surprised by its power, simplicity and functionality.

I tried to gather all useful technics, code snippets and documentation in one place to make it a good start page.

All code was tested on

Mozilla Firefox: 3.5.5

GreaseMonkey: 0.8.20090920.2

Firebug: 1.4.3

What is Greasemonkey

Shortly speaking, this addon can execute your javascript code on any page load in browser. Actually this addon offer javascript plugin functionality, you can very easily add your javascripts plugins to it. This javascript plugins can modify page on the fly by adding additional functionality. It can add or replace page content, change colors, styles, add new buttons, reformat text, etc

Using GM is much simpler, comparing to write own FF addon.

My favorite feature is: grab and submit page content using AJAX calls to ANY site. A short and simple script can extract for example stock exchange rates and post them to your site, while you are browsing. Or even more, browsing can be automated as well behaving like a spider.

Also you can download various scripts to understand how they work. However most important and interesting aspects of this I will explain in this article.

Script development

Writing first script

I love Google as search engine, but it’s logo is really boring. I would like to see something better, they have a lot of other good logos here http://www.google.com/logos/. So lets write small script that replaces default Google logo with another one.

Right click on monkey face and choose new user script. Enter information like on screenshot and click OK.

User interface

Script autoupdate

This simple thing can add “check for update” functionality for your scripts. It is very simple, first downloads script and checks version, if it does not match, propose to update by navigating to script url.

Metablock

The metadata block is a section of a user script that does not execute any code, but describes the script. It contains the script name, namespace, description, and include and exclude rules.

The metadata block appears in JavaScript comments and may appear anywhere in the top level Greasemonkey code scope of the script, but is usually near the top of the file. Changing the metadata of an installed script does not do anything, as this data is only accessed during installation. The script must be re-installed for these changes to take.

Misc stuff

How to change default script editor

Debugging and logging

If you are developer and use Firefox, you probably has Firebug installed. Firebug is a very feature rich javascript debugger. Greasemonkey scripts can be easily debugged using firebug. Also you can use Firebug console for logging:

This function prints debug messages even if script is run without GM, for debugging.

1

2

3

4

5

6

7

function_log(msg){

if(typeof GM_log=='function'){

GM_log(msg);

}else{

console.log(msg);

}

}

Greasemonkey and jQuery

This is a simple snippet that helps us load the jQuery power into our userscripts with Greasemonkey.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

// Add jQuery

varGM_JQ=document.createElement('script');

GM_JQ.src='http://jquery.com/src/jquery-latest.js';

GM_JQ.type='text/javascript';

document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded

functionGM_wait(){

if(typeof unsafeWindow.jQuery=='undefined'){

window.setTimeout(GM_wait,100);

}else{

$=unsafeWindow.jQuery;letsJQuery();

}

}

GM_wait();

// All your GM code must be inside this function

functionletsJQuery(){

alert($);// check if the dollar (jquery) function works

}

UPDATE: Greasemonkey 0.8 introduce the @require metadata key that can be used to load JavaScript libraries into you user-script. See @require in the Scripting Reference for more info.

1

2

3

4

5

6

7

8

9

10

11

12

13

// ==UserScript==

// @name jQueryPlay

// @namespace http://www.example.com/jQueryPlay/

// @description Plays around with jQuery. Simply appends " more text." to string in the element with id sometext.

// @include http://www.example.com/

// @require http://code.jquery.com/jquery-latest.min.js

// ==/UserScript==

(function(){

// This will be executed onLoad

// Append some text to the element with id #someText using the jQuery library.

Post navigation

2 comments

Basically, to use the userscript, you have to have Greasemonkey itlansled. If you don’t know about Greasemonkey, I suggest you visit . It’s an extension for firefox that allows you to make user scripts that contain bits of javascript that messes with the DHTML of the page. Every time you visit a site that matches the parameters set by your userscript (which you can easily change), the javascript is executed. It’s quite cool, really.