Other Language Tutorials

Welcome to Dream.In.Code
	Become an Expert! Join 307,214 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,559 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Create a firefox extension

Create a firefox extension, Knowledge of XML + JS needed

Options

paperclipmuffin
Group Icon

1 Sep, 2009 - 03:11 AM

Post #1

::PRELUDE::

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:

CODE

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

The chrome URL for the firefox layout itself is:

CODE

chrome://browser/content/browser.xul

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

CODE

chrome://DICfox/content/DIXfox.xul

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

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

QUOTE

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 mozilla.org (I've edited it a bit to make it make more sense in context):

QUOTE

install.rdf:

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

chrome.manifest:

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

overlay.xul:

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

DICfox.xul &

DICfox.js:

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) :

CODE

<?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>DICfox@dreamincode.net</em:id>
    
    <em:type>2</em:type>
    
    <em:name>DICfox</em:name>
    
    <em:version>0.1</em:version>
    
    <em:description>Helps you on DIC (somehow) !</em:description>
    
    <em:creator>Paperclipmuffin</em:creator>
    
    <em:homepageURL>http://www.dreamincode.net/DICfox.htm</em:homepageURL>
    
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>2.0</em:minVersion>
        <em:maxVersion>4.0</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

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:

CODE

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:

CODE

<?xml version='1.0'?>
<overlay name='DICfoxoverlay' xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'>
  <menupopup id='menu_ToolsPopup'>
    <menuitem id='DICfoxMenuitem' label='DICfox' insertbefore='sanitizeSeparator'
     oncommand="window.openDialog('chrome://DIXfox/content/DICfox.xul','DICfox','chrome, centerscreen, modal');"/>
     
     
     
  </menupopup>
</overlay>

=FILE 3: DICfox.js=

Make this yourself!

=FILE 4: DICfox.xul=

Last file! Hold on!

This is the visual part of DICfox:

CODE

<?xml version='1.0'?>
<?xml-stylesheet href='chrome://global/skin/'?>
<dialog id='DICfoxDialog' xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'
    title=DICfox'
    buttons='accept'
    onload='startingJSFunction();'>
  <script type="application/x-javascript" src="chrome://DICfox/content/DICfox.js"/>

  <label value='DICfox LIVES!'/>

</dialog>

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!

::THE END::

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