Chapter 1: Getting Started

Before We Start

There are a number of highly useful items that you need to be aware of before we begin making our first Firefox toolbar extension.

Tutorial Downloads

Throughout the course of this tutorial, we will be creating a skeleton version of Googlebar Lite. To aid in the learning process, a working version of this toolbar is available for you to download. There are two files available:

Note that the XPI file also contains the source code (as we will learn a little later), so you technically only need to download that one file. The second file is provided for the sake of convenience.

Useful References

I highly recommend that you bookmark the following sites. They were incredibly helpful to me as I learned about extension development, and I am sure that you will find them helpful as well.

Learning the Prerequisites

As I previously mentioned, extension development in Firefox requires that you know a little about XML, JavaScript, and CSS. Each of these topics are fairly easy to pick up on your own. I have provided here a few tutorials covering each of these topics.

Tools You Will Need

Several software tools are required to create a Firefox extension, and all of them are freely available. Every file that we work with (except for images) will be a plain text file. As such, you will need a good text editor. I recommend against using a word processor like Microsoft Word. There are a number of excellent “programmer” text editors available for free on the web, which will help you out tremendously with features like automatic indentation, syntax highlighting, and more. Several popular editors include Crimson Editor, TextPad, and JCreator.

The second tool you need is a zip-file utility. I personally use WinZip, although there are plenty of others available (7-Zip, WinRAR, etc.). We will make use of our zip tool when packaging our extension. If you plan on doing a lot of extension development, I recommend you find a zip-file tool that has a command line interface. Using the command line will allow you to easily automate the packaging process, which will save you a tremendous amount of time.

File Structure Layout

Firefox extensions require a specific internal structure, so we need to make sure that we get this step right. Otherwise, things will not work the way they should. First, let us create a top-level folder with the name of our extension. For this tutorial, we will use the name TutToolbar (let’s avoid using spaces in the name). Inside of this newly created folder, we need to create a second folder. This one should be named chrome (using all lowercase letters). Since we are having so much fun creating folders, let’s create a third one, this time inside of the chrome folder we just created. Name this one content (again, using all lowercase letters). Here is how our directory structure looks at this point in time:

+- TutToolbar/
   +- chrome/
      +- content/
Previous Chapter |