Mozilla Jetpack: Firefox Extensions with Added Thrust

May 21, 2009

Mozilla Jetpack Jetpack 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