Search This Blog

Saturday, November 21, 2009

FirefoxExtension, Easy Introduction And Concept

The basic of writing Firefox extension is really easy. It is nothing more than using javascript and css to play with the XUL (just think of it as stuff very similar to html). However, to make the development "transparent" so that Firefox can "see" your javascript/css/XUL, you first need to configure the extension directory. Here is the big picture:
  1. Tell the Firefox extension manager where your extension code is. To do this, you need a text file which contains the path to your development folder. e.g. In *nix, your firefox extension folder will be /usr/account_name/.mozilla/firefox/your_profile_folder/extensions/ You need a file there, and inside the file you have a path pointing to your extension code (i.e. your development folder). The extension manager will scan the firefox extension folder and load your stuff in the development folder. (make sure the id is unique in the install.rdf file, and the min/max version match your firefox environment, e.g. >firefox3.5)
  2. In your development folder, write your UI (.xul in the content folder), add behavior with javascript (.js in the content folder), style with css (.css in the skin folder), and translation string (.dtd in the locale folder). Follow the default folder structure of firefox extension. This step is call chrome extension UI programming. First of all, you might need to define your overlay.xul. The purpose of overlay is to extend (add) UI to the current firefox. (put your gui on top of firefox gui, and hence called "overlay").
  3. During development, consider using separate profile, and turn on the debug/logging option inside firefox.
You can download the sample development folder. This extension puts a helloworld option under menu bar of "Tools." Tell your firefox manager where the development folder is (step1), and you can play with the sample extension.

Practice makes perfect. Read through this example several times.

At last, you will need the Reference API (how to create a button etc...)

No comments: