Greasmonkey addOn for Firefox will make it possibel to add extra features to your Firefox 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 Firefox 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 Firefox. Lets get started!
Get the Greasemonkey addOn
You simply goto the list of Firefox addOns and
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:
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):
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 scripts require a refresh of any window to work with the new code
- Any change in
@requiredirective 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):
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:
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):
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
- Change or Set the Greasemonkey Script Editor in Firefox on www.howtogeek.com
- How to add menu items to Greasemonkey using GM_registerMenuCommand
- Userscripts for Greasemonkey
- Greasefire Shows Which Greasemonkey Scripts Work On Websites You Visit
