MMMeeja

I was inspired by Andy Mitchell’s superb GTDInbox, an extension that I’ve been using for a while now, to write my own Firefox extension.

As good as GTDInbox is, I still found myself using del.icio.us to maintain lists of items to do, web pages to read and software to install. With this in mind I decided to create a Firefox extension that would give me the same functionality for del.icio.us as GTDInbox adds to GMail.

Having read up about the del.icio.us API, it was time to get to work making my first Firefox extension...

Excellent Resources For Extension Newbies

Fortunately, I found a superb lifehacker article which started me off in the right direction.

Although it is always tempting to dive straight in to a project like this, I followed their advice to create a separate profile for development work. It takes about five minutes and provides a sandbox to keep my new extension away from my normal profile. Well worth the effort.

Next step is to create a whole bunch of files and folders for your extension, but luckily Ted Mielczarek has created a extension wizard which saves time here.

Next task was to configure firefox to read my extension from a directory of my choosing instead of a JAR file. Following the instructions from Mozilla Developer Connection made this easy. Now to test out my first extension skeleton.

First Test

I restarted Firefox with my developer profile and there was little sign of my extension!

After a bit of digging I noticed that the Tools menu had a new item labelled “Your localized menuitem”. Clicking that brought up the Hello World box I was expecting. I could also add a new button to my toolbar - I must make that automatic in the released version.

So, the basics are working - now to go to XUL school!

Designing The Extension

I want a dialog to pop up when a user clicks a button on the Firefox toolbar. The dialog will display all of the user’s existing GTD tags and give the option to create new ones. The user can select tags also add notes. Pressing OK on the dialog will cause the page to be bookmarked with the relevant tags.

If the page is already bookmarked by the user, the set of applied tags is automatically selected and the notes field is populated.

This functionality requires that the extension contacts del.icio.us to retrieve the set of GTD tags created by the user and also to add and update bookamrks. This will be done using an XmlHttpRequest.

The extension wizard created a preferences window for me, but I need to add another window for the popup. Read the tutorials at XUL Planet helped a lot but I found that using XML to create a user interface was often a case of trial and error - &dquo;Udefined Entity&dquo; is not a sensible error message.

Coding

XUL is pretty easy to pick up if you have experience of XML and XSD. Some of the layout is not obvious, but it becomes clear after a few experiments.

The Javascript is also straightforward, with the only oddities being that you must interrogate the environment for handles to access Firefox’s preferences or an XmlHttpRequest (COM developers will be at ease with this). I soon added convenience functions to read and write preference data, output debugging information to the console and pop up simple dialogs.

I found localization a bit less intuitive. The wizard starts you off well, but I became confused as to which file should contain the localized strings - there is a DTD and properties file and both could be appropriate. Generally, the properties file is the place for these things but unfortunately one must restart Firefox to register any changes. The Extension Developer add-in has an option to reload all chrome but Firefox usually crashes soon after choosing that.

I figured that using javascript libraries (like prototype.js or JQuery would get me nothing but pain on planet XUL, so that meant that I had to hunt down snippets of code library routines that I take for granted (getElementsByClassName(), I’m looking at you).

Design Tweaks

After playing around with my first prototype, I decided a number of changes had to be made...

One area that I overlooked in my initial design was storing passwords - at first I had them stored with the user’s preferences, which would not do at all, especially in plain text! Luckily there were some good examples available on the net so now they are under the control of the Firefox password manager.

Another change was to store GTD tags locally, instead of interrogating the del.icio.us web service every time the plug-in was displayed. It means that the window opens over a second quicker on my ancient laptop.

Summing Up

The extension is starting to come together but there is a load of work still to come - namely testing and prettifying it.

It has been an enjoyable project - new technologies to get my teeth into and working with only one browser makes a refreshing change. I hope to produce some more extensions in the future.

Getting Things Del.icio.us is not quite ready for the public at large yet, but watch this space for the next couple of weeks.