A Firefox Toolbar Extension for Truveo

A few posts ago I showed how to add a simple plugin AOL Pictures search utility to the Firefox search bar. Firefox, of course, supports much more customization via what they call 'Extensions' - allowing developers to add new and custom functionality. Building an extension is fairly straight-forward, requiring some XML, Javascript and CSS. Specifically, Mozilla/Firefox Extensions are created via XUL (XML User Interface Language). I'll demonstrate by adding a toolbar dedicated for Truveo to my browser.

Firefox extensions require a very specific folder and structure:

+- toolbar@truveo.com
   - install.rdf
   - chrome.manifest
  +- chrome
    +- content
      - toolbar.js
      - tooltar.xul
    +- skin
      - search.png
      - toolbar.css

Let's examine each file's contents to see how the toolbar is created. At the highest level are two files. install.rdf is our 'installer manifest' - this tells Firefox the details of the toolbar (eg. name, supported versions, author, etc).

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>toolbar@truveo.com</em:id>
    <em:version>1.0</em:version>
    <em:type>2</em:type>
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.5</em:minVersion>
        <em:maxVersion>2.0.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

The next file is the chrome manifest, which tells Firefox what we are building - in this case we are building a toolbar overlay and where the necessary files are located.

chrome.manifest
content toolbar chrome/content/
overlay chrome://browser/content/browser.xul chrome://toolbar/content/toolbar.xul
skin toolbar classic/1.0 chrome/skin

All of the heavy lifting is done in the chrome/content directory. This is where we define the elements (toolbar.xul) and the actions (toolbar.js) of the toolbar. In toolbar.xul, I'm defining two elements: a text box so the user can enter a search string and a button to execute the query.

toolbar.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://toolbar/skin/toolbar.css" type="text/css"?>
<overlay id="TruveoToolbar"
 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <script type="application/x-javascript" 
               src="chrome://toolbar/content/toolbar.js" />
    <toolbox id="navigator-toolbox">
      <toolbar id="Truveo_Toolbar" toolbarname="Truveo Toolbar"
               class="chromeclass-toolbar" context="toolbar-context-menu" 
               hidden="false" persist="hidden">
      <toolbaritem id="Search_Box" persist="width" label="Search Truveo">
        <textbox id="Search_Item" width="200"></textbox>
      </toolbaritem>
      <toolbaritem flex="0">
        <toolbarbutton id="Search_Button" label="Search Truveo" type="button"
                       tooltiptext="Search Truveo" oncommand="Search()">
        </toolbarbutton>
      </toolbaritem>
    </toolbar>
  </toolbox>
</overlay>

As you might expect, the Search() function is located in toolbar.js. As you can see, I'm using the Truveo XML API to perform the search and simply dumping the results to the browser.

toolbar.js
function Search() {
    var URL = "";
    var searchTermsBox = document.getElementById("Search_Item");
    URL = "http://xml.truveo.com/apiv3?   \
          appid=APP-ID&method=truveo.videos.getVideos&query=" + searchTermsBox.value;
    window._content.document.location = URL;
    window.content.focus();
}

Located in the chrome/skin are the CSS file and any images that might be associated with the toolbar.

toobar.css
#Search_Button {
    list-style-image: url("chrome://toolbar/skin/search.png");
}

And there you have it, a custom Firefox toolbar featuring Truveo. The last thing to do is stick the entire folder into the Firefox application extensions folder. Here are the locations on a Mac and PC:

• ~/Library/Application Support/Firefox/Profiles/xxxxxxxx.default/extensions
• C:\Documents and Settings\username\ Application Data\Mozilla\Firefox\Profiles\xxxxxxxx.default\extensions\

If you want to make the toolbar into a self-installing package, you'll have to jar the content folder and zip the parent folder (with a .xpi extension). Don't forget to edit chrome.manifest to reflect the jar file rather than the directory structure.

Anyhow, I hoped this peaked your interest in building custom extensions for Firefox. This post has only scratched the surface of the possibilities.

More Resources:

Lastly, here's a screenshot of the toolbar and sample search results: