Development [LWN.net]

Jetpack: Firefox extensions as they should be

June 3, 2009

This article was contributed by Koen Vervloesem

One of the great strengths of Firefox is its extensions ecosystem. Over 12,000 enhancements for the browser are available, varying from additions of simple features to complete applications such as IRC or FTP clients. Many users just keep Firefox as their default browser because they can't live without specific extensions that don't exist in other browsers. This hackable nature of Firefox is something that Mark Surman of the Mozilla Foundation has emphasized countless times, for example in his keynote at FOSDEM 2009 a few months ago: only the ability to extend the web makes it truly the user's web.

Unfortunately, developing a Mozilla Firefox extension is far from easy. It requires a fair bit of knowledge of a strange mix of technologies: RDF (Resource Description Framework), XUL (XML User Interface Language), XPI (Cross-Platform Installer), XPConnect, XPCOM (Cross-Platform Component Object Model), DOM (Document Object Model), JavaScript and CSS (Cascading Style Sheets). Hence, the user willing to enhance his browser has to become well-versed in a long list of arcane languages.

To address this, the Mozilla Add-ons blog posed the question "How can we make the development of extensions easier?" and published an Extension Developer Survey. The top 5 requests were more concerned about the review queue, documentation, tutorials and writing and debugging tools, but several responses suggested some improvements to the add-on platform itself:

not requiring browser restart for installation
better debugging tools
better packaging
easier way to write extensions
code generation/IDE

The Mozilla developers have clearly listened to these suggestions, as last week Mozilla Labs announced Jetpack, a new experimental extensions architecture which abstracts away much of the complexity of the current extensions system. The Jetpack API addresses the five issues mentioned above and at the same time lowers the bar for users by requiring only knowledge of HTML, CSS and JavaScript. This means that everyone with basic web development skills is able to extend their web browser using the same web technologies they already know. The choice for these web standards is also clever because it means that extension developers can re-use existing web development and debugging tools. For example, a Jetpack extension writer is able to use the Firebug extension (a popular extension for debugging, editing and monitoring CSS, HTML, DOM, and JavaScript) to develop his add-on.

Writing a Jetpack extension

To get started, users have to install the Jetpack Extension and restart Firefox. The browser then shows the about:jetpack page, which contains some Jetpacks (extensions created with the Jetpack API). Jetpack community lead Nick Nguyen writes on his blog how easy it was for him to develop a new Jetpack:

I was able to put together a Delicious Notifier Jetpack Feature in less than an hour using simple JQuery, CSS, and html. All I did was install the GMail Notifier widget and pasted it into Bespin, read the 20 lines of code that made it work, and started hacking away to get the information i wanted. Since I didnt have to restart and could inspect and debug via Firebug, development was painless.

There are some demos one can use for inspiration, as Nguyen showed in his blog. The Jetpack Tutorial is also very helpful to start. Developing a Jetpack extension turns out to be surprisingly simple. It's an iterative process where the developer writes some code right in his browser, refreshes a web page to see the effect of his changes in the Jetpack extension code, then continues rewriting his code, and so on. One especially interesting feature is that Jetpack has automatically included jQuery by default. This popular JavaScript library exposes a lot of functionality, like DOM traversal and modification, events, CSS manipulation and Ajax. The tutorial shows how to write a script of only ten lines that removes embed elements from a page on-demand and at the end of the tutorial, the user learns how to write his own GMail notifier. Jetpack also has a Twitter library and will see more common web APIs in the future, including the ability to import external libraries.

At the moment, the API reference is woefully incomplete, but this should change as people start to experiment with Jetpack. Most of the interesting objects reside in the jetpack namespace. For example, the jetpack.notifications object can be used to display a notification message, and by using jetpack.tabs properties, the developer is able to manipulate the browser's tabs.

Even distributing a Jetpack extension is simple: just drop the code into a JavaScript file. Add a link element to a page:

    <link rel="jetpack" href="js-file">

Subsequently, a visitor to the page will see a notification bar with the option to install the Jetpack. It's also nice to see the developers have thought about security: the user sees the whole Jetpack extension source code before he installs it. In the future, the Jetpack system will work with a "social trust network" to help people make informed decisions about whether to install a Jetpack extension or not.

When using Firefox 3.0 or earlier, any logging messages or errors produced by Jetpacks reference the wrong line numbers, which makes debugging Jetpacks difficult. So anyone planning to experiment with Jetpack should consider using Firefox 3.5 Beta. Moreover, if the user doesn't have the latest version of Firebug installed, all logging messages appear in the JavaScript Error Console. For serious debugging, the Jetpack developers strongly suggest using Firebug 1.4 Alpha.

Conclusion

At the moment Jetpack is still an early prototype (that's why it's in Mozilla Labs), and it is not meant to replace the existing extension system. It is however well-suited for simple addititions to Firefox, analogous to the changes users can make to web pages with Greasemonkey. For this purpose, Jetpack clearly looks like the right choice: it not only makes developing extensions much simpler, but it creates new possibilities, such as installing an extension without the need to restart the browser.

Comments (7 posted)

System Applications

Database Software

cryha 1.0 announced

Version 1.0 of cryha has been announced. "Cryha is a Python toolkit for securing information into a data base; it lets hash passwords, and encrypt/decrypt personal information. It is ready for input of Unicode characters, and the schema is returned as Unicode."