Before We Start
Throughout the course of this tutorial, we will create a simple search toolbar similar to Googlebar Lite. To aid in the learning process, a working version of this toolbar is available for you to download.
- Example Toolbar XPI: The installable version of the toolbar we will create
- Browse the Source Code: A browsable source code repository hosted at GitHub
- Download the Source Code: A convenient zip file containing all of the source files used to create the toolbar
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 zip file is provided for the sake of convenience.
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.
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. 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 Sublime Text, Notepad++ and TextPad.
The second tool you need is a zip-file utility. I personally use the zip tool that comes as a part of Cygwin, but there are plenty of others available (7-Zip, WinRAR, etc.). 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 file structure, so we need to make sure that we get this step right. First, create a top-level folder with the name of our extension. For this tutorial, we will use the name TutToolbar (avoid using spaces in your folder and file names). 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 our resulting directory structure:
TutToolbar/ |-- chrome/ |-- content/