Accessing the Firefox Interface

Everything you do with Firefox revolves around a combination of JavaScript and XML User Interface Language (XUL). JavaScript in a Firefox extension works much as you might expect; anyone who's used JavaScript in the past won't notice much of a difference when creating an extension.

The XUL provides access to Firefox objects. For example, if you want to create a textbox, you do it with an XUL object. You can see a complete listing of these objects here.

Firefox sees an XUL file as a C# or VB program would see a form. The XUL file defines the interface elements for your extension. All these files appear in the content folder. As with the installation file, the XUL file relies on the Visual Studio XML file as a starting point.

For now, create a new XML file called overlay.xul in the \content folder, as shown in Figure 1. Make sure the physical structure of your application matches the folder layout in Visual Studio. Listing 2 shows the XML you'll use in this case.

Listing 2: Creating a Graphical Element

<?xml version="1.0"?>
<overlay id="menuEntry-overlay" 
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <menupopup id="menu_ToolsPopup">
    <menuitem id="menuEntry-first" label="Test It" 
              oncommand="alert('You Clicked Me!');"/>
  </menupopup>
</overlay>

This XML file tells Firefox to create a new menu entry with the words Test It on it. The XML actually modifies the browser's Document Object Model (DOM) and inserts a new widget into it. If you open this file with Firefox, you would see that Firefox actually interprets the XUL as an interface addition, rather than as XML (as Internet Explorer and other browsers do). Once you add this menu entry to the DOM, you can attach handlers to it so that you can respond to events using JavaScript.

In this case, the code defines an action for oncommand. When the user selects the menu entry, Firefox executes the JavaScript alert() function with an input of "You Clicked Me!" You can also point to external scripts located in a JS file. The point is that you can execute any code based on a user action, and the code can do anything JavaScript can do. For example, you could access a Web service such as Amazon, calculate a local result, change the user's environment, or access information in a database.

The <overlay> element defines this as an overlay for an existing browser component, an addition to it. The <menupopup> element creates a connection to the existing Tools menu. The <menuitem> element tells Firefox what to add to the Tools menu, which is a new entry in this case.

You can change any part of Firefox using the same technique. Many extensions also add to the status bar (for quick access) and even add items to the context menus so that users can right click anywhere and gain the required access.

Accessing an Interface Element

Whenever you load anything into Firefox, it becomes accessible to the browser as a whole. It's easier to understand this concept when you see it in action. To begin, the browser interface elements use a special protocol named chrome. Consequently, to access any display element, you begin by typing chrome:// just as you would for a Web page. All the Firefox specific elements appear as part of the browser object.

Consequently, if you want to see the About dialog box for Firefox, type chrome://browser/content/aboutDialog.xul in the Address field and press Enter. Figure 3 shows what you'll see.

The display is fully functional. Click "Credits," and you'll see a list of everyone who worked on Firefox. Click OK and the browser window closes.

The second entry is always the name of the package. For example, if you have the JSView package installed, you'd type JSView. If you have JSView installed, you can type chrome://jsview/content/about.xul into the Address field and press Enter, and see the About dialog box for JSView. Likewise, if you want to see the settings for AdBlock, all you need to do is type chrome://adblock/content/settings.xul into the Address field and press Enter.