firefox extension

Download firefox extension

Post on 16-Apr-2015

38 views

Category:

Documents

6 download

Embed Size (px)

DESCRIPTION

FIREFOX EXTENSION

TRANSCRIPT

How to develop a Firefox extension | Mozilla Add-ons Blog

http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

Jan 28 2009 Reposted with permission from Robert Nyman: Admit that you have always wanted to know how to develop a Firefox extension but never had the time to learn. extension! Here I will walk you through and at the end of the article we will have created a fully functional Firefox

We will create a Firefox extension to find all links in the current web page, highlight those which have a target attribute and alert you how many links it found. The good part is that once you have done this, you have both an understanding of Firefox extension development as well as a blueprint for any extension you would want to develop in the future.

First, lets start with setting up your development environment. You need Firefox (duh) and basically whatever code editor you prefer. Then, there are some recommended things to do to prepare Firefox:

The first step is to create a different profile in Firefox, since you will do some settings and changes that you probably dont want for your regular

1 of 31

5/11/2011 12:38

How to develop a Firefox extension | Mozilla Add-ons Blog

http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

profile. In my case, Ive created a new development profile named dev. The steps to do this are:

Open the Windows Start menu and choose the Run option (on Vista, it might not be there just press Windows key + R in that case). In the run dialog, write firefox -P and press enter/click OK. Choose Create Profile in the dialog and follow the steps.

Open the Terminal (located under /Applications/Utilities) and type in /Applications/Firefox.app/Contents/MacOS/firefox -profilemanager. Choose Create Profile in the dialog and follow the steps.

Open a terminal, use CD to navigate to your Firefox directory and then enter ./firefox -profilemanager. Choose Create Profile in the dialog and follow the steps.

Open Firefox through the Profile Manager (process described above, or set the development profile as default during extension development). Then enter about:config in the address bar. It will warn you about changing settings, but its ok since what you will do is only minor changes for development. You can filter the existing settings, and if any of the below settings dont exist, you can just create them.

2 of 31

5/11/2011 12:38

How to develop a Firefox extension | Mozilla Add-ons Blog

http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

These are good to enable extension errors in the Firefox Error Console (Tools > Error Console), disable XUL caching and such. javascript.options.showInConsole = true nglayout.debug.disable_xul_cache = true browser.dom.window.dump.enabled = true

These arent necessary, but they might help you out. Personally, I dont use these. javascript.options.strict = true extensions.logging.enabled = true

Instead of constantly preparing and reinstalling your extension, theres a simple way to add a pointer from your Firefox extensions directory to your code location. To do this, you must first find your profile directory:

The profile directory is where you will find all the settings for your Firefox profiles, including extension information.

In Windows 2000 and XP, open Explorer and go to C:\Documents and

3 of 31

5/11/2011 12:38

How to develop a Firefox extension | Mozilla Add-ons Blog

http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

Settings\[your user name]\Application Data\Mozilla \Firefox\Profiles and in Vista, go to C:\Users\[your user name]\AppData\Roaming.

Open the Terminal and type in CD ~/Library/Application\ Support/Firefox/profiles/. There you will find your Firefox profiles, and they will be named with letters and numbers, followed by a dot (.) and then your profile name, e.g. 12a3bc4d.dev.

Open a terminal and type in CD ~/.mozilla/. In that location, you will find all your Firefox profiles, and they will be named with letters and numbers, followed by a dot (.) and then your profile name, e.g. 12a3bc4d.dev.

In your development profile folder, you will find a folder named extensions. In it, you will have code for all your installed extensions. Instead of placing your code there, you can create a pointer file. Do that by creating a file with a unique name for you (this will have to be the same as you chose for your em:id value in your install.rdf file more on that below). In the case of our example, create a file named linktargetfinder@robertnyman.com, without any extension, and in it just point it to where you will have your code, e.g. C:\extensions\ (Windows) or ~/Sites/linktargetfinder/ (Mac).

4 of 31

5/11/2011 12:38

How to develop a Firefox extension | Mozilla Add-ons Blog

http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

What is needed to have a good base for your extension development, is to create the structure of the extension code. Start by creating this hierarchy:

We begin with the intimidating code of install.rdf. This is where you will have all the meta information about your extension, which versions of Firefox it supports and other assorted information. Our install.rdf will look like this:

Recommended

View more >