Mozilla JetPack: Lowering the Bar to Extend Firefox

One of Firefox's great advantages is the ability for users to create custom extensions. While add-ons have historically been non-trivial to write, Mozilla Labs is looking to make this considerably easier with JetPack.

Mozilla Labs is lowering the bar to extend Firefox with Jetpack, a new Labs project that makes it possible to use HTML, JavaScript, and CSS to extend Firefox.

Firefox has been successful in large part thanks to its rich ecosystem of add-ons. But writing add-ons isn’t trivial. That hasn’t stopped development: Firefox has thousands of add-ons, many that are immensely popular. However, it’s far from trivial to develop your own extension, and the Mozilla folks are looking to make it possible for anyone who can create Web pages to create add-ons.

The bar for participation thus lowered, let’s check out Jetpack and see what kind of options it offers.

Preparing for Takeoff

The first thing you’ll need is to install the Jetpack extension, which is available from Mozilla Labs. You can install Jetpack with Firefox 3.0, but they recommend using Firefox 3.5 if you want to actually use it for development. According to the docs, “any logging messages or errors produced by your Jetpacks will reference the wrong line numbers. This makes debugging Jetpacks difficult.”

The Moz folks also recommend that you install Firebug 1.4 alpha (or later, probably, depending on when you read this article…) if you’d like to be able to more easily debug your apps.

Jetpack Testflight

Once you’ve installed Jetpack, you can try out a few of the sample applications written using Jetpack. Typing about:config in the location bar will bring up the Jetpack Welcome page, with two Jetpack demos. Just click on the UnAd and/or Email Notifier demos, and install.

The demos so far on the Jetpack homepage are fairly simple. Nothing truly compelling, unlike some of Firefox’s add-ons. But you can find a wider selection on the Mozilla wiki and via Userscripts.org. You’ll find a wider variety here, though still nothing quite as useful as the Xmarks etension or Google Gears. But the point of Jetpack isn’t to be as fully featured as Firefox extensions: It’s to bring more developers to the table and make it easier to add functionality to Firefox.

If you try to install Jetpacks from untrusted sources, you get a fairly scary warning page before you can proceed. The page also contains a notice that there’s plans for a “social trust network” to allow users to see if their network had tried the feature and vouch for its safety.

The Jetpack extensions come with an added bonus: They don’t require a browser restart. All Firefox add-ons currently require the user to restart the browser. Once the Jetpack extension is installed, you can add Jetpack add-ons without having to reboot the browser. Though the user is still prompted to affirm the install — so there’s no question of having Jetpack addons installed without explict consent.

Jetpacks are also supposed to avoid the versioning problem users have with extensions now. Since Jetpack consists of HTML, CSS, and JavaScript, without getting into the Firefox Chrome or internals, you don’t have to update and check an extension against each new version of Firefox. This makes upgrading Firefox less painful, especially for those of us who run development versions of Firefox. (The above comments about running 3.5 notwithstanding.)

To remove Jetpacks, go to about:config and click “Installed Features.” You’ll see all of your installed Jetpacks, and next to them the “uninstall” link. Note that you only have the option (right now) of uninstalling Jetpacks. Note that once you uninstall a Jetpack, you can reinstall it unless you choose to “purge” it after it’s been uninstalled. (As you can see, the language around Jetpacks is a bit user-unfriendly so far.)

Reaching New Heights

The fun comes in when you start rolling your own Jetpacks. The Labs site has a Tutorial and API reference to get you started.

Rather than trying to go through the API alone, I’d recommend grabbing a few of the example Jetpacks and seeing how they’re written. You can see any installed Jetpacks by going to about:jetpack, clicking on "Installed Features" and then clicking "view source" next to installed Jetpacks.

Once you're ready to get started, go to the same config page and then click "Develop." This page will display a black box where you can paste your code and run it to see how well it performs.

For example, paste the following into the development console:


That will open a new tab and load the Linux Magazine Web site. OK, it's very easy, but we're just playing about here. What if you wanted to distribute the feature? Save it as a JavaScript file (something ending in .js) and link to it from a web page with a relative link (<rel="jetpack" href="name.js" name="Name"/>.

Load the page with the link, and you'll be prompted to install the Jetpack. For a more in-depth look at creating Jetpacks, look at the tutorial. If you're familiar with JavaScript, HTML, and CSS, it shouldn't take long before you're creating useful Jetpacks.

If you want to get started with Jetpack grab the extension and head over to the Google Group to discuss Jetpack with other hackers. The group keeps up a list of useful links that may be useful and the discussion list seems pretty lively already for such a new feature.

Comments on "Mozilla JetPack: Lowering the Bar to Extend Firefox"

You can definitely see your skills in the work you write.

The sector hopes for more passionate writers such as you who aren’t afraid to mention how they believe.
All the time go after your heart.


If you would like to obtain a great deal from this article then you have to apply these techniques to your won


Hello. Great job. I did not anticipate this. This is a great story. Thanks!


Well I definitely liked studying it. This post offered by you is very useful for proper planning.


Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>