Michael Sync

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 ~

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

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

More Info: Mozilla Firefox > Extensions