how to develop a firefox extension _ mozilla add-ons blog

31
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. Here I will walk you through and at the end of the article we will have created a fully functional Firefox extension! 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, let’s 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 don’t want for your regular How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-... 1 of 31 5/11/2011 12:38

Upload: john-kritsotakis

Post on 28-Apr-2015

58 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

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. Here I will walk you through

and at the end of the article we will have created a fully functional Firefox

extension!

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, let’s 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 don’t want for your regular

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

1 of 31 5/11/2011 12:38

Page 2: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

profile. In my case, I’ve 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 it’s 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 don’t exist, you can just create them.

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

2 of 31 5/11/2011 12:38

Page 3: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

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 aren’t necessary, but they might help you out. Personally, I don’t

use these.

javascript.options.strict = true

extensions.logging.enabled = true

Instead of constantly preparing and reinstalling your extension, there’s 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

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

3 of 31 5/11/2011 12:38

Page 4: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

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

[email protected], 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).

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

4 of 31 5/11/2011 12:38

Page 5: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

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:

<?xml version="1.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-RDF-syntax-ns

xmlns:em="http://www.mozilla.org/2004/em-RDF#">

<Description about="urn:mozilla:install-manife

<em:id>[email protected]

<em:name>Link Target Finder</em:name>

<em:version>1.0</em:version>

<em:type>2</em:type>

<em:creator>Robert Nyman</em:creator>

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

5 of 31 5/11/2011 12:38

Page 6: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

<em:description>Finds links that have

<em:homepageURL>http://www.robertnyman

<em:optionsURL>chrome://linktargetfind

<em:targetApplication>

<Description>

<em:id>{ec8030f7-c20a-

<em:minVersion>2.0</em

<em:maxVersion>3.1b2</

</Description>

</em:targetApplication>

</Description>

</RDF>

Scary, right? Well, even if your not used to RDF it’s not that bad at all.

Like most code, there’s some mandatory information that you will never

need to change, and then some of your own to sprinkle in. The interesting

parts for us are:

em:id

This is where you add your unique developer id, of your own

choosing. Note that this has to be the same as the pointer file you

created above.

em:name

The name of your extension.

em:version

Current version of your extension.

em:type

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

6 of 31 5/11/2011 12:38

Page 7: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

The type declares that is an extension, as opposed to, for instance, a

theme.

em:creator

Well, you!

em:description

Describes your extension functionality. Will be shown in the Tools >

Add-ons window.

em:homepageURL

The URL of your extension’s web site.

em:optionsURL

The URL to where you will have your file for editing

options/preferences.

em:id

This value is the actual id of Firefox. Change this if you want to

develop for Thunderbird or something else.

em:minVersion

The minimum version of Firefox required to run the extension. Valid

Application Versions.

em:maxVersion

The maximum version of Firefox required to run the extension. Valid

Application Versions.

Read about more options in Install Manifests.

The chrome of Firefox is everything around the content window. i.e. web

browser toolbar, menus, statusbar etc. The next file for our extension,

which will probably feel a bit awkward to edit, is the chrome.mainfest

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

7 of 31 5/11/2011 12:38

Page 8: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

file. This one, however, is in conjunction with install.rdf the key to

how your extension will be added to Firefox, and how it will work. Our

chrome.manifest file looks like this:

content linktargetfinder chrome/content/

content linktargetfinder chrome/content/ conten

overlay chrome://browser/content/browser.xul chrome://

locale linktargetfinder en-US locale/en-US/

skin linktargetfinder classic/1.0 skin/

style chrome://global/content/customizeToolbar.xul

So, what are all those options? Let’s go through them:

content linktargetfinder chrome/content/

The path to where your extension content files will be found.

content linktargetfinder chrome/content/

contentaccessible=yes

Same as the above, but when contentaccessible=yes is added, it

allows Firefox 3 and later to access the extension’s files and show

them in the web browser (like within a web page). Found this

excellent help through Web pages accessing chrome:// is forbidden.

overlay chrome://browser/content/browser.xul

chrome://linktargetfinder/content/browser.xul

The path to which file you will use to override web browser elements,

and add items to the toolbar, menu and statusbar.

locale linktargetfinder en-US locale/en-US/

Used for localization of content.

skin linktargetfinder classic/1.0 skin/

Skin reference.

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

8 of 31 5/11/2011 12:38

Page 9: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

style chrome://global/content/customizeToolbar.xul

chrome://linktargetfinder/skin/skin.css

Style overlays for chrome pages.

More information can be found in Chrome Manifest.

Ok, once the mandatory parts are out of the way, now things start to get

interesting. This is also when we start to look at XUL, which stands for

XML User Interface Language. It is developed by Mozilla to create

interfaces in Firefox, Thunderbird etc.

First, within the chrome/content folder, create three files:

browser.xul

options.xul

linkTargetFinder.js

This is the file we will use to override some of the default look of the web

browser, i.e. add a button to the toolbar, an item to the Tools menu and a

statusbar icon. Let’s look at the complete browser.xul file and then break it

down:

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://linktargetfinder/skin/

<!DOCTYPE linktargetfinder SYSTEM "chrome://linktarget

<overlay id="sample" xmlns="http://www.mozilla.org/key

<script src="linkTargetFinder.js" />

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

9 of 31 5/11/2011 12:38

Page 10: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

<menupopup id="menu_ToolsPopup">

<menuitem label="&runlinktarge

</menupopup>

<keyset>

<key id="link-target-finder-ru

</keyset>

<statusbar id="status-bar">

<statusbarpanel id="link-targe

</statusbar>

<toolbarpalette id="BrowserToolbarPale

<toolbarbutton id="link-target

</toolbarpalette>

</overlay>

First, there some general XML syntax, then you include your CSS code

and set a DOCTYPE for localization. It’s followed by the overlay root

element with its Ghostbuster-inspired namespace (developers are truly

geeks ).

After that you’re free to write whatever XUL you want, and basically it’s

like HTML should’ve been. What I mean with that is that it is filled with

basic interface options that can’t be found anywhere in HTML. For a

complete overview of what you can do, please read the XUL Reference.

In our code here, we start with adding a menu option to the Tools menu in

Firefox, and connect it to a keyboard shortcut:

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

10 of 31 5/11/2011 12:38

Page 11: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

<menupopup id="menu_ToolsPopup">

<menuitem label="&runlinktargetfinder;" key="l

</menupopup>

<keyset>

<key id="link-target-finder-run-key" modifiers

</keyset>

Followed by adding an icon to the Firefox statusbar:

<statusbar id="status-bar">

<statusbarpanel id="link-target-finder-status-

</statusbar>

And at the end, we add a button to the Firefox toolbar:

<toolbarpalette id="BrowserToolbarPalette">

<toolbarbutton id="link-target-finder-toolbar-

</toolbarpalette>

Note that you need to go to View > Toolbars > Customize… to add your

button to the visible toolbar.

In the above examples, you might have noticed the

&runlinktargetfinder; code. That is used for localizing text, and its

translation can be found in the locale folder. More on that later.

Another thing to notice, which can be tricky at first, is that some ids and

classes for XUL elements actually have meaning for its display, stemming

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

11 of 31 5/11/2011 12:38

Page 12: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

from core Firefox code. Make sure to read the XUL Reference thoroughly

for the elements you’re using.

If you want to use regular HTML elements instead of/together with XUL,

you can include the XHTML definition in your root element, and then

include any HTML element with the html: prefix. Like this:

<overlay id="sample" xmlns="http://www.mozilla.org/key

<html:input type="submit" value="Send" />

This file is used for the options/preferences dialog for your extension, and

its path is pointed out in the install.rdf file in the

Description/em:optionsURL node. The complete options file for our

extension looks like this:

<?xml version="1.0"?>

<?xml-stylesheet href="chrome://global/skin/" type="te

<prefwindow

title="Link Target Finder Preferences"

xmlns="http://www.mozilla.org/keymaster/gatekeepe

<prefpane label="Link Target Finder Preference

<preferences>

<preference id="link-target-fi

</preferences>

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

12 of 31 5/11/2011 12:38

Page 13: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

<groupbox>

<caption label="Settings"/>

<grid>

<columns>

<column flex="

<column flex="

</columns>

<rows>

<row>

<label

<check

</row>

</rows>

</grid>

</groupbox>

</prefpane>

</prefwindow>

Again, some regular XML information and styling of the content. It then

uses some XUL to layout the content of the preferences dialog. The

interesting part here, though, is connecting the user input to the actual

settings for the extension (those settings are to be found in the prefs.js

file, mentioned in detail below).

To start with, you create a preferences group in the options.xul file

with your desired preferences. Then, give each preference an id and

connect it to the extension’s real preferences with the name attribute:

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

13 of 31 5/11/2011 12:38

Page 14: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

<preferences>

<preference id="link-target-finder-autorun" na

</preferences>

Then you create an element and add a preference attribute to it,

pointing to the before-chosen idattribute for the preference in the

preferences group. It will then automatically connect its value to that

specific preference.

<checkbox id="autorun" preference="link-target-finder-

Note that you don’t need to add an OK button for the dialog – for instance,

on Macs there won’t be one while it’s automatically added for Windows

users. All about system compatibility, my friends.

If you’re like me, this is where you will feel at home. Good ol’ JavaScript

code.

What’s nice here is that you can script any element in the XUL and any

element in the HTML content window as well. All you need to access the

content window is to precede your document call with the content

keyword, like this:

content.document.getElementsByTagName("a");

Here’s the complete code of the linkTargetFinder.js file:

var linkTargetFinder = function () {

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

14 of 31 5/11/2011 12:38

Page 15: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

var prefManager = Components.classes["@mozilla

return {

init : function () {

gBrowser.addEventListener("loa

var autoRun = prefMana

if (autoRun) {

linkTargetFind

}

}, false);

},

run : function () {

var head = content.document.ge

style = content.docume

allLinks = content.doc

foundLinks = 0;

if (!style) {

style = content.docume

style.id = "link-targe

style.type = "text/css

style.rel = "styleshee

style.href = "chrome:/

head.appendChild(style

}

for (var i=0, il=allLinks.leng

elm = allLinks[i];

if (elm.getAttribute("

elm.className

foundLinks++;

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

15 of 31 5/11/2011 12:38

Page 16: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

}

}

if (foundLinks === 0) {

alert("No links found

}

else {

alert("Found " + found

}

}

};

}();

window.addEventListener("load", linkTargetFinder.init,

While it’s a fair bit of code, it is also very basic. When the window loads, it

runs the init method of the linkTargetFinder object. If the

preference autorun is set to true, it calls its run method immediately.

Otherwise, it will only be called when the toolbar button, menu item or

statusbar icon is clicked. This happens through the oncommand attribute

on the elements in the browser.xul file.

The code in the run method is pretty straight-forward. It adds a CSS file

from the extensions chrome folder to the current document, finds all links

in it, loops through them and checks if they have a target attribute,

counts those, highlights them and alerts you with the number of hits.

As you can see, there’s a pointer in the code to something called

gBrowser. That is how to get a reference to the current web browser, and

you could also use getBrowser() as well. Note that this sort of code is

only available from within the XUL context of the web browser. More

information and options can be found in Tabbed Browser.

The only unusual part for a JavaScript is the variable prefManager,

which connects to Firefox preference manager, and later gets the

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

16 of 31 5/11/2011 12:38

Page 17: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

autorun preference with the help of this code:

var autoRun = prefManager.getBoolPref("extensions.link

The three types of extension preferences are string, integer and boolean,

and the six methods to work with them are:

getBoolPref()

setBoolPref()

getCharPref()

setCharPref()

getIntPref()

setIntPref()

Within the defaults folder, you create a preferences folder and in

that one a file named pref.js. This is used for the preferences you want

to use for your extension, and looks like this:

pref("extensions.linktargetfinder.autorun", false);

Used for localization. In our case here, we just have one child folder for

en-US content, but it can be easily extended. That folder has a file named

translations.dtd, which contains translations for entities used in

XUL files. Our file looks like this:

<!ENTITY runlinktargetfinder "Run Link Target Finder">

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

17 of 31 5/11/2011 12:38

Page 18: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

Remember &runlinktargetfinder; in the browser.xul file? This is

where it gets its translation.

Now when we have all functionality in place, let’s make things a little more

pretty (just a little, ok?). In our skin folder, we have three files:

skin.css, status-bar.png and toolbar-large.png. The images

are, naturally, used for the toolbar and statusbar respectively.

The CSS in skin.css is used for setting the image for the toolbar, the size

and space for the statusbar icon and the highlight look of links with a

target attribute. The code looks like this:

#link-target-finder-toolbar-button {

list-style-image: URL("chrome://linktargetfind

}

#link-target-finder-status-bar-icon {

width: 83px;

margin: 0 5px;

}

.link-target-finder-selected {

outline: 2px solid red !important;

}

Firefox extensions are delivered like XPI files, and those are basically just

ZIP files with another extension. Therefore, when you’re finished with

your extension, all you need to do is ZIP your files together and give it an

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

18 of 31 5/11/2011 12:38

Page 19: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

XPI extension. Note: do not ZIP the containing folder for your extension,

just its contents (chrome folder, chrome.manifest and install.rdf

files etc).

Once you have your XPI file, you can just drag and drop it into Firefox,

and it will automatically install.

Select all the contents of your extension folder, right-click and choose

Send To > Compressed (Zipped) Folder. Rename it to .xpi

instead of .zip and you’re done!

Open the Terminal, navigate to your extension with the CD command and

then type in zip -r LinkTargetFinder.xpi *. Ta daa!

Open a terminal, get to your extension folder, and type in zip -r

LinkTargetFinder.xpi * All done!

There are two options of distributing your extension. Either use

addons.mozilla.org or host it yourself. If you do it yourself, you can specify

an updateURL in your install.rdf file, but note that since Firefox 3 it

has to be a secure location, e.g. through SSL or similar.

Personally, I’d recommend addons.mozilla.org for greater reach,

auto-update pushing and statistics. The downside of it, though, is that the

review process can take quite some time for your extension to get an

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

19 of 31 5/11/2011 12:38

Page 20: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

30

approval. Before that it can still be downloaded as an experimental

add-on, but people need to have an addons.mozilla account and log in to

do so.

To make sure it doesn’t take longer than necessary, I recommend reading

Successfully Getting your Addon Reviewed.

All the code I’ve created here is available both as a ZIP file of everything,

so you can start experimenting, change stuff and see what happens. It is

also available as an XPI file, which you can install in your Firefox just to

test the functionality (drag and drop it into Firefox).

Download Link Target Finder code as a ZIP file.

Download Link Target Finder as an XPI file.

I hope this has been a good, albeit long, introduction to Firefox extension

development and that it has helped you to grasp concepts you hadn’t

gotten full control over yet. Good luck, and don’t hesitate to ask if you

have any questions!

Tags: documentation, tutorials

Categories: developers, documentation

Mattias Hising

There were a lot of discussions about developing your extensions a couple of years

ago, and somewhere the know-how and tutorials have gone missing the last couple

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

20 of 31 5/11/2011 12:38

Page 21: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

of years (or at least the good ones), this post is really, really good and will probably

help a lot of people in the community start building extensions. Keep up the good

work Robert.

January 28th, 2009

Michael Kaply

locale and skin are chrome

They should be under the chrome directory.

January 28th, 2009

seth bindernagel

Hey Rey, Nice post. I wrote this a long time ago:

http://blog.mozilla.com/seth/2008/04/07/the-story-of-a-non-hacker-

who-wrote-a-firefox-add-on/

Hope it provides some good stuff to add to your post.

Also, I know guys like Ted M (irc nick luser) developed some pretty handy tools to

get started. I think you can find that stuff here:

https://addons.mozilla.org/en-US/firefox/addon/7434

January 28th, 2009

Paul

Wow ! Nice post

I suggest you to push it on MDC.

January 29th, 2009

Robert Nyman

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

21 of 31 5/11/2011 12:38

Page 22: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

Thanks everyone, glad that you like it!

Michael,

That’s a good point, the chrome directory is probably more suitable (just not

mandatory).

January 30th, 2009

Robert Nyman

Paul,

I’d love to have it on the MDC. Rey, what do you think?

January 30th, 2009

Austin King

Another really handy resource by Ted is

http://ted.mielczarek.org/code/mozilla/extensionwiz/

Which will generate all of these files for you into a basic extension that you can

edit and run with.

I just found the FUEL library

https://developer.mozilla.org/en/FUEL

If you are targeting Firefox 3, it’s worth a look. It provides web development

abstractions on top of XUL.

January 30th, 2009

rbango Author

@Robert: I’ll run it by the team and see what we can do.

February 2nd, 2009

robcee

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

22 of 31 5/11/2011 12:38

Page 23: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

seconding Paul. This should definitely be on MDC. Great tutorial, Robert. Thanks

for reposting this, Rey!

February 3rd, 2009

Anji

Thanks a ton Robert Nyman

Very useful post

February 5th, 2009

Aditi Mittal

Very nice and informative article

thanx

February 6th, 2009

Robert Nyman

robcee, Anji, Aditi,

Thank you very much!

February 9th, 2009

Lubes

Profile manager on Linux:

1.quit firefox

2.open terminal

3.write command: firefox -ProfileManager

February 26th, 2009

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

23 of 31 5/11/2011 12:38

Page 24: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

Jason Thompson

Is there a video on how to do this info overload

March 10th, 2009

Sandeep

hi,

i want to submit a firefox search plugin . pl can you let me know how i can do it.

March 11th, 2009

Mike Camino

Great tutorial, many thanks to you, Robert!

But you said nothing about how to run and debug add-on until it packed and

installed.

I’m very new to mozilla development and it is unclear for me.

March 15th, 2009

Lee

Is there a website where we can request add-ons, like a wish list to add to?

March 22nd, 2009

John Doe

Whoa! Thank you! You’ve saved my day! This is hands down the best article ever

when it comes to add-on development. Thanks!

May 21st, 2009

lj saminathan

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

24 of 31 5/11/2011 12:38

Page 25: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

Hai,

Really nice topic . thank you very much . i can understand my project’s extension

very well with your example

July 8th, 2009

Stefan Krüger

Hey Guys,

thanks for the posting and writing off this tutorila.

it was the first helpfull i found^^

meanwhile i have found https://developer.mozilla.org

/en/Building_an_Extension#Test

ther is a realy nice info for beginners:

[quote]…

If you get a message that the install.rdf is malformed, it is helpful to load it into

firefox using the File->Open File command and it will report xml errors to you. In

my case, I had a space before the “<?xml"…

[/quote]

July 17th, 2009

Naveen Mandadi

Very good explanation in understanding of developing an add-on in firefox. This

will be a very good startup for me. I faced a problem while installing the add-on as

per the content of the files in your explanation. xmlns and xmlns:em values in

install.rdf should have RDF in smaller case. This was correct in your download xpi

file.

August 16th, 2009

Naveen Mandadi

How do i know what makes this add-on incompatible to version 3.5.2?

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

25 of 31 5/11/2011 12:38

Page 26: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

August 16th, 2009

Naveen Mandadi

Got yah. Incompatibility is because of the maxVersion in the install.rdf

August 16th, 2009

Mike Berthram

Hi, I’m always getting “Empty string in getElementById()” warnings when i open

the options window. How can I solve this?

September 6th, 2009

Mike Berthram

Nvm, i got it. You just have to set an the id attribute for the prefwindow in the

options.xul

September 6th, 2009

pd

wordpress’ ridiculous narrow design really sucks for articles like this. How about a

widescreen version please?

September 13th, 2009

güzel sözler

Whoa! Thank you! You’ve saved my day! This is hands down the best article ever

when it comes to add-on development. Thanks!

September 18th, 2009

kral oyunlar

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

26 of 31 5/11/2011 12:38

Page 27: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

Creating extensions for FF and if those are very useful for the users, will make you

popular in this industry.

I wish i could be able to develop even for myself. Thanks for explaining briefly how

to develop.

September 26th, 2009

Oyunlar

Thanx mate! its a good article. but im getting the same problem as Mike Berthram.

Empty string in getElementById()” warnings. can somebody help?

October 2nd, 2009

indir

Whoa! Thank you! You’ve saved my day! This is hands down the best article ever

when it comes to add-on development. Thanks!

October 4th, 2009

Dizi izle

Thanx mate! its a good article. but im getting the same problem as Mike Berthram.

Empty string in getElementById()” warnings. can somebody help?

October 18th, 2009

dizi izle

Hi, i am always getting empty string in getElementById() warning when i open the

options window, how can i solve this ??

October 25th, 2009

promosyon

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

27 of 31 5/11/2011 12:38

Page 28: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

Whoa! Thank you! You’ve saved my day! This is hands down the best article ever

when it comes to add-on development. Thanks!

October 28th, 2009

Andreas Eibach

Thank you very much for your work!

Very appreciated, and well-written, too. Keep it up.

November 9th, 2009

blogindir

You’ve saved my day! This is hands down the best article ever when it comes to

add-on development. Thanks!

November 10th, 2009

Andreas Eibach

To user N. Mandadi from Aug 16, 09:

I agree that there might be some beta testers too who use this so it would not hurt

using future version number 3.8 in the downloadable package (I’m testing the 3.7

alphas, so I had to “fix” this too)

To user pd from Sep 13, 09:

I can’t agree more. It’s really a nightmare to scroll back and forth thru the code

samples.

November 10th, 2009

müzik dinle

Nvm, i got it. You just have to set an the id attribute for the prefwindow in the

options.xul

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

28 of 31 5/11/2011 12:38

Page 29: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

November 27th, 2009

rafael

Awesome Tutorial!

December 15th, 2009

Gopinath

Hi, I worked it out. It is excellent. It isn’t working with Firefox 3.5. What should i

do to make it.. Thanks in advance

December 22nd, 2009

Shreyas Agasthya

Undoubtedly, this is one of the best articles I came across while I was looking at

my whys, hows, and whats for my plugin development. I have read the complete

article and had hands-on as well. Having done that, I still could not get three

questions answered.

1. Syntax and meaning of chrome.manifest.

2. What does it mean to write chrome://browser/…?

3. Why do we leave /chrome/content when we reference any file underneath this?

Can somebody help me here, please?

December 24th, 2009

GeoNOregon

Very good article. I have no intention nor desire to develop add-ons, and I still

acquired a great understanding of what makes Firefox, Firefox.

Why did I read it? I am trying to find out where add-on’s that have a data file, such

as form entry add-on’s, etc, store the data file. I have been searching for the

answer for a day or two, this time around, (I’ve given up on several previous

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

29 of 31 5/11/2011 12:38

Page 30: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

occasions.)

If this was common knowledge, backing up and migrating/upgrading would be a

much simpler process.

Why is it the simplest information about computers and software is often the most

difficult to find?

Later,

GeoD

January 3rd, 2010

Shreyas Agasthya

Hello,

Can someone help me with the above questions?

Regards,

Shreyas

January 5th, 2010

Sandy

hey thanx a lot. this was very useful for my final year project

January 23rd, 2010

Sandy

hello everyone,

I am trying to develop an add-on to firefox for speech recognition which will

enable the user to perform a search through an existing search engine.

so as mentioned in the article i will develop the extension using XUL and java

script.

but what about the speech recognition part..for example lets take feature

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

30 of 31 5/11/2011 12:38

Page 31: How to Develop a Firefox Extension _ Mozilla Add-Ons Blog

Privacy Policy | Legal Notices | Report Trademark Abuse

Except where otherwise noted, content on this site is licensed under the

Creative Commons Attribution Share-Alike License v3.0 or any later version.

extraction..how do i implement those? should i implement those using another

language and have a pointer to that in java script???

Please some one pay attention to this issue. its for my final year project

Regards,

Sandy

January 23rd, 2010

Firstman

I’m looking for this answer too. Thank you for Q&A

January 26th, 2010

lehenryjr

This is a very good article. I’ve never written a plug-in for Firefox, but I want to

and this gave me a good start. Thanks.

I appreciate it…

————-

Later,

LEHenryJr.

January 26th, 2010

Anup

Really good. Lots of informative stuffs

January 27th, 2010

How to develop a Firefox extension | Mozilla Add-ons Blog http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-...

31 of 31 5/11/2011 12:38