Born Geek

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.

Table of Contents

Chapter 1: Getting Started

  • Before We Start
  • Tools You Will Need
  • File Structure Layout

Chapter 2: Creating the Framework

  • Install 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
  • Useful Browser Settings
  • 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
  • Structuring Our 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

  • No More JARs
  • Creating the XPI File
  • Test Installing Your Extension
  • Speeding Up the Packaging Process

Chapter 8: Testing Our Extension

  • What to Do if Firefox Breaks
  • Logging to the JavaScript Console
  • Logging to the Standard Console
  • The DOM Inspector
  • The End