Page 1 of 1

Create a firefox extension Knowledge of XML + JS needed

#1 paperclipmuffin   User is offline

  • Disassembling...
  • member icon

Reputation: 13
  • View blog
  • Posts: 944
  • Joined: 16-April 09

Posted 01 September 2009 - 04:11 AM


Hi, and welcome to how to create a firefox extension. Throughout the process of this tutorial, I will be using Notepad++ to do all the coding. If you do not have Notepad++, you can download it from here.

To make a firefox extension work with firefox, you will need to place the finished product in your firefox extensions folder: usually c:\Program Files/Mozilla Firefox/Extensions. How to make .xpi installer packages will be explained later.

:::Create a firefox extension:::

--Chapter 1: Chrome--

The first file we will make will be a funny thing called chrome.manifest. The main layout of the guts of this file (so far) goes like this:

chrome://<Extension name>/<Extension type>/<Relative file path to source>

The chrome URL for the firefox layout itself is:


So let's say we have an extension called DICfox, we could have something like:


(We'll learn about XUL files later. They are a kind of XML.)

Here is a quote from that should help explain what's going on:


An extensionís GUI, or chrome, can consist of three kinds of package: content, locale, and skin.
The chrome manifest plays two important roles: it registers the contents of the chrome packages

For now, we'll just have content files.

--Chapter 2: XUL and where you need your JS--

This will all be a bit fast-paced, so I'm going to steal some more from (I've edited it a bit to make it make more sense in context):



Called the install manifest, this gives basic information about the extension, and is required in order for the extension to be installed in Firefox.


This is the chrome manifest described in the earlier section. Registers packages and invokes cross-package overlays.


XUL file that will be overlaid on the Firefox browser window, adding buttons, menu items, etc.

DICfox.xul &


The XUL to display a popup in the window, and the Javascript to control its operation.

So let's get to work making those files:

=FILE 1: install.rdf=

Aha, XML time!

install.rdf, funnily enough, installs your extension into firefox. the layout of the install.rdf file is (courtesy of mozilla) :

<?xml version="1.0"?>
<RDF xmlns="" xmlns:em="">
  <Description about="urn:mozilla:install-manifest">
	<!-- Unique ID for extension. Can be in e-mail address format or GUID format -->
	<em:id>[email protected]</em:id>
	<!-- Indicates that this add-on is an extension -->
	<!-- Extension name displayed in Add-on Manager -->
	<!-- Extension version number. There is a version numbering scheme you must follow -->
	<!-- Brief description displayed in Add-on Manager -->
	<em:description>Helps you on DIC (somehow) !</em:description>
	<!-- Name of extension's primary developer. Change to your name -->
	<!-- Web page address through which extension is distributed -->
	<!-- This section gives details of the target application for the extension (in this case: Firefox 3) -->

Create a new folder in your documents called what ever your extension is. Open up a new file in N++, paste that into it and and save it in the folder as install.rdf (all file types). There! (Save all files like this from now on)

=FILE 2: chrome.manifest=

We'll use what we learnt earlier about chrome to make this:

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

=FILE 3: overlay.xul=

This is the extension itself! W00t! This is also XML, with JS mecanics. Our basic overlay will look like:

<?xml version='1.0'?>
<overlay name='DICfoxoverlay' xmlns=''>
  <menupopup id='menu_ToolsPopup'>
	<menuitem id='DICfoxMenuitem' label='DICfox' insertbefore='sanitizeSeparator'
	 oncommand="window.openDialog('chrome://DIXfox/content/DICfox.xul','DICfox','chrome, centerscreen, modal');"/>
	 <!-- That was our pack being added to the tools menu -->
	 <!-- Now the XML and JS guts of the window from DICfox.xul -->
	 <!-- /guts -->

=FILE 3: DICfox.js=

Make this yourself!

=FILE 4: DICfox.xul=

Last file! Hold on!

This is the visual part of DICfox:

<?xml version='1.0'?>
<?xml-stylesheet href='chrome://global/skin/'?>
<dialog id='DICfoxDialog' xmlns=''
  <script type="application/x-javascript" src="chrome://DICfox/content/DICfox.js"/>
 <!-- Now this is the XML interface! Enjoy! -->
  <label value='DICfox LIVES!'/>
 <!-- /interface -->

WHOA! Did you see that? Did you get a picture? That was the incredibly rare double crested spotted internal XUL! The visual part of our extension we can see!


What? It's over? AHH! Oh well, I hope you found this tutorial useful, and go on to create some great firefox extensions! :)

Is This A Good Question/Topic? 1
  • +

Page 1 of 1