Chapter 1: Getting Started
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. Two files are available:
- Example Toolbar XPI: This is the installable version of the toolbar we will create.
- Example Toolbar Source Code: A convenient zip file containing all of the source files used to create the above 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 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. Below are links to a few short tutorials on 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. 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 Notepad++, Crimson Editor, 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 (WinZip, 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 structure, so we need to make sure that we get this step right. Otherwise, things will not work the way they should. 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/