How to build a Firefox extension

Ever since we started releasing home-brewed Firefox extensions here at Lifehacker, several readers have asked: How difficult is it to build a Firefox extension? For someone with a bit of programming experience, the answer is not that difficult.

The meat of a Firefox extension is simply Javascript - the not-very-mysterious stuff of bookmarklets and regular old web pages - and a markup language called XUL (pronounced "zool.") To build your own, you'll need some Javascript know-how, comfort editing XML files, and a healthy curiosity about bending your favorite web browser to your will.

I started teaching myself how to build Firefox extensions using free tutorials on the web over two years ago. While whole books have been written about creating Firefox extensions, today I've got a quick start list of resources for the curious programmers out there who want to give it a try.

Warning and disclaimer: This post isn't our usual Lifehacker fare - it's a programming tutorial intended for actual hackers, not just lifehackers, who want to get their feet wet in Firefox development. We'll get back to how-to's applicable to regular humans right after this.

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 officialBuilding 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:

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.