www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

Getting started with coding your own scripts for the Greasemonkey addOn for Firefox

Greasmonkey addOn for will make it possibel to add extra features to your without much efford. If you know your javascript, DOM, CSS, HTML – well, basically if you are a professionel internet frontend developer – you should be able to extend with the tools that you find on the net (if that unlikely event should appear). Here I will go through what you need to get started with developing your own javascript, adding new features for your . Lets get started!

Get the addOn

You simply goto the list of Firefox addOns and

download/install the Greasemonkey addOn

from there. You ofcause then need to restart Firefox. After that is done you will see a monkey icon to the lower right of your browser:

You find the Greasemonkey addOn to the lower right of your Firefox window

To turn on and off left mouse click, to access script right mouse click on the monkey.

Your first script

Let’s do a hello world! You simply right mouse click on the monkey and choose the “New user script..” (here you see it in Danish):

To add a new script simply choose 'New User Script...'

The editor – first time

First time you do this you will need to locate the editor which you wish to use for editing your javascript. I choose Microsoft Visual Studio (MVS) because of the build in javascript intellisence, but any editor will do. Oh, and one thing – if you go for MVS you will experience that every time you choose to edit a script a whole new MVS is opend, not so smart. However you can edit your script at any time even without going through the Greasemonkey interfase, just know that:

  • Edited/changed require a refresh of any window to work with the new code
  • Any change in @require directive will call for you to reinstall your script (more below)

See also below: The editor – how to change it

The basic choises

After you have pressed the “New user script…” you will be prompted with something like this (here in Danish):

The New User Script dialog of the Firefox Greasemonkey addOn

Simply fill out the fields, with, name, namespace, short description and important the URLs where the script should and should not be able to execute. The first field will have the current URL of the active tab/window in your firefox filled out. You may remove that and simply choose any website by entering “http://*”.

If you have issues like you dont want this script to run on your local pc, you can enter URLs to exclude.

Here is an example of how a simple hello world script might look like now:

image

As you can also see, the URLs which you wanted to include and exclude have converted into directives. The @include and @exclude directives, which you ofcause may change manually in your script file at a later time.

Running the script

After you have enteret a “alert(‘Hello world’);” and saved the script you are ready to run the script. You simply refresh the page by pressing F5 or Ctrl+R.

What you will see is an alert box saying “Hello world”. The code will be called after the page have been rendered (loaded) into the browser window. Nothing advanced here ofcause, but you now have the fundament for developing your own utilities, macroes in the form of Grease monkey scripts.

Adding external resources like jQuery to your script

You have the option to specify any required script libraries (resources) which your script need to have installed. You do that by using the @require directive in the header of your script. Lets try to add jQuery.

- adding jquery description -

One thing to notice when adding new @require directives is that you need to reinstall your script again:

As of Greasemonkey 0.8.x, an @require directive added to an already installed script will not be recognized. Reinstall the script to force Greasemonkey to recognize the @require directive. You can simply drag-and-drop the script onto a Firefox browser window, or again in Firefox choose File>Open and select the user script, to reinstall it.

When you want to reinstall I find drag’n’dropping the script from explorer directly onto a firefox window a very convient way. Here is hos it may look (here in Danish):

image

A nice clean way to reinstall a script! The Greasemonkey folks have even added a short message at the bottom of the status line which displays information about how it succeded in installing the script! Well done Greasemonkey folks!

Links