CoFindeR got accepted for the Mozilla Jetpack for Learning challenge and so I went on to get comfortable with the jetpack environment.

Some Background

Mozilla Jetpack provides a next generation environment for Firefox plugins. Jetpack allows to write Mozilla plugins with little more than common web-technologies. This is a big improvement over the old plugin method, where inside knowledge of XUL and the plugin architecture was required.

The Jetpack plugin for Firefox is required in order to get Mozilla Jetpack plugins running. Once this plugin is installed, it is provides a runtime and development environment for Firefox plugins. This combination allows to test small parts of the code without the need to create a full plugin. Another nice feature of Jetpack is that a plugin can be reloaded from the server it is modified without restarting the browser.

The Problem

I wanted to understand if I can fetch the tags for a given URL from Delicious. Unfortunately, it is not possible to send a URL to Delicious and get the related tags in return. Rather then the plain URL Delicious expects a MD5 hash that identifies the URL.

The Goal

At this level I wanted to load the delicious tags for the web-page that is displayed in the active browser-tab. If a web-page is tagged on Delicious, the related tags should be displayed to the user.

Learning Curve

The problem included two small challenges: the first challenge was to compute the MD5 hash for the active URL in the browser, the second challenge was to get the data from delicious. The second challenge was a challenge just because I never worked with jQuery before and there are some differences in the underlying logic of jQuery and mootools, which I usually use.

However, the first sub challenge was more complex than I expected. This is because there appears no easy way to compute MD5 hash codes within Firefox. The easiest solution I found on Richard Crowley's Blog. The second sub challenge was to get the URL of the active browser tab. This was a bit confusing because I expected that I have to dive into the same data structures that is also available for the web-page that is shown in the tab. It took me some time to realise that a simple 'jetpack.tabs.focused.url' was all I needed. Unfortunately, the jetpack API documentation was incomplete with this respect but I found the solution in the tr.im demo on the jetpack project web-site.

The Solution

The big advantage of a browser plugin is that this code is no longer restricted to the "same-origin-policy". This means that once the MD5 hash for the current URL was computed, fetching the related Delicious tags was a piece of cake. I started with the jetpack.tabs.onFocus() event. This event is triggered when a user activates a browser tab. However, this is not triggered if a new web-page is loaded within the active browser tab. Therefore, I had to register the same event handler also to the jetpack.tabs.onReady() event.

The event handler computes the MD5 hash for the current web-page and loads the related tags from Delicious. Finally, I used the jetpack.notifications.show() function to display the related tags to the user. So when I started browsing randomly and the demo showed the related Delicious tags for most of the pages I visited. It was only slightly frustrating that my own blog is untagged ;-)

[UPDATE]

I created a project page that installs the first demo.