How to build a firefox extension

Set up your development environment

First things first: you're going to develop a Firefox extension? At
some unfortunate moment, you're going to completely hose your Firefox
profile. This isn't a possibility, it's a guarantee. So do yourself a
favor, and create a fresh Firefox profile that you use exclusively for
development. Here's how to create and manage
multiple Firefox profiles. I enjoy having my default profile running
for quick code reference lookups, and launching my "dev" profile
simultaneously using the -no-remote switch detailed in that article.

Once you've loaded up your fresh, clean dev profile, you'll want to make a few about:config tweaks and install a couple of development extensions to make your life easier.

Hello, Firefox extension world!

Back in December of 2004, during some mindless web surfing, I stumbled upon Eric Hamiter's excellent How to create Firefox extensions
tutorial and it was the single link that got me started down the road
to extension development. The tutorial is a bit dated (especially since
Firefox 2), but it's a nice complement to Mozilla Developer Center's
official Building an Extension document.

Following the instructions - which involve a lot of placing specific
XML and Javascript files in specific folders and zipping them up just
the right way - you can build a simple extension that pops up a "Hello,
world!" Javascript alert. Do it - every programmer starts a new
language by saying hello to the world.

For extra Hello World help, see MozillaZine's Getting Started with Extension Development. A slew of other extension development tutorials are available here.

The Extension Wizard

Once you get into the extension development groove, you'll quickly
tire of creating all those weirdly-named folders and files. That's
where Ted Mielczarek's Extension wizard
comes in handy. You give it your extension's information: ID, icon,
license, author and other information and it'll generate an extension
folder and file skeleton for you.

The Greasemonkey Compiler

Another wizardly extension-helper is the previously-posted Greasemonkey user script compiler. A Greasemonkey script is just Javascript; and this compiler turns that script into a full-fledged extension. (Note: The Better Gmail extension and all its younger siblings released here on Lifehacker started out using this compiler.)

WTF, XUL?

One of the steep learning curves of extension development is getting
your head around XUL, and how it creates elements like menu items and
dialog boxes in Firefox. Think of it this way: XUL creates Firefox
interfaces like HTML creates web pages. (But being XML, XUL has a lot
stricter rules about what tags are allowed.)

For example, a simple XUL-based window with radio buttons for apples, oranges and cherries looks like this in XUL:

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<radiogroup>

<radio label="apples" />

<radio label="oranges" />

<radio label="cherries" />

</radiogroup>

</window>

To start experimenting with XUL, install the Extension Developer's extension
in your development profile. From the Tools menu, Extension Developer
submenu, choose "XUL editor" to start composing XUL documents that
preview live as you type, as shown:

Finally, the complete reference and mother lode of XUL tutorials is available at XUL Planet.

Automate your extension builds

Once your extension is working and ready in your development Firefox
profile, you want to zip it up and try it out in your "real" Firefox
install. Doing this manually is an exhausting pain in the buttocks, so
do yourself a favor and employ a batch script to reduce the process to
a single command operation. I use a modified version of this Windows build script to package up my extensions.

Like all good things in life, Firefox extension development takes a
serious investment, but the reward - making your web browser do exactly
what you want it to - is huge.

You ready to give extension dev a try? Let us know how it goes in the comments.

Powered by ScribeFire.