Setting up a Firefox extension development environment

I have a Firefox extension called Procrastato. It reminds you to get back to work when you’re mindlessly surfing the web. Procrastato is a very simple add-on but I’ve found that getting started in developing Firefox add-ons isn’t so simple.

Although I’ve just dipped my feet into the world of XUL and Firefox Extension development I thought I would share what I’ve been using to get up and running.

First things first – take a look at the Building an Extension page at Mozilla.org. Make sure you at least read through that page before getting started. It can be a little disappointing to see how much you need to have in place in order to do a simple “hello world” test extension, but it’s worth getting an overall picture before jumping in.

Also, before getting to “hello world,” there are a couple of extensions that are useful for developing extensions:

The Firebug extension is great for extension development and web development in general.
There is an Extension Developers Extension you can try as well.

If you’ve used Eclipse for Java or PHP development you’ll probably want to use it for extension development with the XulBooster plugin. XulBooster is useful for two reasons:

It helps with housekeeping chores like setting up your install.rdf and chrome.manifest and exporting a .xpi package.
It give you some code coloring and syntax highlighting for those .xul files.

Now you should be ready to go.

A couple of notes:XulBooster will automatically include an empty <em:updateURL/> element in your install.rdf. If you don’t have a secure URL for updates (starting with https://), you might get this warning from addons.mozilla.org when you try to upload your new version: