Simple Firefox Customizations: The Basics

I get asked a lot of questions about customizing Firefox that are beyond the scope of the CCK. Most of these questions involve how to prevent users from doing certain things or hide certain options in the UI. My typical answer is “you can write an extension for that,” but most people don’t want to go through the hassle of figuring out how to write an extension for what in most cases is a very simple change.

To try to address these issues, I’m going to do a series where I answer questions related to making simple changes to Firefox that might be needed in an enterprise environment. My goal is that a person with no extension experience at all will be able to make these changes by simply modifying an existing CCK extension.

Before I get into the specific customizations, I’m going to start with a very high level view of how we are going to make these changes.

Let’s define some terms in case you don’t know them. XUL (pronounced “zool”) is Mozilla’s XML-based User interface Language. It is used along with JavaScript and CSS to create the user interface in Firefox. Extensions can modify XUL, JavaScript and CSS by overlaying new XUL, JavaScript and CSS that replaces what is built-in to Firefox. Most of our work is going to involve the creation of these overlays. If you want more details, check out XUL Overlays at the Mozilla Developer Center.

There are currently two changes that the CCK makes using XUL overlays – adding a menu item to the Help menu and chanding the icon, link and tool tip for the animated icon (sometimes called the throbber). Both of these involve knowing the ID of the item you want to modify and then writing XUL that either modifies or replaces the existing XUL.

Here’s the XUL Overlay for adding the Help menu item:

<menupopup id="menu_HelpPopup">
  <menuseparator insertafter="aboutSeparator"/>
  <menuitem label="Our New Help Item" insertafter="aboutSeparator"
            oncommand="openUILink(''), event, false, true);"
            onclick="checkForMiddleClick(this, event);"/>

In this case, we needed two IDs – the ID of the help menu (menu_HelpPopup) and the id of the item after which we want to insert our menu (aboutSeparator). What this overlay says is “in the menupopup with an ID of menu_HelpPopup, insert a new separator after the exisiting item aboutSeparator, then insert a new menuitem after that old separator as well.” Don’t worry about the different attributes – we’ll cover those later.

We can also use a XUL overlay to replace content. Here’s the overlay for the animated icon:

<button id="navigator-throbber" oncommand="openUILink('')" onclick="checkForMiddleClick(this, event);" tooltiptext="TOOLTIP" disabled="false"/>

In this case, we needed the id of the existing animated icon (navigator-throbber) and we used our XUL to actually change the animated icon. We changed it from being disabled, we added tooltip text, and we added functionality when it is clicked.

Now that you have a very basic sense of how XUL overlays work, next we’re going to take a look at where in an existing CCK XPI our new overlays are going to be placed.

Please note: I reserve the right to delete comments that are offensive or off-topic.

Leave a Reply

Your email address will not be published. Required fields are marked *

2 thoughts on “Simple Firefox Customizations: The Basics

  1. I always thought that an extension for Firefox that would allow corporate environments make changes to Firefox that many large organizations need would be a great idea to get Firefox going full force in the corporate world. Features may include disabling the ability to download or download certain content (.exe, .zip) and blocking the ability to lock out changing various settings such as add-ons or the default web page.