Firefox extensions Part II

See also: The lightning fast tutorial to Firefox extensions Part I.

Here’s the entire extension described in this tutorial: Sample-Xpi

This time we’re going to take our url from part I, send it to a new window, parse it slightly, and send it back to our browser. This will demonstrate creating a simple gui, and sending information between windows. This is the gui we’ll create:

First we need to call this new gui (I’ll show how to create it later), from our existing code. In our browser_overlay.xul-file, add this:

<popup id="contentAreaContextMenu"></popup> 
  <menuitem label="Handle url.." id="linkHandlerMenu"></menuitem>      oncommand="openWindow('chrome://linkhandler/content/urlParser.xul',gContextMenu.linkURL);"/&gt;

This calls a method openWindow(), with the original link. Lets create openWindow() in our browser_overlay.js-file:

function openWindow(uri, url) 
{ 
.. 
window.openDialog(uri, "_blank","chrome,extrachrome,menubar,resizable,scrollbars,status,toolbar",url,callback); 
}   
 
function callback(urlToOpen) 
{ 
openNewTabWith(urlToOpen, null, null, null, false); 
}

Notice that we are using one of the super-cool features of Javascript: Function pointers. (look at this quick introduction). What we do, is sending a pointer to the callback-function. We’ll use it later. Notice also that we use a method, openNewTabWith. This method is defined here: chrome://global/content/contentAreaUtils.js, which is a part of the standard packages of Firefox. And finally, notice that we reference a file called “urlParser.xul“. Let’s create that file, and put this xml into it :

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 
<dialog id="urlParser" title="Url parser"
  buttons="cancel"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  onload="startup(window.arguments[0]);">
 
<script type="application/x-javascript" src="chrome://linkhandler/content/urlParser.js"/>
<script type="application/x-javascript" src="chrome://global/content/contentAreaUtils.js"/>
 
<hbox id="box1">
  <textbox style="width: 700px" id="normalUrl" value=""/>
  <button style="width: 50px" label="Go!" oncommand="window.arguments[1](document.getElementById('normalUrl').value);cancelDialog();"/>
</hbox>
 <hbox id="box2">
  <textbox style="width: 700px" id="shortUrl" value=""/>
  <button style="width: 50px" label="Go!" oncommand="window.arguments[1](document.getElementById('shortUrl').value);"/>
</hbox>
</dialog>

This defines all the gui. Not all that difficult, right? The gui-elements really feel like html. Go here for more information on gui. It’s actually the functionality that complicates the picture a bit.

First, the startup()-method is defined in urlParser.js, it’s just parses the url’s and puts the back into the gui.The interesting thing here is how we get our arguments: window.arguments[x]. This refers to the parameters (from the third one) specified in the window.openDialog-call, in the openWindow()-method. Note that you can add as many parameters as you like. So, window.arguments[0] gets the url from the openWindow()-method.

Notice that window.arguments[1] is actually a function pointer. The function takes one argument, an url, and we supply that url. We need a function pointer because what happens inside that function cannot be executed inside the scope of urlParser.xul. It has to be executed in the browser_overlay.xul-scope, and that is where the function is defined, and thus that’s the scope it lives in. Javascript has got something going here, right?

Look at my code, investigate the files distributed with Firefox, search the web, and you’ll be up and running on this in no time.

A final advice, have a look at these neat tools: Extension Developer’s Extension.

Tore Vestues