Overview, Firefox Extension Development Tutorial
Tutorial Index
- Extend Firefox!
- Development Overview
- Environment Setup
- Configuration Files
- Creating GUIs
- The Backend
- Preferences
- Localization
- Distribution
- Security
- Slides
On This Page
Development Overview
This tutorial has been created for individuals wanting to develop full-featured extensions for the Mozilla Firefox browser. The tutorial has been constructed as a step-by-step guide providing many examples, explanations, and external references to help the reader have a full understanding of extension development.
Please use the menu on the left to navigate through this tutorial. Each section has been dedicated to a certain stage of the development process. It is recommended that you read through the tutorial in order, as some information builds upon previous sections.
The following major topics are covered in this tutorial:
- Packaging and Distributing Extensions
- Creating and Modifying User Interfaces
- Firefox Integration (API basics)
- Creating User Preferences to store information
- Creating User Preferences Pane (for the Options window)
Extension Overview
The authors of this tutorial were in your shoes just a few weeks ago: knowing absolutely nothing about developing Firefox extensions. Through hours of research, however, we have developed our own extension that will be used throughout this tutorial to provide you with examples.
The demonstration extension is named ‘Home Page Scheduler’ and provides the user with the ability to easily schedule specific websites to be their Home Page depending on the current time and day. For example, you may prefer for your home page to be weather.com between 8am-10am, cnn.com between 10am-2pm, slashdot.org between 2pm-5pm, and google.com in the evening.
The extension has been developed with many features so that we are able to use it as a full example in this tutorial (some of these features are not necessary for this specific extension, but that is ok).
Please click here to install the Home Page Scheduler Extension. Or, for the source, click here for the zip file containing the extension files.
This screenshot of the Home Page Scheduler extension shows the preferences window that allows users to schedule new home pages.
This second screenshot shows the preference screen when the user is creating a new schedule.
Useful Tools
Now is a good time to introduce you to some built-in tools that may help you in the near future. The first one is viewing the user preferences currently being used in the Firefox instance. To do this, simply type 'about:config' in the location bar of Firefox. You will see a listing of all the preferences currently stored, along with their values. Double click these items to modify the value.
Another useful tool is the DOM Inspector. This can be found in the Tools menu of your Firefox installation. Spending a few minutes familiarizing yourself with this utility may save you some time in the future!
Further Reading
- about:config: http://kb.mozillazine.org/Firefox_:_FAQs_:_About:config_Entries
- DOM Inspector: http://www.mozilla.org/projects/inspector/