8 Steps to create your owned Firefox Extension

This article illustrates how to create a Firefox extension in very simple way. It’s just 8 steps to fellow then you will get some ideas how to create your owned one.I think, it might be useful for those who wanna create their Firefox Extensions.

This article is based on this article from developer.mozilla.org. So, All credits go to the original article “Building an Extension“.

Maybe. you might ask me why I wrote duplicated one.
Well. There are two reasons behind. First thing is that I’m looking a lit bit more details into Firebug Extension so that I have to know how to create an extension for firefox. (At least, simply) and also, I have to take a note all steps so that I don’t need to look the whole article again. Second reason is that the original article was written for all platforms so that it might be a lit bit complicated than this one I wrote. :) All steps in this article are tested in Windows XP sp2 and Firefox 2.0.

Let’s start!

Step #1

Create a folder for your extension somewhere on your hard disk
e.g. C:\extensions\myExtension\

Step #2

Create another folder called chrome under your extension folder
e.g. C:\extensions\myExtension\chrome

Step #3

Create another folder called content under chrome folder
e.g. C:\extensions\myExtension\chrome\content

Step #4

Create two new empty text files, one called chrome.manifest and the other called install.rdf.
e.g. C:\extensions\myExtension\chrome.manifest
e.g. C:\extensions\myExtension\install.rdf

Note: I would suggest to unhide all extensions of all file in your harddisk. If you are not sure how to do it, you can check as follow.

  1. Open “C:\” drive.
  2. Go to Tools->Folder Options.
  3. Go to View Tab.
  4. Uncheck “Hide extensions for known file types

Step #5

Open the file called install.rdf (e.g. C:\extensions\myExtension\install.rdf). Copy the following code and paste it to install.rdf file.

<?xmlversion="1.0"?>

<RDFxmlns="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>sample@foo.net</em:id>
  <em:version>1.0</em:version>
  <em:type>2</em:type>

  <!-- Target pplication this extension can install into,
       with minimum and maximum supported versions.
   --> 
  <em:targetApplication>
   <Description>
    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
    <em:minVersion>1.5</em:minVersion>
    <em:maxVersion>2.0.0.*</em:maxVersion>
   </Description>
  </em:targetApplication>

<!-- Front End MetaData -->
<em:name>Sample!</em:name>
<em:description>A test extension</em:description>
<em:creator>Your Name Here</em:creator>
<em:homepageURL>http://www.foo.com/</em:homepageURL>
</Description>
</RDF>

Properties and Description

  • sample@foo.net – the ID of the extension. This is some value you come up with to identify your extension in email address format (note that it should not be your email). Make it unique. You could also use a GUID.
  • Specify
    2 — the 2 declares that it is installing an extension. If you were to install a theme it would be 4 (see Install Manifests#type for other type codes).
  • {ec8030f7-c20a-464f-9b0e-13a3a9e97384} – Firefox’s application ID.
  • 1.5 – the minimum version of Firefox you’re saying this extension will work with. Set this as the minimum version you’re going to commit to testing and fixing bugs with.
  • 2.0.0.* – the maximum version of Firefox you’re saying this extension will work with. Set this to be no newer than the newest currently available version! In this case, “2.0.0.*” indicates that the extension works with versions of Firefox 2.0.0.0 through 2.0.0.x.

Extensions designed to work with Firefox 1.5.0.x at the latest should set the maximum version to “1.5.0.*”.
See Install Manifests for a complete listing of the required and optional properties.
Save the file.

Step #6

Create a text file called sample.xul under chrome/content. (e.g: C:\extensions\myExtension\content\sample.xul ). Copy this sample code above and paste it into sample.xul. Then, Save it.

<?xml version="1.0"?>
<overlay id="sample"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<statusbarpanel id="my-panel"
  label="Hello,World"/>
</statusbar>
</overlay>
 

Step #7

Open the file called chrome.manifest (e.g: C:\extensions\myExtension\chrome.manifest) And Add in this code below:

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

Step #8 – Test

  1. Open your Firefox Profile Folder
    Note: Do you know where your Firefox Profile Folder is?
    If you dont know, Type “%userprofile%” in Run. Or go and find the folder same as login name under Documents and Settings Folder. then uncheck “Show Hidden files and Folder” of Folder Option. (I already told you where Folder Option is. :)) After that, go to Application Data\Mozilla\Firefox\Profiles Folder .
    Yes. This is your Firefox Profile Folder. You will see the folder called “extension”(Sometime, there are some sub folders. eg: kmdxbpyy.default or ujwao9qo.default. Check into them.) I found it under “%userprofile%\Application Data\Mozilla\Firefox\Profiles\kmdxbpyy.default\“..
    More:Profile folder – MozillaZine
  2. Create a folder and give the id of your extension as its name. eg: sample@foo.net
  3. Close Firefox Browser if it’s opened.
  4. Launch Firefox Browser again. You will see “Hello, World” in the Status Bar of Firefox browser.

Note: The way of testing is not same as the original article. You may also find the original way in here.

Updated!

Result ~

Firefox Extension - Sample

frefox-extension-hello-world.jpg

Download ~ http://michaelsync.net/demo/sample@foo.net.zip

That’s all. It’s easy. isn’t it? :)

More Info: Mozilla Firefox > Extensions

12 thoughts on “8 Steps to create your owned Firefox Extension

  1. Is this part a typo?

    Step #6

    Create a text file called sample.xul under chrome/content. (e.g: C:\extensions\myExtension\content\sample.xul ). Copy this sample code above and paste it into sample.xul. Then, Save it.

    should it be C:\extensions\myextension\chrome\content\sample.xul?

  2. Pingback: blog
  3. While it is easy to create the extension using this technique and actually make it work, it seems more difficult to create an XPI and get that to work. So, while the extension works fine using your development method, when I attempt to create an XPI from that working extension and then install the very same files through the XPI installer, it doesn’t work.

    So, I’m trying to figure out the trick to create a working XPI installer. For some reason, Firefox 3 doesn’t seem to want to register my namespace when installed through the XPI. It works fine by dropping the registration file into the extensions folder, though.

    Any ideas about creating the XPI after the extension is built?

    Thanks.

  4. I DID NOT understand, Properties and Description

    sample@foo.net – the ID of the extension. This is some value you come up with to identify your extension in email address format (note that it should not be your email). Make it unique. You could also use a GUID.
    Specify
    2 — the 2 declares that it is installing an extension. If you were to install a theme it would be 4 (see Install Manifests#type for other type codes).
    {ec8030f7-c20a-464f-9b0e-13a3a9e97384} – Firefox’s application ID.
    1.5 – the minimum version of Firefox you’re saying this extension will work with. Set this as the minimum version you’re going to commit to testing and fixing bugs with.
    2.0.0.* – the maximum version of Firefox you’re saying this extension will work with. Set this to be no newer than the newest currently available version! In this case, “2.0.0.*” indicates that the extension works with versions of Firefox 2.0.0.0 through 2.0.0.x. where i can find Application Data\Mozilla\Firefox\Profiles Folder ?

Leave a Reply

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