Good resources for learning to develop Firefox Extensions

Question

I am looking for good resources to learn to develop Firefox extensions. Resources can be either books or tutorials on the net. Prefer basic tutorials as I am a newbie in the world of Firefox extensions but I have experience in Software Development so programming is not an issue.

Answer 1

This is a useful folder structure to get you started:

• chrome (folder)
  • content (folder)
  • chrome.manifest
• defaults (folder)
  • preferences (folder)
  • install.rdf
• locale (folder)
  • en-US (folder)
• skin (folder)

You start with the install.rdf file, which contains all the information about your extension (e.g. its name, your name, the version of Firefox it supports...)

Then work on the chrome.manifest file, which looks a little trickier, but is quite simple really.

THEN you get to start doing the interesting stuff! You can mess around with browser.xul, options.xul, etc etc. Plonk your css/images in the skin folder, and I expect you'll need to make a custom Javascript file which contains your extension logic (this goes in the chrome/content folder).

Finally packaging it is just a case of zipping the entire thing (not the folder containing your extension folders, just the folders themselves), and renaming it from .zip to .xpi - job done :)

There's an excellent step-by-step guide on the Mozilla Blog here, which goes into some real detail.

You can also find another example project here.

p.s. don't forget source control, bug tracking, internationalisation, etc etc. But don't start with that or you'll never have any fun :)

Answer 2

A great way to learn is

1. Right Click on the Add to Firefox link on the Add On download page.
2. Save the file.
3. Change its extension .xpi to .zip
4. Extract and hack the code.

Start with some simple Add-On.
Example : Hello World Firefox Add On

I learn it from HERE. Other Good Resources:

1. Zero to “Hello World” in 45 Minutes
2. For some advanced stuff look at the code of TwitterFox