Firefox Toolbar Tutorial
This tutorial explains how to create a toolbar extension for Firefox. It provides an overview of how extensions are developed, the tools required to create them, 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, though some basic programming knowledge is required. There are three basic areas 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).
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
