1. How To

Develop a Firefox Extension with Easiest Way | Mozilla Add-ons Guide

I bet many of you have a keen interest in developing Firefox extensions. Some of you may have gone through some kind of short courses/training and tutorials to know to do this. And of course those who have been paying sincere time are now able to develop Firefox extensions in pretty smart and professional way. But as a human, we always look for shortest path to achieve our goal. We need something easy and time saving. Considering this thing, I made this short but complete guide in which you’ll learn a full fledged procedure of developing a Firefox extension. This is not actually a shortcut but an efficient approach to develop a fully operational Firefox extension. Read it carefully, understand, and chill.

firefox-extension-development

Specify a Target – Firefox Extension Development

As this a guide. So I better teach you with an example. Let’s say I want to create and Firefox extension that can find and highlight all of the inbound and outbound links on a web page. It will also show how many times a particular link has appeared in that web page. So let’s start with you first Firefox extension.

Things you need to develop Firefox extension

Of course you need platform to develop extension. You need your favorite code editor and fully operational and updated Firefox browser.

Switch to other Profile

As this is a practice work for you and you don’t want your existing settings to be affected by any unwanted change that you may make by mistake. So its better to create another profile with any name. Let’s say you created a profile with the name of “David”. Here is the procedure of making other profile in different OSs.

  • i) For Windows

Open window’s start menu and choose RUN option. Write firefox –P in there and hit enter. Then choose create profile and you’re good to go.

  • ii) For Mac

Open the Terminal located under Applications and type  /Applications/Firefox.app/Contents/MacOS/firefox –profilemanager in it. Then go to create profile.

  • iii) For Linux

Open a terminal. Use cd and navigate to Firefox directory. Enter ./firefox -profilemanager. Now choose Create Profile in the dialog.

 

Configuration settings in Firefox

Now open Firefox browser and type about:config in address bar and press enter button. A you’re about to make some minor changes so it will warn you. Its ok to move forward. Following settings must be as it is, its recommended. If not then change them accordingly. First three settings are necessary but the last two are optional.

  1. javascript.options.showInConsole = true
  2. nglayout.debug.disable_xul_cache = true
  3. browser.dom.window.dump.enabled = true
  4. javascript.options.strict = true
  5. extensions.logging.enabled = true

 

Go to Firefox error console, tools>Error Console, and disable XUL cashing.

Now let’s move further. It’s recommended to add pointer from you extensions directory to code location. It will save you from the burden of preparing and re installing your extension repeatedly.

Use of Profile Directory

This directory saves all of the information about your firefox browser including details of extensions. You can find your profile directory at

  • C:\Documents and Settings\[your user name]\Application Data\Mozilla\Firefox\Profiles (For windows)
  • cd~/Library/Application\ Support/Firefox/profiles/ (For mac)
  • cd~/.mozilla/ (this is for linux. Your profile would be showing with the name of .david)

Pointing to Extension

There will be a folder in the name of extensions. It will have the codes of all of your extensions. Create a pointer file with some name without any extension, Instead of placing your code here. And point it to C:\extensions\ (Windows) or ~/Sites/linktargetfinder/ (Mac) i.e. where you actually have the code.

Folder Structure and Files

Bes thing you should have for a developing a good extension is a good base. Hierarchy of your code should be as follows.

Install.rdf

This is intimidating code where you have all of the meta information about your extension. Usually it looks as following. It’s pretty disturbing for beginners but don’t worry. Many codes usually have same such information that you don’t ever need to replace with any other thing form yourself. Just let it be in this way and move to further steps.

 

01.<?xml version=”1.0″?>

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

03.xmlns:em=”http://www.mozilla.org/2004/em-rdf#”>

05.<Description about=”urn:mozilla:install-manifest”>

06.<em:id>david</em:id>

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

08.<em:version>1.0</em:version>

09.<em:type>2</em:type>

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

11.<em:description>Finds links that have a target attribute</em:description>

12.<em:homepageURL>http://www.robertnyman.com/<;/em:homepageURL>

13.<em:optionsURL>chrome://linktargetfinder/content/options.xul<;/em:optionsURL>

15.<em:targetApplication>

16.<Description>

17.<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>

18.<em:minVersion>2.0</em:minVersion>

19.<em:maxVersion>3.1b2</em:maxVersion>

20.</Description>

21.</em:targetApplication>

22.</Description>

23.</RDF>

 

Information in em:id must have to be the same as you mentioned in pointer file. Other sections describe information about your extensions such as its name, minimum and maximum versions of firefox it supports, its functionality and URL and optional URL of extension. em:type specifies the type of code which Extension here.

In the section of em:trgetapplication> there are information like em:id, which is the actual id of Firefox. em:minVersion is again the minimum version of Firefox. em:maxVersion isthe maximum version of Firefox.

What is Chrome Manifest?

Everything around your content window, such browser menu, toolbar, address bar is called chrome of firefox. Now we will move to the chrome:manifest file. It looks as follows

1.content     linktargetfinder    chrome/content/

2.content     linktargetfinder    chrome/content/ contentaccessible=yes

3.overlay chrome://browser/content/browser.xulchrome://linktargetfinder/content/browser.xul

5.locale  linktargetfinder    en-US   locale/en-US/

7.skin    linktargetfinder    classic/1.0 skin/

8.style   chrome://global/content/customizeToolbar.xul ;   chrome://linktargetfinder/skin/skin.css

 

Now let’s see what these different terms are saying.

content linktargetfinder chrome/content/identifies the path where your extension content files are located.

overlay chrome://browser/content/browser.xul and chrome://linktargetfinder/content/browser.xul is the path by which file you will use to override web browser elements, and add items to the toolbar, menu and status bar.

locale linktargetfinder en-US locale/en-US/ is used for localization of content.

style chrome://global/content/customizeToolbar.xul chrome://linktargetfinder/skin/skin.css is style overlays for chrome pages.

 

Chrome Folder

Be happy! Because the boring part of code is done. Now there is some interesting stuff waiting for you. Now it’s time for XUL (XML user interface language). First of all you need to create 3 files

  • xul
  • xul
  • js

browser.Xul

This is the file that is used to override the default look of browser. We can also add a button to the toolbar, an item to the Tools menu. A complete XUL files is

01.<?xml version=”1.0″?>

02.<?xml-stylesheet href=”chrome://linktargetfinder/skin/skin.css” type=”text/css”?>

03.<!DOCTYPE linktargetfinder SYSTEM “chrome://linktargetfinder/locale/translations.dtd“>

04.<overlay id=”sample”xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul“>

05.<script src=”linkTargetFinder.js” />

07.<menupopup id=”menu_ToolsPopup”>

08.<menuitem label=”&runlinktargetfinder;” key=”link-target-finder-run-key” oncommand=”linkTargetFinder.run()”/>

09.</menupopup>

11.<keyset>

12.<key id=”link-target-finder-run-key” modifiers=”accel alt shift”key=”L” oncommand=”linkTargetFinder.run()”/>

13.</keyset>

15.<statusbar id=”status-bar”>

16.<statusbarpanel id=”link-target-finder-status-bar-icon”class=”statusbarpanel-iconic”src=”chrome://linktargetfinder/skin/status-bar.png“tooltiptext=”&runlinktargetfinder;”onclick=”linkTargetFinder.run()” />

17.</statusbar>

19.<toolbarpalette id=”BrowserToolbarPalette”>

20.<toolbarbutton id=”link-target-finder-toolbar-button” label=”Link Target Finder” tooltiptext=”&runlinktargetfinder;”oncommand=”linkTargetFinder.run()”/>

21.</toolbarpalette>

22.</overlay>

 

There are some general XML syntax at start, then CSS code and DOCTYPE for localization. Then you’re free to go whatever XUL you want to put. I added a Menu option in toolbar menu, then an Icon to the firefox Statusbar and then a button to the toolbar. You need to go to view > Toolbars > Customize in order to add your button to the visible toolbar.

Options.Xul

It is used for the options dialog of extension, pointed out in the install.rdf file in the Description/em:optionsURL node. It looks like following

01.<?xml version=”1.0″?>

02.<?xml-stylesheet href=”chrome://global/skin/” type=”text/css”?>

04.<prefwindow

05.title=”Link Target Finder Preferences”

06.xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul“>

08.<prefpane label=”Link Target Finder Preferences”>

09.<preferences>

10.<preference id=”link-target-finder-autorun”name=”extensions.linktargetfinder.autorun” type=”bool”/>

11.</preferences>

13.<groupbox>

14.<caption label=”Settings”/>

15.<grid>

16.<columns>

17.<column flex=”4″/>

18.<column flex=”1″/>

19.</columns>

20.<rows>

21.<row>

22.<label control=”autorun” value=”Autorun”/>

23.<checkbox id=”autorun” preference=”link-target-finder-autorun”/>

24.</row>

25.</rows>

26.</grid>

27.</groupbox>

29.</prefpane>

31.</prefwindow>

 

You should’ve understand the terms used in above code and their respective purpose. This is just regular XML information and some styling.

LinkTargetFinder.Js

Now this is the part of code which you can conclude as your new extension. Code looks like this

01.var linkTargetFinder = function () {

02.var prefManager = Components.classes[“@mozilla.org/preferences-service;1”].getService(Components.interfaces.nsIPrefBranch);

03.return {

04.init : function () {

05.gBrowser.addEventListener(“load”, function () {

06.var autoRun = prefManager.getBoolPref(“extensions.linktargetfinder.autorun”);

07.if (autoRun) {

08.linkTargetFinder.run();

09.}

10.}, false);

11.},

13.run : function () {

14.var head = content.document.getElementsByTagName(“head”)[0],

15.style = content.document.getElementById(“link-target-finder-style”),

16.allLinks = content.document.getElementsByTagName(“a”),

17.foundLinks = 0;

19.if (!style) {

20.style = content.document.createElement(“link”);

21.style.id = “link-target-finder-style”;

22.style.type = “text/css”;

23.style.rel = “stylesheet”;

24.style.href = “chrome://linktargetfinder/skin/skin.css“;

25.head.appendChild(style);

26.}

28.for (var i=0, il=allLinks.length; i<il; i++) {

29.elm = allLinks[i];

30.if (elm.getAttribute(“target”)) {

31.elm.className += ((elm.className.length > 0)? ” ” : “”) + “link-target-finder-selected”;

32.foundLinks++;

33.}

34.}

35.if (foundLinks === 0) {

36.alert(“No links found with a target attribute”);

37.}

38.else {

39.alert(“Found ” + foundLinks + ” links with a target attribute”);

40.}

41.}

42.};

43.}();

44.window.addEventListener(“load”, linkTargetFinder.init, false);

 

The code is pretty straight forward in running. CSS file is added from the extensions chrome folder to the current document. It locates all links in it, counts those, highlights them and alerts you with the number of hits. Which was basically the core purpose behind development of this extension. Job done!

Three types of extension preferences are string, integer and boolean, and the six methods to work with them are given as follows:

  • getBoolPref()
  • setBoolPref()
  • getCharPref()
  • setCharPref()
  • getIntPref()
  • setIntPref()

 

Default folder is the folder in which your create preference folder. And a file with name pref.js in it. Local folder is used for localization. We just have one child folder in our example. Skin folder is used to analyze above things to give them a better look and shape.

Packaging and Installation

Extensions in firefox are delivered like XPI files which are basically just zip files. All you need to do is compress your folder and change its extension. Select all contents of your extension folder and send them to compressed (zip) folder. Then change its extension from .zip to .xpi. That’s all!

Distribution

There are two methods that you can use to distribute. You can host it by yourself or you can also use addons.mozilla.org. I personally recommend you to use addons methods because it saves you from many issues about management. I hope you enjoyed learning about extension development in firefox. Now at least you can make a try. I’m sure you can do that if you really pain attention in learning and understanding above mentioned method. Wish you best of luck with your very first Firefox extension!

Comments to: Develop a Firefox Extension with Easiest Way | Mozilla Add-ons Guide

Your email address will not be published. Required fields are marked *