Firefox Extensions

XUL

XUL (XML User-interface Language) is a markup language that describes the user interface. It is at the heart of Mozilla based browsers. Through XUL, you can defined input controls, toolbars, menus, dialogs, keyboard shortcuts and many more. XUL could be used for Mozilla/Firefox extensions or stand-alone applications. In fact, Firefox's interface is written in XUL. If the security permissions are enabled, you can also use XUL to remotely modify the interface of the browser.

You can access a XUL file just using regular URL. An alternative is to package several related files to a chrome package. There are two ways to create chrome packages, a JAR file and a chrome directory. The jar file is basically a ZIP file with chrome directory structure. Alternatively, you can directly put the chrome directory inside your browser's profile directory. Either way, chrome packages usually have three type of data: content (main windows, scripts etc.), skin (theme related files such as images, css etc.),, locale (local language related files).

If you have installed a chrome packages, you can access its XUL files directly using Firefox specific protocol (chrome://). For example, since Firefox user-interface is written in XUL, you can access its xul files using chrome:// protocol. The typical format is

chrome://<package name>/<part>/<file.xul> 

For example,

chrome://browser/content/browser.xul

will show you the main Firefox user-interface.

Hello World in XUL

The following code displays Hello World message on the browser:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
    id="helloworld-window"
    title="Hello  World"
    orient="horizontal"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <label value="Hello World!!! "/>

</window>

In this code, the first two lines specify that this is an XML file and it uses a stylesheet. Then XML file specifies a window element. This will be the main container. Its attributes contain an id and title as well as its orientation. Also there is a specifial attribute

 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

This is a special attribute that informs the browser all its children are XUL.

This windows only child is a label with the value Hello World!!!.

Once you have the above XUL file, you can load it in your firefox and observe its behavior.

XUL Packages

The new file are added to they system using chrome packages. Packages are basically list of XUL files and supplementary material. Once a package is installed, the files can be accessed using chrome:// protocol. Firefox becomes aware of installed packages through manifest files. The purpose of these files is to map the protocol access to the actual locations in the physcical disk. While Mozilla reads all manifest files under chrome directory, Firefox reads only extentions/*/chrome.manifest names. Manifest files have the keywords content, skin and locale for each type.

content package-name file-path

skin package-name skin-name file-path

locale package-name skin-name file-path

file-path could be a physicall directory file:///path-name-here, or a JAR file, jar:<filename.jar>!/<path_in_archive>.

Installing XUL Packages

Both XUL installation and extension installation uses the same technique. You first need to create an XPI file. This is basically a zip file with some specific files inside. Lets see an example installation of hello.xul (above)

In order to install hello.xul, we will install a dummy extension. First, create a directory (lets call it helloworld) and edit a new manifest file

helloworld/chrome.manifest

 content helloworld chrome/

This tells Firefox that the package helloworld has its contents under chrome directory. Next create this directory under helloworld and copy your hello.xul there. Finally, create install.rdf file under helloworld directory.

install.rdf is a specifal file that describes your extension. In the very basic format, you need at least the following:

install.rdf

<?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>{4f212b04-8063-11dc-8314-0800200c9a66}</em:id>
                <em:name>Hello World </em:name>
                <em:version>1.0</em:version>
                <em:description>This is my hellow world</em:description>
                <em:creator>Burchan</em:creator>


                <!-- Firefox -->
                <em:targetApplication>
                        <Description>
                                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
                                <em:minVersion>0.9</em:minVersion>
                                <em:maxVersion>3.0</em:maxVersion>
                        </Description>
                </em:targetApplication>

        </Description>

</RDF>

<em:id> describes the unique id for your extension. There are several ID generators available. You can use a web based one, such as [1]. <em:name>, <em:version>, <em:description>,

<em:description>,<em:creator> are straight forward.

<em:targetApplication> describes which applications can use this extension, all Mozilla.org tools have their unique ids.

At this step, your should have the following directory structure.

helloworld
|-- chrome
|   `-- hello.xul
|-- chrome.manifest
`-- install.rdf

Inside helloworld directory, create a new zip file:

zip -r ../helloworld.xpi *

and open this file in Firefox. This will install your new extenstion. Now, you can reach your hello.xul with

chrome://helloworld/content/hello.xul

Modifying Firefox

chrome command overlay overwrites XUL pages with other XULs. The format is

overlay chrome://first-package  chrome://overwrite-the-first-package

You can use this command to overwrite Firefox XUL files. For example,

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

first defines a new chrome for news_blogger and then let its definitions replace existing firefox definitions. This way you can define new sidebars, toolboxes or context menus.

Toolbox

For toolboxes, you can use <toolbox element. After toolbox, you can define a toolbar in which you can put other items.

<?xml version="1.0"?>
<overlay id="picture-overlay"   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<toolbox id="navigator-toolbox">
<toolbar id="picture-toolbar" accesskey="T" class="chromeclass-toolbar" context="toolbar-context-menu" toolbarname="picture toolbar" hidden="false" persist="hidden">
<label id="picture-url" value="this is a test"/>
</toolbar>
</toolbox>
</overlay>

Sidebar

You can define a sidebar using a second XUL file. The first XUL defines a menu item. In this case, it is attached to the View→Sidebar menu using the viewSidebarMenuid, which opens or closes News Blogger in the sidebar when activated. The menu item is then hooked up to a broadcaster via the observes attribute. The new broadcaster for the sidebar is overlaid into Firefox's main broadcaster set. The menu-item attributes are abstracted to the overlay simply to allow it to be used in more than one place.

<?xml version="1.0"?>

<overlay id="news_bloggerOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">


  <menupopup id="viewSidebarMenu">
    <menuitem key="key_NewsSidebar" observes="viewNewsSidebar"  />
  </menupopup>


  <broadcasterset id="mainBroadcasterSet">
    <broadcaster id="viewNewsSidebar"
                 
                 autoCheck="false"
                 type="checkbox"
                 group="sidebar"
                 sidebarurl="chrome://news_blogger/content/sidebar.xul"
                 sidebartitle="News Blogger"
                 oncommand="toggleSidebar('viewNewsSidebar');" />
  </broadcasterset>



</overlay>

Then in the second XUL, you can define the sidebar the way you want.

<?xml version="1.0"?>


<page id="sbEmptySidebar" title="News Blogger;"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
        

...... your XUL elements are here......

</page>

Context Menu Changes

You can add new context menu (right mouse button) items using overlay

<?xml version="1.0"?>


<overlay id="news_bloggerOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <popup id="contentAreaContextMenu" insertafter="context-searchselect">
   <menuseparator id="menuseperator" />
      <menuitem id="add_article" label="Add Article" oncommand="AddArticle(event); event.preventBubble()"/>
      <menuitem id="add_picture" label="Add Picture " oncommand="AddPicture(event); event.preventBubble()"/>

 </popup>
</overlay>

This adds two new menu items just after a firefox defined item (context-searchselect). It also sets the function to be called when these items are selected.

Adding Javascript

You can add javascript after within window,overlay or page elements. You can also refer to an existing file.

<script type="application/x-javascript" src="chrome://news_blogger/content/news_blogger.js"/>

<?xml version="1.0"?>



<overlay id="news_bloggerOverlay"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://news_blogger/content/news_blogger.js"/>

......

Adding HTML Elements

If you want to use regular HTML elements, you need to include XHTML definition in your root tag.

<window id="topWindow"  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
       xmlns:html="http://www.w3.org/1999/xhtml" >

Once you have included XHTML definitions, then you can put regular HTML elements using <html:TAG> and </html:TAG>. For example, you can define an input field.

<html:input type="text" name="myinput"/> 

Links

Example set of XUL elements

XUL Element References