Developing a Firefox Extension That People Actually Use: 32 Essential Tools and Tutorials

Updated: July 23, 2007

The Background: JavaScript & XUL (XML User-interface language)

If you've listened to other developers talk, you'd think that developing a Firefox extension required expertise in half a dozen technologies. The truth is, however, that to build many types of extensions, all you need to know is JavaScript, along with some familiarity with Mozilla's interface language, XUL.

JavaScript Education Resources:

1. Mozilla Developer Center - JavaScript

2. W3 Sschool's JavaScript tutorial for beginners

XUL Education Resources:

3. Mozilla XUL home page

4. XULPlanet: A library of information, tutorials and downloads.

5. Mozilla Developer Center - XUL: Overview, tutorials, references and a template guide.

Getting Started in Development

Now that you've learned the basics of JavaScript and XUL, you can get started developing. As you do, you'll want to keep the following resources handy, as they can be essential when creating a FireFox extension.

6. Mozilla's Extension Development Center: The official development site, which is the first place to look when you get stuck. Contains information on everything from coding to packaging and distributing.

7. Setting Up Extension Development Environment: Mozilla's suggestion and instruction resource for how to set up your Mozilla application for extension development.

8. How to Build an Extension: Mozilla's official page for extension development.

Getting Your White Belt: 'Hello World'

The first thing everyone learns to program in a new language/environment is the 'Hello World' example. Once you're able to create a 'Hello World' Firefox extension, taking the next step towards something innovative is much easier.

To help you write your own 'Hello World,' these four tutorials will give you step-by-step instructions.

9. Roachfiend.com's How to Create Firefox Extensions: Covers the XUL, JavaScript and creating an installer package, which combined are all the elements necessary for a working extension.

10. MozillaZine's Getting Started with Firefox Extensions: A crash course in extension development that also touches on planning issues.

11. Mozilla's Creating a Mozilla Extension: A walk-through of how to create a Mozilla extension that adds an icon to Mozilla's status bar and taps into Tinderbox to make sure your users have the most up-to-date version.

12. Born Geek's Firefox Toolbar Tutorial: A lengthy run-down of how to create a toolbar extension for versions 1.5 and later.

Power Tools

Every developer knows the true meaning of the phrase, 'time is money.' So when development shortcuts are available, you'll want to put them to good use. These resources can help you work more efficiently by speeding up the Firefox-extension development process.

13. Greasemonkey Script Compiler: Turn standard JavaScript into Firefox extensions.

14. Greasemonkey: Allows users to install scripts that make on-the-fly changes to specific Web pages.

15. Extension Wizard: Generates your extension skeleton, which saves the time you'd normally spend copy and pasting from your previous or sample extensions.

16. Extension Developers' Extension: A number of minitools that streamline the development process. Included in the extension are real-time XUL and JavaScript editors, along with other time-saving add-ons.

17. Console Squared: When debugging and optimizing code, nothing is more frustrating or time-wasting than receiving strange error messages. Console Squared replaces the JavaScript console with one that generates more complete error messages.

18. DOM Inspector: A tool used to efficiently inspect, browse, and edit the Document Object Model and user interaction / XUL.

19. Venkman: Mozilla's powerful JavaScript debugger.

Code Libraries

A developer that is constantly trying to reinvent the wheel is going to find that he or she is constantly missing deadlines and missing out on new ideas. Rather than creating all your code from scratch, there are a number of good FireFox extension code libraries available.

20. MozillaZine's Example Code: A library of commonly used XUL and JavaScript codes for use in Firefox extensions.

21. Mozilla's Code Snippets : A quick list of useful code snippets for extension developers.

Forums / Communities

If the rise of open-source development has taught developers anything, it is that they can learn a lot from one another. That is no less true with Firefox extensions, and as a consequence, developer communities and forums are an invaluable resource.

22. MozillaZine Mozilla Development Forums: An active question-and-answer forum with hundreds of threads.

23. Mozilla Development Newsgroup and Mailing List: Public mailing lists and newsgroups hosted at Mozilla.org along with free access to the Mozilla Usenet hierarchy.

24. XUL Planet Forum: The place to talk about XUL.

25. Babelzilla: A community for developers and translators of Mozilla extensions.

Don't Be a Loser Extension

Extensions are just like any other application in that most hardly get used (in which case there's no point in developing one). To better ensure that your extension actually gets used, its first important to learn which Firefox add-ons already exist and which are popular. Armed with that information, you'll be in a better position to make your own extension better (and make sure that your idea good and original).

26. eConsultant: A list of 200-plus useful Firefox extensions sorted by purpose. Use this to check out your competition.

27. CNET's Firefox Extension User Reviews: CNET reviews of a number of Firefox extensions, along with potentially more valuable user ratings and comments. This information can give you a rough overview of what Firefox extensions users like and dislike.

28. 10 Useful Firefox Extensions That Don't Get Glamorized: A collection of 10 less-popular extensions. Look for common themes among these to determine why they haven't become as popular as alternatives.

29. Top Useful Firefox Extensions: A list of top Firefox extensions. It is useful to read these lists analytically, because they reveal what one more potential audience member likes or finds worthwhile.

30. Extension Ideas: If you don't have a good idea for where there is a need for a new extension, the AllYourIdeas wiki page can be a good source of inspiration.

31. Top 10 Firefox Super Extensions: Brief reviews of more complex Firefox extensions, so that you can get a better feel for what people like if you are considering an application-replacement type of extension.

32. Top 10 Firefox Web 2.0 Add-ons: A top 10 collection from Read/Write Web.