For strange reasons I have been needing to use Test and Target in my current job. Test and Target is a tool that allows to easily perform content testing for  websites. The thing is that it’s interface has some issues that make working with it a little dangerous. Because of  that I decided to create a Firefox extension that will decrease the dangers of the interface. I will try to explain through a series of posts the procedure I will follow to create this extension.

Environment Set-up

The recommended way to start developing a Firefox extension is by creating a new profile that will only be used for that purpose. The reason is that the settings that we are going to use for the development profile are going to affect the performance of Firefox making it slower and probably unstable.

To create a new profile you can run this command from a Linux terminal:

1
/usr/bin/firefox -no-remote -P dev

On windows you can open your start menu, hit run and enter this command

1
"%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev

The first time you run this command a window to choose a profile will pop up. Click “Create profile” and create a profile with the name “dev”. The next time you execute the command Firefox will start using that profile.

Now that you have Firefox open using your dev profile, we are going to set some settings that will allow Firefox to report more explicit errors and other useful options for development. Type “about:config” on the address bar to get to the preferences configuration page. Not all preferences are defined by

default, and are therefore not listed in about:config. You will need to create new boolean entries for the ones that are not in the list yet.

These are the options you need to add or modify:

1
2
3
4
5
6
7
8
javascript.options.showInConsole = true
nglayout.debug.disable_xul_cache = true
browser.dom.window.dump.enabled = true
javascript.options.strict = true
devtools.chrome.enabled = true
extensions.logging.enabled = true
nglayout.debug.disable_xul_fastload = true
dom.report_all_js_exceptions = tru

Creating the extension

Now Firefox is set and we will start the actual development.

I didn’t use much imagination for the name of the project so I am going to call it “tntfixer”. I will create a folder with the same name of the the project, you should do the same with the name of your project. For this example this is the location of my project’s folder

1
/home/adrian/Dev/tntfixer

Firefox extensions need to follow an standard folder structure. For a minimal extension you will need to create a folder named “chrome” and a folder named “content” inside of it. Now create the following text files:

1
2
3
/home/adrian/Dev/tntfixer/chrome/content/tntfixer.xul
/home/adrian/Dev/tntfixer/chrome.manifest
/home/adrian/Dev/tntfixer/install.rdf

Now we need to fill the files with the correct content. We will start with the install.rdf file, this file lets Firefox extension manager obtain information about the extension and show it to the user. This is the content of my file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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-manifest">
        <em:id>tntfixer@tntfixer.net</em:id>
        <em:version>1.0</em:version>
        <em:type>2</em:type>

        <em:targetApplication>
            <Description>
               <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
               <em:minVersion>3.5</em:minVersion>
               <em:maxVersion>4.0.*</em:maxVersion>
            </Description>
        </em:targetApplication>

        <em:name>TnT Fixer</em:name>
        <em:description>Fixes dangers TnT interface</em:description>
        <em:creator>Adrian Ancona Novelo</em:creator>
        <em:homepageURL>http://www.example.com/</em:homepageURL>
    </Description>     
</RDF>

As you can see it is an XML file. This structure is necessary for Firefox to understand it. I will explain the parts that you would need to change for your extension.

• <em:id> is an unique identifier for your extension. It needs to have the same format as an e-mail address but it doesn’t have to be one. The e-mail address I used for this extension doesn’t actually exist.

• <em:version> This is the current version of your extension

• <em:type> This indicates the type of add-on. It can be a theme, an extension or a plug-in. Number 2 means extension.

• <em:targetApplication> Contains information about the application this extension is targeted to. The content of the <em:id> tag means Firefox and must not be changed. <em:minVersion> and <em:maxVersion> indicate the versions of Firefox this extension will support.

• <em:name> Is the name of the extension that will be shown to the user

• <em:description> Is the description of the extension that will be shown to the user

• <em:creater> The name of the creator

• <em:homepageURL> Should be the the page of your extension

The next file I am going to explain is the chrome.manifest. This file associates application resources with their location relative to the extension directory. This is the content of mine:

1
2
content	tntfixer chrome/content/
overlay chrome://browser/content/browser.xul chrome://tntfixer/content/tntfixer.xul

The first line creates a content resource and points it to the relative path of your content folder.

The second line tells Firefox to mix its default overlay with your extension’s overlay.

The only UI element I will use for the first version of my extension is an icon that I will place in the status bar. Here is where tntfixer.xul comes to play. Here is its content:

1
2
3
4
5
6
7
8
9
<?xml version="1.0"?>
<overlay id="tntfixer"
        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <statusbar id="status-bar">
        <statusbarpanel id="tntFixerPanel">
            <label>tntfixer</label>
        </statusbarpanel>
    </statusbar>
</overlay>

This is also a XML file. The overlay element is mandatory and should always point to there.is.only.xul. The element statusbar with id status-bar means that we are adding an element to the browser status bar. The statusbarpanel is a panel we are adding to the status bar, you should add an id to that panel to be able to reference it from you extension. Inside statusbarpanel I created a label that in the future will help interact with my extension. For now it will only be there.

Adding the extension to firefox

Now to the final step. Getting your extension into Firefox. To do this first we have to find our extensions folder for our dev profile. The location of the folder for my computer is:

1
/home/adrian/.mozilla/firefox/qepr45ed.dev/extensions

The important part here is the qepr45ed.dev, the dev indicates that it is the folder for the dev profile. Once inside that folder we need to create a file named after the id of our extension. In this case: tntfixer@tntfixer.net, the content of that file must be the path to your extension folder, in this case:

1
/home/adrian/Dev/tntfixer/

Now we just need to restart Firefox and we will be able to see our label on the browser status bar.