Saturday, April 28, 2007

Develop Firefox extensions the easy way. Go Greasemonkey.

One of the coolest features of Firefox is add-ons. Drop into Firefox add-on site, you can almost always find an add-on that does what you need. But what if you don't? Make your own! Sounds hard, but the good news is there are shortcuts. Once upon a time, I released a few extensions myself. They were a bit popular long back but not any more since the web sites they enhance have introduced the features themselves. But the point is, anyone can make their own. Many people have emailed me asking for some beginner's tips, so I thought it'd be a good idea to collate my replies to them on a blog. So here we go ...

The official way to develop ff extensions is documented here:
http://kb.mozillazine.org/Getting_started_with_extension_development

However I should admit that I have never tried all this. I take a shortcut by using Greasemonkey scripts. Greasemonkey is a Firefox add-on that you can install from here:
https://addons.mozilla.org/en-US/firefox/addon/748

What does this do? It hides all the gory details of actual extension development from you. Imagine it like a middle man between Firefox and you - if you know some simple Javascripting, you can write your own sweet functionality and hand it over to Greasemonkey, it'll execute it like any other extension. What kind of 'functionality' can you add? The most common ones are tweaking the way some web pages behave when they show up on your browser. For example, lets say that you don't like the pink background color on a certain web page you visit often. You can write a script that'll change it to a different color! Needless to say, this is just the way it displays on YOUR Firefox browser. You won't see the change if you use IE and your friend won't see it if he uses Firefox without this script.

So what do you need to begin scripting? A book. This is the one I used, and its free:
http://diveintogreasemonkey.org/

It doesn't teach you much Javascript, so you'll need to google for "Javascript tutorial" if you aren't familiar with it. It is terribly easy, so don't let it stop you from making your first move. Apart from Javascript, if you are familiar with XPath queries, it is a bonus, but it is OK if you don't.

After writing a few scripts, you can consider yourself an extension developer. But wait, there is a catch. The catch is, these scripts run under Greasemonkey's space, so you won't see your script listed as an extension in the browser's add-on list. Which means, when you distribute your script to others, you'll have to make them install Greasemonkey first and install your script using Greasemonkey. It is probably OK, but your friends may not consider you a proper extension developer. To get around this situation, I used this compiler:

http://arantius.com/misc/greasemonkey/script-compiler

This takes in a GM script and converts it into a proper Firefox extension!

What next? After you are done reading that book and writing some simple scripts yourself, you can do the following:

  • Take a look at this huge repository of scripts and ideas - http://userscripts.org/
  • Start learning the 'proper' way to make Firefox extensions from the link I gave above (and no, I didn't do it and I'm not too keen right now)

Also, in case you didn't know, Firefox extensions files are just zip files. Just download any extension without actually installing it (one way to do it would be to use IE) and unzip it using some standard zip program like IZArc or 7-Zip (rename the extension to .zip if necessary). That'll expose the source code of any extension you want. Look at what they've done and see if it helps you figure out how to do something you have in mind.

Once you have a nice extension to show others, do submit it to Mozilla. They'll take a few weeks to test it and release it on their site. And read this when you get to that level:
http://developer.mozilla.org/en/docs/Extensions

Happy scripting.

No comments: