Firefox Toolbar Tutorial
This tutorial explains how to create a toolbar extension for the Firefox web browser (specifically for version 1.5 and later). It provides an overview of how extensions are developed, the tools required to create an extension, and details on how toolbars are created. Please note that this tutorial is lengthy; I recommend spending time with it over the course of a few days (it makes for a good weekend read).
Extension development isn’t difficult, although some basic programming knowledge is required. There are three basic areas I recommend that you should be somewhat familiar with: XML, JavaScript, and CSS. None of these topics are difficult to pick up, and there are a number of excellent tutorials on each around the web (I will highlight some as we continue).
Firefox 1.5 greatly improved the extension development experience (i.e. creating an extension is now much easier than in previous Firefox releases). This tutorial takes advantage of these improvements; where necessary, I will indicate how things have changed. Many of these new techniques are not backwards compatible with Firefox 1.0.x.
Table of Contents
Chapter 1: Getting Started
- Before We Start
- Tools You Will Need
- File Structure Layout
Chapter 2: Creating the Framework
- Installer Manifest
- Chrome Manifest
Chapter 3: Structuring the Toolbar
- The Toolbox and Toolbar
- Toolbar Buttons
- Drop Down Edit Box
- Resizing Gripper
Chapter 4: Dynamic Development
- A Word of Warning
- How to Develop Dynamically
- The Development Process
Chapter 5: Skinning the Toolbar
- Updating the File Structure
- Updating the Chrome Manifest
- Creating the Image Files
- Applying the Images with CSS
- Using the Style Sheet
Chapter 6: Scripting the Toolbar
- Tying XUL to JavaScript
- Adding Functionality to the Buttons
- Adding Functionality to the Search Box
- Dynamically Populating a Menu
- Dynamically Adding Toolbar Buttons
- Disabling and Enabling Buttons
- Dynamically Showing and Hiding Buttons
- Reading and Storing User Preferences
Chapter 7: Packaging the Toolbar
- Updating the Chrome Manifest
- Creating the JAR File
- Creating the XPI File
- Test Installing Your Extension
- Speeding Up the Packaging Process
- Ant Support
Chapter 8: Testing Our Extension
- What to Do if Firefox Breaks
- Useful Browser Settings
- Logging to the JavaScript Console
- Logging to the Standard Console
- The DOM Inspector
