Mozilla Jetpack: Firefox Extensions with Added Thrust

Mozilla JetpackJetpack is a new experimental project from Mozilla that could revolutionize how Firefox browser extensions are built and deployed.

Extensions have been an important part of Firefox since its conception. Mozilla made it easy for developers to hook into the chrome API and enhance the browser in ways that had not been envisaged before. Remember how difficult client-side coding was before the introduction of third-party tools such as Firebug and the Web Developer Toolbar?

Today, there are more than 12,000 extensions available from an enthusiastic community of developers. With over one billion installs, the power of Firefox’s add-ons is certainly one of the largest contributing factors to the success of the browser itself.

Jetpack’s primary aim is to make extension development and delivery even easier:

  • HTML, CSS and JavaScript will be the only tools required. If you can code for the web, you can create a Jetpack widget.
  • Extensions will be streamed and accessed from a URL.
  • You can develop code directly in the browser using Bespin.
  • Installation and debugging is handled without restarting and uses common tools such as Firebug.
  • A lightweight and versioned API is provided.
  • An extendable set of toolkits and API libraries such as jQuery, Google Maps, Twitter and Delicious will be available.
  • An about:jetpack page shows installed extensions, source code, memory use and other useful tools.

Jetpack is available as a standard Firefox add-on which can be installed from the project page. You can then navigate to page containing a link to a Jetpack extension:


<link rel="jetpack" href="extension-name.js" name="Jetpack Extension Name" />

A notification bar will appear asking to confirm installation, which is instantaneous and does not require a browser restart. The following widget adds a “Boom!” link to the status bar that, when clicked, shows a “Booming” notification and fades the active tab’s page background to red (using jQuery):


jetpack.statusBar.append({
	html: "Boom<i>!</i>",
		width: 45,
		onReady: function(widget){
			$(widget).click(function(){
				jetpack.notifications.show( "Booming!" );
				$(jetpack.tabs.focused.contentDocument)
					.find("body")
					.css({backgroundColor:"red"})
					.animate({opacity:.5});
		});
	}
});

Aza Raskin, the Jetpack lead, provides further information about Jetpack and the project objectives:

Mozilla Labs Jetpack introduction and tutorial

See also:

The project is still at an early beta stage, so the usual installation warnings apply.

It is impossible to predict how popular or powerful Jetpack will become. However, the ease of development and and installation has the potential to increase the number of Firefox add-ons on an exponential scale. It could ultimately supersede the current extensions system.

What do you think of Jetpack? Is it the future for Firefox extensions or could it fragment development into two systems?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • JoeFlash

    This sounds like a variation of Bookmarklets and Favlets that are already supported in FireFox through GreaseMonkey. Granted it also lets you add HTML documents natively, but the idea and implementation is pretty much the same.

    I’m hoping this will help to bring new and creative additions to my browser tools.

  • http://www.yellowshoe.com.au/ markbrown4

    It certainly lowers the entry barrier for developing extensions. I think it’s a good move.