Simple Firefox Customizations: Using the CCK XPI

Now that we know the basics of XUL Overlays, we’re going to look at using an existing CCK XPI to make our changes. The reason we’re using the CCK XPI is because we want to take advantage of code that has already been written for us. We’ll start by examining the contents of an XPI created by the CCK Wizard. Note that for this example, we’ve used the CCK Wizard to create an XPI that has no customization at all. We’re just going to add our new modifications.

After creating an XPI using the CCK Wizard, copy unzip that XPI into a directory. You’ll see the following files:

chrome/cck.jar
components/cckService.js
defaults/preferences/firefox-cck.js
chrome.manifest
install.rdf
install.js
cck.config

The two files that are important to us are chrome.manifest and cck.jar. Here’s that the manifest file looks like:

overlay chrome://browser/content/browser.xul  chrome://cck/content/cck-browser-overlay.xul
style   chrome://global/content/config.xul    chrome://cck/content/cck-config.css
content cck     jar:chrome/cck.jar!/content/cck/

This file defines the overlays we talked about earlier. We are overlaying a file called cck-browser-overlay.xul onto the regular browser XUL file and we are overlaying a new CSS file. We won’t modify the manifest right now since it has exactly what we need. Later we’ll need to make changes when we want to anything other than the main browser UI.

The next file that is important to us is cck.jar. This is a ZIP file that contains the XUL overlay files. After unzipping this file, you’ll see cck-browser-overlay.xul. This is the file where we are going to make our modifications. For now, lets do something similar. Edit the file cck-browser-overlay.xul and add this line before the <stringbundleset> section (we’ll get into the specifics of this change in the next installment).

Once you’ve made this change, zip the JAR first and then zip the XPI file. Next, install the XPI.

If everything worked correctly, when you look at the Tools menu, the Options… menuitem should be disabled.

What we’ve seen in this installment is that by modifying an existing CCK XPI, we can start customizing the Firefox UI. We didn’t have to write our own extension from scratch. In our next installment, we’ll look at the interesting things we can do in our browser overlay.