How I (quickly) write Firefox Extensions

Over the last 2 or so years I've written a lot of add-ons and in particular a lot of very very simple add-ons that are either quick examples to show someone how to do something, or to try to reproduce a bug in Firefox or the SDK. And because I'm lazy, I've automated a lot of the tedious parts of this. Here's how I do it.

Disclaimer

I use OS X and a lot of this assumes having a reasonable UNIX shell environment. If you're on Windows and don't have bash, some parts of this will not work for you. Thankfully, node.js 'jus works' everywhere.

Initial setup

  • you need to install the Add-on SDK, the instructions are over here. In particular you need to make sure that the bin/cfx script is on your $PATH environment variable.
  • in Firefox, install Wladimir Palant's excellent Extension Auto-installer extension. This extension allows you to reload newer builds of your extension into Firefox without having to re-start.

Creating a skeletal add-on

The cfx tool does this already, but it creates a skeletal add-onwith example code and I almost never want that. So I use this quick shell script called jpinit:

#!/bin/bash
_PWD=`pwd`
mkdir -p "$_PWD/$1" && cd "$_PWD/$1" && cfx init
echo "" > lib/main.js && echo "" > doc/main.md && echo "" > test/test-main.js && echo "" > ./README.md

Put this on your path too, I tend to put scripts like this in $HOME/usr/local/bin or similar.

Loading & re-loading the extension

Once I've got a blank project going, I get to the fun part of actually implementing features. Whenenver I want to test my code, all I need to do is run this scipt and it will build and install my add-on in Firefox:

https://gist.github.com/canuckistani/9301061

Under the hood it's just using node's child_process module to first run cfx xpi, then wget to upload the xpi file to Firefox.

How does this even work? That's the magic of the 'Extension Auto-Installer' extension, how it works is it runs a local web server inside Firefox that listens on a port for xpi file uploads. If it gets an xpi file, it tries to install or reload it.

Editor Support

I primarily use Sublime Text. The slightly tricky thing about using ST for add-on development is that internal Firefox and add-on code is able to use more advanced JS features. To convince ST that things like the let and yield keywords are okay, you need to do the following:

  • install Brandon Benvie's JavaScriptNext package, and use it with JS files by going to 'View / Syntax / 'Open all with current extension as...' and selecting 'JavaScritpNext - ES6 Syntax'.
  • install a linter, I use SublimeLinter. I use it in jshint mode, with jshint installed and this .jshintrc file

Here's a quick screencast to show you how quickly this can get you hacking:

When you consider how time-consuming this has been in the past, I'm pretty happy with it, in particular if I just need to hack on something to answer a question on Stack Overflow or from IRC. The time consuming part becomes writing code, and that's the way it should be.

I do expect this all to change soon; the Jetpack team has been working on some new features that will provide everyone with an even more streamlined process without the need for extra extensions or shell scripts, as well as an advanced debugger specifically for add-ons. For a glimpse of just how awesome you really need to check out Erik's post from last week.

Jeff Griffiths

Author

Jeff Griffiths

Open Web hacker and Product Manager at Mozilla.