How to create plugins and extensions for Firefox.
This tutorial is a mini-howto on how to make a JavaScript based plugin for FireFox. The only thing you need is a text editor, a zip tool, and FireFox. Extensions are really nothing more than a zipped up structure of files that define your plugin and extension.
First, we’ll go over the fiel structure of a basic plugin. As you can see below, there really aren’t many files involved in making a plugin. The extension.xul contains the GUI, the extension.js contains the javascript source code for your plugin, the chrome.manifest contains the location of the files, and install.rdf is the installer file. Below we’ll look inside of these files in more detail.
The directory structure:
root (you’re development folder, or whatever..)
-chrome.manifest
-install.rdf
-content (folder)
—extension.xul
—extension.js
—extension.css (optional)
The code to create the GUI.
This gui lays out a textbox and a button. When the user clicks the search button or presses the enter key, the LocBarSearch() method is called, which is defined in the javascript file.
<?xml-stylesheet href=”loc8bar.css” type=”text/css”?>
<overlay id=”Scrapper-Overlay”
xmlns=”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”><script type=”application/x-javascript” src=”chrome://loc8bar/content/extension.js” />
<toolbox id=”navigator-toolbox”>
<toolbar id=”LocBarToolbar” toolbarname=”LocBar Toolbar” >
<label class=”darktxt” value=”Loc”/><label class=”bluetxt” value=”8″/>
<command id=”e-key” oncommand=”LocBarSearch(event);”/>
<textbox id=”LocBarQuery” cols=”1″ size=”20″ onkeypress=”if(event.keyCode == 13) LocBarSearch(event);” type=”search” searchbutton=”true” />
<toolbarbutton id=”LocBarButton”
label=”Search” oncommand=”LocBarSearch(event);” />
</toolbar>
</toolbox>
</overlay>
Below is the javascript code which contains the method that is called from the GUI. As you can see, all we are doing is passing the what is typed in the textbox to a search query for JRBTech.com.
function LocBarSearch(event){
var query = document.getElementById("LocBarQuery").value;
window._content.document.location = "http://www.jrbtech.com/?q=" + encodeURI(query) + ";
}
The chrome.manifest file contains the location of the GUI file.
overlay chrome://browser/content/browser.xul chrome://loc8bar/content/extension.xul
The install.rdf file contains all the information about your plugin.
<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”>
<!– Required Items –>
<em:id>plugin@jrbtech.com</em:id>
<em:name>JRBTech Toolbar</em:name>
<em:version>1.0</em:version>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>3.0.*</em:maxVersion>
</Description>
</em:targetApplication>
<!– Optional Items –>
<em:creator>info@jrbtech.com</em:creator>
<em:description>This extension lets you quickly search jrbtech.com from your firefox toolbar.</em:description>
<em:homepageURL>http://www.jrbtech.com/</em:homepageURL>
</Description>
</RDF>
After you are done, you need to zip up the contents of the files and rename the zip file to a .xpi file. The contents of the zip file should contain the files and content folder at the root level, so make sure and run the zip inside your working development folder.
That’s pretty much it. You can then open the plugin by going to FireFox, selection File-Open, and selecting your plugin.
DIGG ME