Writing Firefox Add-ons with the JetPack SDK


Mozilla's Jetpack SDK provides an environment for building Firefox add-ons, with high-level APIs and a Common-JS-compliant system of Javascript modules.

The documentation for the Jetpack SDK is pretty good. For the current version (0.6), download and extract the SDK tarball then run source bin/activate from within the extracted directory to set up environment variables. Running cfx docs will then open up the documentation for your version of the SDK in a web browser.

The architecture of a Jetpack add-on can be very simple: a folder in the 'packages' directory, containing a 'package.json' file (a description of this package) and a 'lib' folder which contains a 'main.js' file.

Once you have some code in the main.js file, run cfx run --app firefox --binary /path/to/firefox (edit the path as appropriate) and Firefox will start up using a clean, temporary profile with the add-on installed.

Hopefully it'll be possible to do live editing of the add-on without having to relaunch Firefox, but I haven't found out how to do that yet.

Once the add-on is ready, run cfx xpi and an XPI file of the add-on will be generated for distribution.

If you don't want to run the SDK locally, Mozilla's Add-ons Builder site provides the SDK in a hosted environment.

Here's an example main.js script that illustrates some of the APIs. It matches the URL of a new tab against a pattern, adds a form element to the document, and performs an XMLHTTPRequest when the form is submitted.