Some Tips for Developing Firefox Extensions in Emacs

| Comments

I used addon-sdk to create my simple firefox addon. It makes really easy to create firefox addon by avoiding writing boilerplate code and provides a simple Javascript api for some functionality of Firefox.

Addon-sdk do makes things easier but the workflow is still not as  straightforward as that of developing Chrome extensions. In chrome, we can load unpackaged extensions which are just folders containing a simple HTML app and a manifest.json. In case of Firefox addons, we need to first
  • build a firefox extension from within the folder containing the code with ‘cfx xpi’ (command provided by addon-sdk)
  • then run a Firefox instance with ‘cfx run’
We need to do this every time we make any change in the addon code. Sounds
gross right? It is indeed gross.

To make things simpler, there’s an addon in Firefox marketplace called ’auto-installer’ which allow us to install addons on the fly. This is highly recommended if you are going to develop a firefox addon.
Here’s a great tutorial on Firefox Developers Network for installing and using addon-sdk.
So when developing a new Firefox addon, things should go in a flow similar to this.

Install Auto-installer addon in Firefox

This addon allow pushing the addon we are developing to Firefox on the fly, without the need to do something like ‘cfx run’ over and over again.
  • It need us to build the addon (cfx xpi), and send it inside a HTTP POST request to localhost:8888
  • It then reinstall the addon on the running Firefox instance
  • It identifies the addon by its ‘id’ we define in ‘package.json’ file. So if we change the ‘id’ there, a new copy of our addon will get installed along with previously installed file.
This make things specially easy with Emacs, see next point.

How to use

  • Install auto-installer on a Firefox instance (may be with a different profile than your default profile (firefox -ProfileManager))
  • Build the addon
    cfx xpi
  • Post it to localhost:8888. e.g with
    wget –post-file=myAddon.xpi http://localhost:8888/
  • Done
In the article on Firefox developers hub, they suggest following command which I found not very good.
while true ; do cfx xpi ; wget –post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done
Above command builds a Firefox xpi addon from our source code every 5 seconds, and push it to the Firefox instance. It’s annoying in its own right.

Install ’compile-bookmarks’ in Emacs

This package allow keeping ‘compile’ commands like bookmarks, and executing them with keyboard shortcuts. It’s more useful than one might think at first. I do all sort of tasks as compile-commands in Emacs like running unit-tests.

Create a bookmark with a compile command like following:
/path/to/firefox-addon-sdk/bin/cfx xpi && wget –post-file=myAddon.xpi http://localhost:8888/
When we provide complete path of the ‘cfx’ command, we don’t need to activate the ‘virtualenv’.

You can do this by
  • run ‘compile’ function (M-x compile)
  • execute above mentioned command from mini-buffer
  • Select ‘add’ from ‘compile’ menu. The command you used previously for compiling will appear there, select it
  • It will then prompt in mini-buffer for a key to use for compiling with above command
  • Choose whichever seem right to you. I have chosen ‘f’ for this.
You can now run build and install your extension in firefox with keys ‘C-` f’.

This was the workflow I came up with developing my one firefox addon. I would love to hear how experts do things. If you have time, please tell in comments your way of doing things.