Creating Firefox Extension

In this post, I would like to explain about creating an add-on(Extension) to Firefox. Let’s take a look at some of the terms.

Extensions add new functionality to Mozilla applications such as Firefox, SeaMonkey and Thunderbird. They can add anything from a toolbar button to a completely new feature. They allow the application to be customized to fit the personal needs of each user if they need additional features, while keeping the applications small to download. Extensions are different from plugins, which help the browser display specific content like playing multimedia files. Since plug-ins and extensions both increase the utility of the original application.[1]  Mozilla uses the term “add-on” as an inclusive category of augmentation modules that consists of plug-ins, themes, and search engines. [2]

Are you ready to create an extension? Let’s see the procedure.

Steps required to build a very basic extension – one which adds a status bar panel to the Firefox browser containing the text “Hello, World!”

Step 1) Set up the development environment. It can be set up anywhere in the hard disc.  The directory structure should look like this:

– My_dev_folder
            – chrome              
                    – content                                              
                             sample.xul

              chrome.manifest
              install.rdf

Step 2) Open the file install.rdf  and paste the following code snippet

<?xml version="2.0"?>

<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">

&amp;lt;Description about="urn:mozilla:install-manifest"&amp;gt;
<em:id>sowmyaravidas@gmail.com
<em:version>1.0
<em:type>2

&amp;lt;!-- Target Application this extension can install into,
with minimum and maximum supported versions. --&amp;gt;
<em:targetApplication>
&amp;lt;Description&amp;gt;
<em:i
20a-464f-9b0e-13a3a9e97384}<!--<span class="hiddenSpellError"
pre=""-->em:id>
<em:minVersion>1.5<!--<span class="hiddenSpellError" pre=""-->
em:minVersion>
<em:maxVersion>4.0.*<!--<span class="hiddenSpellError" pre=""-->
em:maxVersion>
&lt;/Description&gt;
<!--<span class="hiddenSpellError" pre=""-->em:targetApplication>

&lt;!-- Front End MetaData --&gt;
<em:name>sample<!--<span class="hiddenSpellError" pre=""-->em:name>
<em:description>A test extension<!--<span class="hiddenSpellError"
pre=""-->em:description>
<em:creator>Sowmya Ravidas
<em:homepageURL>http://www.example.com/<!--
<span class="hiddenSpellError" pre=""-->em:homepageURL>
&lt;/Description&gt;
&lt;/RDF&gt;

Step 3) open another file browser.xul in content folder and copy the following code snippet.


xml version="1.0"?>
&lt;overlay id="sample"xmlns="<a title="Linkification:
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
href="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul">
http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
</a>"&gt;
<statusbar id="<strong>status-bar</strong>">
<statusbarpanel id="my-panel" label="Hello, World"  />
&lt;/statusbar&gt;
&lt;/overlay&gt;</pre>

Step 4) open the file chrome.manifest and copy the following code snippet

<pre>content     sample    chrome/content/
overlay <a title="chrome://browser/content/browser.xul"
rel="external" target="_blank">chrome://browser/content/browser.xul
</a> <a title="chrome://sample/content/sample.xul" rel="external"
target="_blank">chrome://sample/content/sample.xul</a>

Step 5) Now, locate your profile folder. If you don’t have a profile,  add one.
command: firefox -no-remote -P (ubuntu)
Step 6) In you profile folder, open extensions and create a file. The file name and id name should be same. Here, sample@example.net. Paste the path of your extension folder in this file. i.e, /home/my_dev_folder/
step 7)  Zip the contents in the development folder.
command: zip -r sample.xpi *
Step 8 ) Open a new window in your profile. Drag n drop this zipped file. Install the add-on and restart.

You can see the Hello World on the right side of your window. 🙂

[1] https://developer.mozilla.org/en/Building_an_Extension
[2]http://en.wikipedia.org/wiki/Plug-in_%28computing%29

Advertisements

Tagged:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s