Executive Editor
Chris Webb
Contributing Writers
Phil Catelinet
Alex Sirota
Aaron Spuler
Terren Tong
Technical Editors
David Gegenheimer
James Russell
Development Editor
Marcia Ellett
Copy Editor
Maarten Reilingh
Production Manager
Tim Tate
Editorial Manager
Mary Beth Wakefield
Vice President and Executive Group
Publisher
Richard Swadley
Vice President and Publisher
Joseph B.Wikert
Project Coordinator
Erin Smith
Graphics and Production Specialists
April Farling
Jennifer Heleine
Stephanie D. Jumper
Erin Zeltner
Quality Control Technicians
Amanda Briggs
Jessica Kramer
Carl William Pierce
Charles Spencer
Proofreading and Indexing
TECHBOOKS Production Services
Cover Design
Anthony Bunyan

“And so at last the beast fell and the unbelievers rejoiced. But all was not lost, for from the ash
rose a great bird. The bird gazed down upon the unbelievers and cast fire and thunder upon
them. For the beast had been reborn with its strength renewed, and the followers of Mammon
cowered in horror.”
from The Book of Mozilla, 7:15
Assumptions
To use this book and reap its benefits, you should have a solid foundation in using Windows/
Linux and Mozilla Firefox. This book covers basic to advanced hacks, the majority of which are
compatible with any platform that the Firefox 1.0 official release currently runs on.
Using This Book and What You Will Find Here
To use this book, all you need to do is have a basic understanding of how Firefox works, how to
install it, and how to find files on your computer. As you read, you will begin to unravel the
marvels of coding for Firefox using the basics of Cascading Style Sheets (CSS) and JavaScript
and then later diving into XML User Interface Language (XUL) and the Cross Platform
Component Object Model (XPCOM). The final goal is being able to create extensions that
will allow you to customize Firefox to your heart’s content.
This book starts by giving you a brief overview of how to hack manually, how to hack with
extensions, and then a quick glance at what you will need to do to back up critical files so that
you can practice safe hacking.
Then it breaks down each of the individual components of Firefox from interface to rendering
to privacy and walks you through hacking and modifying key files to apply tons of possible
interface and functionality changes. It also includes a great list of proven extensions with which
you can modify core features of Firefox, as well as the look and feel of the interface.
In addition, this book covers the grassroots efforts that Mozilla and Firefox have become
known for among developers—the ability to use the highly extendable Mozilla programming
language and interface to modify any aspect of the browser by creating extensions, and also
how you can change the appearance of the browser by creating themes.

The Bugzilla site (http://bugzilla.mozilla.org) is the core management center for
tracking and communicating bugs and requests for enhancements (RFEs), and to check on the
latest development efforts for future releases.
Your first visit to Bugzilla might be a little daunting, but, as you read this book, you should be
able to understand and maybe even help with issues in the currently released builds by searching
and submitting your findings and bugs to the Bugzilla site.
Though registration is not required for searching, you should register and get a Bugzilla user
account to help communicate bugs and workarounds and to receive patch status on bug reports
you submit. The key thing to remember when submitting a bug is that you should thoroughly
search the Bugzilla database using different permutations of keywords that can describe your
problems. For example, suppose this was the issue at hand: “My browser crashed during an
online SSL secure transaction at MyRustyRedChevyTruck.biz.” Before submitting a bug, do
some digging, check to see if it is a bug with any secure site or just the one you had a problem
with. Once you have deduced whether it involves all secure web sites or just this site, you can
go into the Bugzilla database. You can search to see whether this is a known bug, if a future
major release includes the fix, or if there is a workaround.
The initial search that you should do would be for “MyRustyRedChevyTruck.biz.” If this
search does not bring back any results, do additional searches for “SSL crash” or “browser crash
secure site.” Each permutation of searches you do will help in removing duplicate bug reports,
which, in the end, will reduce overhead in managing, categorizing, and tracking bugs.
If, after thorough researching, you conclude that yours is a unique bug, go ahead and submit a
new bug by selecting the correct form entries on the Bugzilla site. Pay close attention when
classifying your submission, as doing so will expedite your request and remove the categorization
burden from the developers. If you are confused about classifying the bug, just do your
best; the category owners will sort it into the correct bucket. After submitting a bug, you will
receive communication from the Mozilla team and possibly other users who will confirm or
resolve the issue. If your submitted bug is a legitimate bug, it will be queued for further testing
and troubleshooting.

Gearing up to hack Mozilla Firefox is as simple as understanding
some basic Internet browser features, installing some tools, and
being able to find files on your computer system. Then it gets just a
tad more complicated. This chapter starts things off by discussing the different
methods for hacking Firefox that are covered in this book and how
things will progress.Try not to get bogged down with the onslaught of topics
that are covered here, because many of them are covered in depth
throughout the book.
If you understand some basic web programming tools, such as CSS,
JavaScript, and XML, you are one step ahead of the game. Conversely, if
you are not well versed in these technologies, you will find plenty of examples
and references to guide you along your hack training.
First, we cover some of the key tools you should use to get an edge when
hacking Firefox.Tools covered include the Document Inspector, basic text
editors, and JavaScript Console. A good portion of this chapter helps you
find your personalized Firefox settings in your Profile directory and then
highlights the key features of most of the files. As you continue to read this
book, you will tap into many of the key components of your profile. Then
we will approach the different methods of hacking the browser using some
of the functionality included with the browser, such as about:config and the
JavaScript Console. Finally, you’ll learn the basics of changing your preferences
and interface by manually hacking the prefs.js, user.js,
userChrome.css, and userContent.css files. After getting all your gear, you
will begin your quest to understand the core technologies involved in hacking
just about every aspect of Mozilla Firefox.
Installing the Document
Inspector Gadget
Out of the box, the Firefox Installer has two installation modes: Standard
and Custom. If you have already done a Standard installation, you will be
missing a key hacking and programming component: the Document
Inspector, or DOM Inspector.
To find the internal name or id of a specific Firefox window element, I like to use the Select
Element By Click option from the Search menu. Once you have selected this, you can click on
any of the screen elements on the bottom half of the window and the DOM Inspector jumps
to the actual definition for that element within the hierarchy. There you can easily access the
internal id associated with the element and use that for future coding or manipulation.
The Select Element By Click option works only after you have clicked on Inspect next to the
location bar.
Using the DOM Inspector and Figure 1-3, I will now explain how XUL is used to build the
main Firefox browser window. As you see from this figure, there is a XUL object or node called
toolbox with an id of navigator-toolbox. This object defines the top-level toolbar container on
the main browser window. This container holds the three individual toolbar objects that are
visible in the main window. They are toolbar-menubar, nav-bar, and PersonalToolbar. Digging
deeper, the nav-bar toolbar object has a toolbarbutton object defined as back-button. This
object holds the object information for the Back button, which is displayed on the browser
window’s navigation toolbar, and the fun continues from there with the rest of the interface
XUL definitions.
All in all, the DOM Inspector is the most useful tool to begin digging around and understanding
the interface elements that make up the Firefox windows.
Editing and Programming Text Tools
Another tool you will need is a good text-file editor.While the basic text editor that comes
with the operating system works for some people, I have found that more functionality is desirable
when working with web or Firefox files. Choose an editor with good code syntax highlighting
or with other advanced options.
Key attributes to look for in a good programming editor or interface include the following:

Is it actively developed?

Can it support Windows, UNIX, Mac OS, and Unicode text-file formats?

Does it have customizable tab stops or multi- or tabbed-file support?

Is it free?
Using the editor provided by your operating system may work for you for now, but you may
find yourself being a little more productive if you opt for a more up-to-date editor. Several
good freeware text editors are actively developed and contain features that even the most
diehard vi expert could grow to appreciate and love. Additional coverage on better programming
editors is available in Chapter 16. One text editor that I have used in the past is EditPad,
which works on Windows and Linux-based systems. I have also used the following Windowsbased
editors: Notepad++, PSPad, and the quick and simple Win32Pad.

The Document Inspector extension is a development tool used to analyze the Document
Object Model (DOM) of web pages or the Firefox interface, and is very useful in digging
deeper into the core structure of web pages, the Firefox browser window, and browser elements.
Currently, this browser development tool is available only from Firefox’s main installation process.
Later in this chapter and throughout the book, you will begin to see how web page document
model standards fit into Firefox’s interface customization.
So you want to install the Document Inspector (also called the DOM Inspector), but you
already have Firefox installed? No problem. Simply reinstall Firefox, but instead of choosing
the Standard installation type, choose the Custom installation type.
Follow the prompts until you get to the Select Components screen. Select Developer Tools, by
clicking the checkbox as shown in Figure 1-1, to install the Document Inspector tool.

Once you have completed this installation or reinstallation, you will notice the DOM Inspector
in your Tools menu is now available to all profiles on the system. You can use this tool as a
resource for dissecting bits and pieces of web pages and the Firefox interface. Figure 1-2 shows
the DOM Inspector view of a web page that is currently loaded in the main browser. Note that
the hierarchy for the currently loaded web page is displayed in the left-hand panel, with each
level or node grouped by the HTML-defined hierarchy and code. Additionally, details on the
currently selected node are displayed in the right-hand panel; this panel becomes useful when
hacking the Firefox interface.
Using the DOM Inspector can easily help you walk through the hierarchy used to create the
actual windows displayed by Firefox.To load the browser window’s XUL hierarchy, just follow
these steps:
1. In the main browser window navigate to any external web site, such as http://
www.mrtech.com.
2. Open the DOM Inspector from the Tools menu. At this point, the web site opened in
the previous step will be parsed.
3. From the File menu, choose the entry from the Inspect a Window menu option that
corresponds with the site opened in the first step, in this case, “MRTech.com - Mozilla
Firefox.”
After following these steps, the nodes or page elements for the main browser window are
loaded and available for visual inspection, as shown in the left-hand Document - DOM Nodes
panel of Figure 1-3. For future reference, you can use the following location or URL for the
main Firefox browser window to quickly browse the node tree: chrome://browser/
content/browser.xul.
After you have the nodes listed in the left panel for the browser.xul page, just click on Inspect
to the right of the location bar to open a window to browse the actual page on the bottom half
of the screen (also shown in Figure 1-3).

Deploying Your Theme
Once you feel that the theme is ready for general use, you need to deploy it. There are two ways
of deploying a theme: hosting it on your web site or hosting it on the Mozilla Update web site.
There are pros and cons to each method.
Hosting your theme on the Mozilla Update site means that many people will be able to see it,
but you won’t be able to manage your files. One popular complaint is that there can be two versions
of your theme available to the public if you host the file on Mozilla Update and on a personal
site — the most recently updated copy on your web site and a possibly outdated copy on
the Mozilla Update site. The site administrator does all file management on Mozilla Update,
and you have to file a bug in Bugzilla (http://bugzilla.mozilla.org) in order for
changes to take place. This process usually takes several weeks. The Mozilla Update site has
been known to be out of commission for long periods. Many theme authors like having control
over their files and thus don’t post them on the Mozilla Update site.To find out more information,
visit https://addons.update.mozilla.org/about.
Hosting your theme on your web site gives you total control over your files, but it may or may
not get as much visibility as the Mozilla Update site. I used to host my files on both Mozilla
Update and http://www.spuler.us, but now I prefer to manage my own files. (Currently,
my site is averaging 2.2 million hits and 45GB of bandwidth traffic per month.)
Creating JavaScript Installer Links
Hosting the theme on your web site requires some JavaScript to provide a clickable install link
for the theme. Otherwise, users will have to download the theme and then use a local install
method. The following is a sample install link:
<a href = “javascript:void (InstallTrigger.installChrome
(InstallTrigger.SKIN,’icandyjr_fb.jar’,’iCandy Junior.’))”>Install</a>
You will need to modify the link to match your theme name and filename. That link will pop
up a dialog in Firefox like that shown in Figure 18-21.
FIGURE 18-21: JavaScript install confirmation
Making Your Theme Public
After you’ve hosted your theme on a web site, you need to get the word out. A few web sites
where you can post your theme release include the following:

Hacking Not a Baby works