Firefox Extension Development Resources

Even "out of the box", Mozilla Firefox is, on balance, a better Web browser than Microsoft's Internet Explorer. But that is certainly not the end of it. Like so many other open source projects, Firefox has been designed so that its functionality can be supplemented with "extensions" — small modules that can be plugged into it. This allows independent developers to extend the product with whatever functionality they would like to see in it, and it also allows end users to benefit from that new functionality, with no need for programming knowledge on their part.

There are many hundreds, if not thousands, of useful Firefox extensions that allow you to: block ads and Flash movies embedded in Web pages; change the styling of a page; add entries to your blog without having to navigate to the site; communicate using VoIP, SMS, and instant messaging; manage multiple Gmail accounts; download and upload files; edit browser cookies; restore your browser sessions; customize the Firefox menus; manage tabs; control your multimedia player without leaving the browser; instantly look up dictionary and Wikipedia entries for words; read RSS news feeds; check for viruses and spoofed sites; manage Digg actions; share BitTorrents; and even change the rendering engine to Internet Explorer (which is very handy for Web developers who do not want to start up IE, but still need to check how IE would mess up the styling of pages they have created).

The above list merely gives one an idea of the impressive variety and usefulness of the existing Firefox extensions, which are growing in number every day. Furthermore, with the addition of another extension, Greasemonkey, you can have virtually complete control over the appearance and functioning of any Web page that you visit. Imagine being able to customize your favorite websites to look and behave exactly the way you want, without any of the annoyances that you have put up with in the past.

Despite the breadth of the available extensions, it is quite possible that you have some functionality in mind that you would like to see in Firefox, but no such extension currently exists. Why not create your own? If you have some knowledge of JavaScript and XUL (pronounced "zool"), or you are willing to gain that new knowledge, then you certainly can author your own extension, and then share it with the world. While the online resources for learning XUL may be much harder to find than those for JavaScript, they are certainly out there. You should also be familiar with XML and CSS, but you probably already are if you are willing to tackle JavaScript and XUL. Also valuable are the resources devoted entirely to Firefox extension development, discussed below.

Timely Tutorials

An excellent resource is the Firefox Extension Development Tutorial, which features clear explanations and many screenshots, with the information divided into nine sections: overview, environment setup, configuration files, creating GUIs, back-end, preferences, localization, distribution, and security. Some of the sections have links to other worthwhile reference materials on the Web. This is one of the more complete guides available.

PC Magazine offers a step-by-step tutorial, "Make Your Own Firefox Extensions", supplemented with screenshots, which together show how to take an existing simple extension (which searches Wikipedia for any text you have selected) and create your own based upon it. The discussion focuses on how to test and package your extension for release, but does not cover any details of the JavaScript and XUL programming you will need to do in order to add your own functionality. One flaw is that the tutorial does not contain much text, and yet PC Magazine manages to spread it over three Web pages, to force readers to see the unwieldly navigation elements that consume most of those pages, plus the advertisements.

Far less annoying is Lifehacker's article "How to build a Firefox extension", which is loaded with links to other tutorials, and contains a valuable warning concerning the backing up of your Firefox profile(s). The highlight of the article is some advice on how to get your head wrapped around XUL with the least amount of anguish.

One of the resources that it points to is Eric Hamiter's very readable tutorial "How to create Firefox extensions", which is organized into a dozen sections: an illustrative example; implementing a simple "Hello, world!" extension; inside the XPI; re-configuring your extension's installation; Firefox chrome; skin files (and no, they have nothing to do with pornography); packaging an extension using a GUI or using the command line; how to start over if you inadvertently corrupte your Firefox profile; installing your new extension on a local Web server; links to outside resources; and feedback from other readers of the article. Even though it was published in December 2004, the bulk of the information should still be applicable, or at least point you in the right direction. The article has screenshots and sample code. A later article by the same author explains how to enable extension updates.

Born Geek offers a "Firefox Toolbar Tutorial" that focuses on how to create a toolbar extension, but contains useful information on extension development in general. The material is somewhat dated, but is quite extensive and certainly worth reading.

Going to the Source

Mozilla, the parent company of Firefox as well as the outstanding email client Thunderbird, provides to developers a number of online resources worth investigating. Perhaps the best starting point would be the home page of their extension development documentation, which is organized into half a dozen sections, most of which have a number of links to other resources, including tutorials outside of their website. The first two internal resources to consult would be the article on setting up an extension development environment and getting started. Also check out their sample code section.

The Mozilla site also has a section on extensions, which offers more general information on Firefox extensions and their development, including information on setting up your environment, an FAQ, links to code snippets, installing extensions, upgrading them, and more. They have a section on XUL. What is not immediately clear is how much of the information in their Developer Center, if any, duplicates what is found in the Knowledge Base section mentioned in the above paragraph.

Sharing information with other developers is the best way to get your tough programming questions answered, and also hone your knowledge by trying to answer other people's questions. The Mozilla site provides an extension development forum, where you can get support from fellow extension builders, and read the answers provided in response to other people's questions. Most encouraging is the fact that almost none of the post questions have received no replies. (The health and usefulness of technical forums can be quickly judged by the ratio of posts that have received one or more replies.)

Odds and Ends

Even though there are countless articles and entire websites that explain the fundamentals of JavaScript, Mozilla has their own JavaScript section, which offers over half a dozen links to quality JavaScript resources, including a complete reference, the Mozilla coding guidelines, features added to JavaScript versions 1.6 through 1.8, and other information of interest to the budding JavaScript developer. The site also has a JavaScript style guide.

Last and certainly not least, the Firefox/Thunderbird Extension Wizard is a free online tool that greatly eases the process of packaging up a new Firefox or Thunderbird extension, for distribution to others.

The aforementioned resources should be valuable to you should you choose to develop your own Firefox extension. Doing so will undoubtedly require some time and effort, but it could be quite rewarding. Also, you end up with an extension that does exactly what you want. After all, in some cases, to get a job done right, you have to do it yourself.