Firefox Extension Development
By Michael Ross
This article was published by ComputorEdge, issue #2751, 2009-12-18, as a feature article, in both their PDF edition (on pages 12-15) and their website.
Of all the Web browsers that are challenging the multi-year dominance of Microsoft's Internet Explorer (IE), the one that has the best chance of unseating IE from its throne, is Mozilla Firefox. Like the other alternatives, Firefox continues to eat away at IE's market share. Firefox 3.5, the latest version, has alone been downloaded over 214 million times (as of this writing). Back in April 2009, the browser with the foxy mascot had almost 24% market share — more than double all the other non-IE browsers combined.
According to the Mozilla Awards page, Firefox has garnered no fewer than 38 awards. In contrast, it is difficult to imagine Internet Explorer winning any awards, aside from such hypothetical categories as: The Most Egregious Violator of Web Standards, or perhaps The Biggest Security Headache Since Outlook, or, my favorite, The Ultimate Shortener of Developer's Lives. Fortunately, the latest version, Internet Explorer 8, is apparently much better than its predecessors, and is intended to rectify most of the types of damage it has caused in the past. (If only Microsoft could return to designers and developers everywhere their countless lost hours wrestling with IE's idiosyncrasies.)
Figure 1. Firefox logo
So what is it that makes Mozilla's browser so popular? Fans can provide any number of answers to that question — ranging from ad-blocking to password management. The official feature list is quite impressive. Yet the source for such enthusiasm cited most frequently, is the way that Firefox has been designed so that its functionality can be supplemented with what are known as "extensions", which are small modules that can be plugged into it by the end user. They are a type of add-on, and make it possible for independent programmers to enhance the baseline Firefox with whatever functionality they would like to see in it, or that they suspect other users would find valuable. Because each extension is packaged as a complete and single file (ending with ".xpi"), any non-techie user can benefit from that introduced functionality, with no need for programming knowledge on their part.
Considering how much time people now spend on the Web, it should come as no surprise that there are now thousands of handy Firefox extensions that allow you to: block ads and Flash videos embedded in Web pages; manage multiple Gmail accounts; download and upload files; 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; edit browser cookies; 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; share BitTorrents; and even change the rendering engine to Internet Explorer (which is very useful for Web developers who do not want to start up IE, but still need to check how IE is ruining the styling of Web pages they have crafted).
Roll Your Own
In addition, there are a number of resources focusing entirely on Firefox extension development: A terrific one is the Firefox Extension Development Tutorial, which offers clear explanations and many screenshots. The information is organized into nine sections: overview, environment setup, configuration files, creating GUIs, back-end, preferences, localization, distribution, and security. Note that several of the sections contain links to other valuable reference materials on the Web. This guide is clearly one of the more complete ones out there.
Do not miss the Lifehacker article titled "How to build a Firefox extension", because it contains many links to other tutorials, as well as an important warning regarding the backing up of your Firefox profile before commencing work. Perhaps the best part of the article is its advice on how to begin understanding XUL as quickly as possible.
Programmer Eric Hamiter has written a promising tutorial, "How to create Firefox extensions", whose material is grouped into a dozen sections, covering: an illustrative example; implementing a simple "Hello, world" extension; inside the XPI; re-configuring your extension's installation; Firefox chrome; skin files; packaging an extension using a GUI or using the command line; how to start over if you inadvertently corrupt your Firefox profile; installing your new extension on a local Web server; links to outside resources; and feedback from other readers of the tutorial.
Learn by Example
Getting your head around a new programming language, or a new programming technique, is usually best accomplished by reading the code written by others (provided that the authors of that code are knowledgeable, and have made an effort to write quality code — extensive comments are a bonus!). In that spirit, we will take a brief look at one of the many Firefox extensions already built. Even though space limitations do not permit us to step through the code, we can at least examine the components that make up the extension. That alone can make the prospect of writing your own extension, far less intimidating.
The particular extension that we will use as an example, is Copy URL+, which copies the current page's title and URL into your system clipboard. The version available at https://addons.mozilla.org/en-US/firefox/addon/129 was last updated in November of 2005, and is not compatible with the latest versions of Firefox. However, it can be made to run just fine in 3.0.x, simply by disabling Firefox's add-on compatibility checking. Newer versions can be found on pages linked near the bottom of the author's dedicated page.
This extension was chosen because it is simpler and involves less code than most of them. Yet to the uninitiated, the extension filename itself, "Copy URL+ v1.3.2.xpi", may appear cryptic, especially as there is typically no application in Windows associated with the file extension ".xpi". But we will see how to open up this installation file for inspection. Its file structure is the same as your everyday Zip archive file, so you only need to change the extension from ".xpi" to ".zip", to make it recognizable by your favorite archive management program. (If you have no such favorite, check out 7-Zip, which is free and quite capable.)
When you open up "Copy URL+ v1.3.2.zip", you should find that it contains two installation files (install.js and install.rdf), three text files (CHANGELOG, README, and TODO), and, most important of all, a directory named "chrome", which contains a single file, copyurlplus.jar. This is a Java archive file, and like its parent XPI file, also has a Zip archive structure. So rename it to copyurlplus.zip, and open it with your archive program. When you expand all of the directories, you should see a structure as seen in the screenshot below.
Figure 2. Copy URL+ directory structure
Copyright © 2009 Michael J. Ross. All rights reserved.