Setting up a development environment for Firefox Extensions.

This is the method I use to create simple firefox extensions. This tutorial is a precursor to the next one which is about using Web Workers (i.e. allowing code to run on background threads).

Setting up the environment

We’re going to need the Firefox Addon SDK. This is a collection of python files that will let you run a test (optionally blank) version of Firefox. To download it:

Now extract it and remove the tarball:

Go to the directory and startup the special shell:

Now you can see that the shell has prepended (addon-sdk-1.17) in brackets to the prompt. This means that the window is probably half filled with text so we can reduce that with the command:

Much cleaner! ūüôā

Setting up the extension template

Now that we have this special addon-sdk shell, navigate back to your documents and create a new folder for our extension.

This special shell has various useful commands included, which all look like  cfx xyz . For more about them see here. In this case we use  cfx init

Let’s inspect what was created:

  • ¬†lib¬†¬†contains a file called main.js¬†¬†which is the main handler file for all extension code
  • data¬†¬†is empty but can be used to store things like workers (which we will come to later) or large data files
  • test¬†¬†can contain unit tests (quite hard to set up but useful for test driven development later)
  • package.json¬†¬†contains metadata about the extension – version number, name of the creator, description, licensing etc

You can start writing code in main.js and it will run in the browser. Once finished, use  cfx run to test it!

See the next tutorial on how to write a firefox extension using web workers!

One thought on “Setting up a development environment for Firefox Extensions.

  1. Pingback: Using Web Workers in Firefox Extensions | ikigomu

Leave a Reply