Page 1 of 1

Create a firefox extension Knowledge of XML + JS needed

#1 paperclipmuffin  Icon User is offline

  • Disassembling...
  • member icon

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

Posted 01 September 2009 - 04:11 AM

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

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



The chrome URL for the firefox layout itself is:

chrome://browser/content/browser.xul



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

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

<?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">
	<!-- Unique ID for extension. Can be in e-mail address format or GUID format -->
	<em:id>DICfox@dreamincode.net</em:id>
	<!-- Indicates that this add-on is an extension -->
	<em:type>2</em:type>
	<!-- Extension name displayed in Add-on Manager -->
	<em:name>DICfox</em:name>
	<!-- Extension version number. There is a version numbering scheme you must follow -->
	<em:version>0.1</em:version>
	<!-- 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 -->
	<em:creator>Paperclipmuffin</em:creator>
	<!-- Web page address through which extension is distributed -->
	<em:homepageURL>http://www.dreamincode.net/DICfox.htm</em:homepageURL>
	<!-- This section gives details of the target application for the extension (in this case: Firefox 3) -->
	<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:

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='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');"/>
	 <!-- That was our pack being added to the tools menu -->
	 <!-- Now the XML and JS guts of the window from DICfox.xul -->
	 <!-- /guts -->
  </menupopup>
</overlay>



=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='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"/>
 <!-- Now this is the XML interface! Enjoy! -->
  <label value='DICfox LIVES!'/>
 <!-- /interface -->
</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! :)

Is This A Good Question/Topic? 1
  • +

Page 1 of 1