Hack Firefox

Using Hidden about:config to Hack

about:config is one of the many hidden gems that you will find in Firefox. What about:config does is give you a visual interface where you can find the name of a preference and see or change its current value. You can also add new or hidden preferences via this interface.To open the about:config page, all you have to do is type about:config in the location bar (this is where you would normally type a web address) and press Enter. The basic layout of the about:config screen is a list with the following four columns:
_ Preference Name: This column is the actual preference name used by Firefox.
_ Status: The Status is one of two different values: default or user set. This is what you use to determine whether a preference has its original or modified values.
_ Type: This column lists the type of preference, Boolean, integer, or string. These help Firefox understand how to use the preference.
_ Value: The value for the preference correlates to the preference name and type.

Figure 2-1 shows about:config in action.

FIGURE 2-1: The about:config preference editing screen

To update or modify a value just double-click on the row. Boolean values will automatically toggle, and integer/string values will bring up a prompt. You can also right-click on the list to accomplish any of the following:
_ Copy a name or value.
_ Create a new/missing preference.
_ Toggle to another value or reset back to the default value.
To further aid in finding preferences, you can use the Filter location bar just above the list; type in any part of a preference name, and the list will automatically filter down to preference names that contain that value. Just delete the typed filter or click Show All on the right-hand side to show all preferences again. Typing in a filter of “throbber” brings up the browser.throbber.url preference, which just so happens to be the only preference entry with “throbber” in it, as shown in  Figure 2-2.

FIGURE 2-2: Results of searching for “throbber” in about:config

One excellent reference for preference names and descriptions is available on the Preferential Extension web site. This extension and web page, though somewhat dated, contain names and descriptions for the Mozilla Suite, Firefox, and Thunderbird preferences that you can tweak and hack. You can find the web site at http://preferential.mozdev.org/
preferences.html.

› Hacking Your Profile Settings

This section covers how to manually make setting changes to your Firefox profile using the prefs.js and user.js files. Both files are plain text files, but only prefs.js is created with a default installation. The syntax used in each file is the same, is very strict, and is covered here, but make sure to carefully review manual changes to either before hacking away.

› Hacking the prefs.js File

Firefox uses a file called prefs.js to store customized preference settings in a name-value pair function in the root of your profile directory. This name-value pair directly coincides with the Preference Name and Value on the about:config screen, covered in the previous section. Key features available via the Tools➪Options menu, plus customizations such as homepage and extension settings, are stored in this file.

› Basic Hacking

The foundation for these settings is a JavaScript call to user_pref with a key and a value. The basic format of this call is as follows:
user_pref(“SystemPreference”) = “MyValue”;
The preference key is SystemPreference, and the key’s associated value is MyValue. The prefs.js file may contain a small number of preference entries or quite a few if you have customized several browser options or installed any extensions. Figure 2-3 shows the prefs.js file open in a standard text editor.

FIGURE 2-3: Default prefs.js created with a new profile

Customized variables from the prefs.js are populated only once, when the browser starts up, and are saved only when Firefox is completely shut down. Keep this in mind, because manually modifying the prefs.js file while Firefox is open will nullify your prefs.js hacking efforts. This is because the file is overwritten with what Firefox has in memory when it shuts down. Each customized preference entry is stored one per line in this file. In the case of a browser crash, any
recent preferences changes are lost. Firefox has built-in default values, which are used if a preference setting is not explicitly included or modified in the prefs.js file. Here is a basic example of how to modify the prefs.js file. In the about:config search example illustrated in the previous section, you found browser.throbber.url as the Preference Name
when searching for “throbber.” The throbber is your activity indicator; it is the moving status icon on the top-right side of the browser window. The throbber URL or web page loads if you click on the throbber at any point. Please note this is different from your homepage, which is associated with your startup page, new window, and so on.
Chapter 2 — Hacking Around Manually 21
Keeping in mind that you have to close out all your Firefox browser windows, you can now drill into the %UserPath% and Profiles directory structure to find and open the prefs.js file. The basic format that you want to use is to mimic the name/value keys format as follows:
user_pref(“browser.throbber.url”) =
“http://www.hackingfirefox.com/”;
Note that this is actually one continuous line, although it appears on two lines here. Once you have opened up the prefs.js file in your editor, you can do a search for throbber to see if that entry already exists and change it. If the entry does not exist, you can manually type it in, or you can go directly to the end of the prefs.js file and add your entry there. Adding an
entry to the bottom of the prefs.js file works very well because Firefox reads this file in sequentially and the last key-value association is the pair that is used.While there is extreme merit in forcing yourself to find and manually update the actual entry needed, I have found myself with prefs.js files as large as 500 to 700 lines long depending on how many extensions or options I have played around with. Hunting and pecking for multiple preferences is not at the top of my
list. Call it laziness or call it genius for tapping into the quick-turnaround techniques of copy and paste, but you know which one I prefer; now you can decide for yourself. For example, you can see in the following that the prefs.js already has a custom entry for the throbber:
user_pref(“browser.throbber.url”) =
“http://www.hackingfirefox.com/”;
user_pref(“SystemPreference1”) = “MyValue”;
user_pref(“SystemPreference2”) = “MyValue”;
user_pref(“SystemPreference3”) = “MyValue”;
user_pref(“SystemPreference4”) = “MyValue”;
Then you can just add the new entry to the bottom, like this:
user_pref(“browser.throbber.url”) = “http://www.hackingfirefox.com/”;
user_pref(“SystemPreference1”) = “MyValue”;
user_pref(“SystemPreference2”) = “MyValue”;
user_pref(“SystemPreference3”) = “MyValue”;
user_pref(“SystemPreference4”) = “MyValue”;
user_pref(“browser.throbber.url”) = “http://www.mrtech.com/”;
When Firefox initially reads in the prefs.js it sets the browser.throbber.url preference equal to http://www.hackingfirefox.com/. Then it continues parsing the additional entries and finds that browser.throbber.url preference value is now equal to http://www.mrtech.com/, so the earlier value is negated.When Firefox shuts down, it writes a single row for each preference with the latest value; in this case, browser.throbber.url is equal to http://www
.mrtech.com/. Future startups will not mention the http://www.hackingfirefox.com/ site again.
 

› Hacking the user.js File

The user.js file is very much like the prefs.js file in format and functionality. The key difference is that the user.js file is used to set or reset preferences to a default value. Upon restarting the browser, the user.js settings supersede the stored values of the prefs.js file. The user.js file is static and does not get manipulated by Firefox; it is used only to set or reset values in the prefs.js file. So, using this file you can easily deploy a common set of hacks to all users in an organization or to your friends. The user.js file is not initially created with the default profile settings and must be created when needed. For example, if I had five computers on which I wanted to synchronize some basic Firefox preferences, I would create one user.js file and add entries such as the following:
// Set link for Throbber icon click
user_pref(“browser.throbber.url”) = “http://www.mrtech.com/”;
// Turn on Find As You Type (FAYT)
user_pref(“accessibility.typeaheadfind”, true);
//Autostart FAYT
user_pref(“accessibility.typeaheadfind.autostart”, true);
// Search all text with FAYT
user_pref(“accessibility.typeaheadfind.linksonly”, false);
// Set FAYT Timeout in Milliseconds
user_pref(“accessibility.typeaheadfind.timeout”, 3000);
Once the user.js file is created, I can close Firefox and copy the file to the profile directory on each computer. The next time and every time the browser is loaded after that, these settings will supersede the values that are stored in the prefs.js file, even if the user manually changed the prefs.js, used about:config, or changed the preferences in the Tools➪Options menu. Making preference changes that conflict with values in the user.js within a browsing works only for the remainder of the time the browser is opened; closing and relaunching Firefox forces the user.js settings to be reapplied. A key thing to remember is that removing values from the user.js file will not automatically remove them for the prefs.js; you must do this manually Therefore, if you want to reset or remove a preference you should include a line with the original default value in the user.js, as follows:
user_pref(“SystemPreference”) = “DefaultValue”;
Or, optionally, you should make sure that the values are completely reset, close Firefox, and remove the setting from both the user.js and the prefs.js files.While theoretically you can use the user.js file as a one-time feature to set values, I have always been concerned with thirdparty tools or extensions tapping into specific preferences. For this reason, I always collect my defaults and have the user.js apply these defaults each time. This way, I am assured that my settings and preferences are strictly adhered to and applied every time I start up Firefox.
 

› Hacking Browser and Web Page Content

This section explains how to modify the browser’s interface and manipulate content. The userChrome.css and userContent.css are Cascading Style Sheet files that use specific rules to manipulate many visual aspects of the browsing experience. Some aspects include menu or webpage font sizes, spacing around toolbar icons or web page images, and hiding menus or menu options or other screen elements. The userChrome.css file is used to manipulate the Firefox interface, while userContent.css is used to manipulate actual web pages.
Hacking the userChrome.css File
This section gives you a fundamental understanding of how to use userChrome.css to modify your browser’s appearance. Examples that are more advanced and more details on how to modify this file appear in coming chapters. The userChrome.css file is located in the chrome subdirectory of your profile; on default or new builds, this file does not exist. A sample file called userChrome-example.css comes with new installations of Firefox and contains some basic examples.To test the examples in this section, you can edit the userChrome-example.css file and copy it into the chrome directory in your profile folder as userChrome.css. The userChrome.css file is really a Cascading Style Sheet (CSS), very much like those that you use for normal HTML web pages.Where a style sheet on a web page usually modifies visual
elements of the page, such as graphics, colors, placement, and so on, the userChrome.css file modifies visual elements of the entire Firefox interface, what we like to call chrome.
How is this possible? you may ask.Well, this is just one of the many fundamental differences between the Mozilla base code and other browsers, let alone other development platforms. Since shortly after Netscape began the Mozilla project, the Mozilla has aimed to create core low-level components with top-layer user interfaces that are cross-platform compatible. This cross-platform focus spawned the ability to create a customizable and extensible user interface. This customizable user interface initiative led to the creation of Mozilla’s XML User Interface Language (XUL), as well as CSS support for interface and dialog presentation. Later chapters dig into the browser’s user interface model and dissect a few of the key screens. To continue with a simple example, assume that we know that the id or name for the throbber
icon is throbber-box. Now that we have that, you can change the display property of this element to either hide it or to change its visual properties, such as space padding and so on. To hide the throbber on the browser chrome, the entry in the userChrome.css file would look like this:
#throbber-box {
display: none !important;
}
When you restart the browser, you will notice that the throbber is gone. Using common CSS techniques, the default style of the throbber box has been overwritten to change its presentation.
This next example changes some of the properties around the throbber box instead of hiding it. The basic properties we will modify are border, margins, and padding.Where the border is drawn around the object, padding is added within the boundaries of the border, and margins are added outside the border boundaries:
#throbber-box {
border: 1px solid BLUE !important;
padding-left: 5px !important;
padding-right: 5px !important;
margin-left: 20px !important;
margin-right: 20px !important;
}
Additionally, let’s increase the width of the search bar by adding the following code:
#search-container, #searchbar {
-moz-box-flex: 300 !important;
}
This change just about doubles the current width of the search bar for easier viewing of long search strings.
Figure 2-4 shows Firefox without customizations.

FIGURE 2-4: Plain throbber in top-right corner

Figure 2-5 shows Firefox with throbber and search-bar customizations.

FIGURE 2-5: Throbber with border, spacing, and margin customizations, and wider search bar

What you should notice is a blue 1-pixel border around the throbber, with 5 pixels of padding space to the left and right inside the border, and 20 pixels of margin spacing outside the border. Additionally, the search bar is now wider and will resize dynamically if the window becomes smaller. The properties that are included here are standard Cascading Style Sheet properties.
Hacking the userContent.css File
Much like userChrome.css, the userContent.css file uses CSS standards to allow you to manipulate properties. The key difference is that userContent.css alters the style or layout of the webpage content instead of user interface elements. The userChrome.css file is also located in the chrome subdirectory of the profile, and a sample userChrome-example.css file is included with new profiles.To test the examples in this section, you can edit the userContent-example.css file and copy it into the chrome directory in your profile folder as userContent.css. Later in the book, you see how to use the userContent.css file to block unwanted advertisements. This section includes a basic example of how to manipulate the browser’s content to show a red dashed border around links that target a new window. The changes applied in this example modify web page links with targets of _new and _blank. These targets tell the browser to open a new window with the content from the link when clicked.
 The syntax for this customization is much like that of the previous userChrome.css example:
/* Put dashed red border around links that open a new window */
:link[target=”_blank”], :link[target=”_new”],
:visited[target=”_blank”], :visited[target=”_new”] {
border: thin dashed red;
padding: 2px !important;
}

Both the border and padding property should look familiar and behave the same as in the previous example. The key difference here is that the intended object is a link that has a target of either _blank or _new. Notice the dashed borders (they will appear red on your screen) around links on the page shown in Figure 2-6.

FIGURE 2-6: Customizations applied by userContent.css to a page

Alternatively, you can split the style, one for a normal link and one for a visited link, where the
visited link would have a different-colored border, in this case blue:
/* Put dashed red border around links that open a new window */
:link[target=”_blank”], :link[target=”_new”] {
border: thin dashed red;
padding: 2px !important;
}
/* Put dashed blue border around visited links that open a new
window */
:visited[target=”_blank”], :visited[target=”_new”]{
border: thin dashed blue;
padding: 2px !important;
}
 

› Basic Hacking with Extensions

Using extensions can lead to some of your best hacking. The concept of extensions is straightforward, and the availability and diversity of extensions are incredible. The extensions discussed in this section have excellent features and each is briefly covered with references to the key features that will help you in hacking your browser experience.While hacking extensions themselves is covered in Chapter 3, this section covers basic extensions that you can use to hack preferences, settings, and the Firefox interface. The chromEdit extension is best suited for editing the user.js, userChrome.css, and userContent.css files, while Configuration Mania and Preferential extensions are great tools for tweaking preferences and settings. These extensions are tried and true and have become indispensable tools in my everyday hacking.
Hacking with the chromEdit Extension
When working with the four key files that Firefox uses for customization, you may quickly find it an annoyance to have to browse over to a separate editor and then load up the file you need. Whether it is the userChrome.css, userContent.css, or user.js file, chromEdit gives you an editing environment right in a browser window (see Figure 2-7). The chromeEdit extension creates a multitab window with editing capabilities for each, except prefs.js, which is available only in this screen in read-only mode. Because the prefs.js file is overwritten when you close your browser, it really does not make sense for this editor to allow modifications to the file while the browser is open. It does let you view it, though, so you can reference existing preferences that are already set in the file.

FIGURE 2-7: The chromEdit window with edit tabs

Hacking with the Configuration Mania Extension
The Configuration Mania extension allows you to tweak several of the preferences that are not available via the standard Preferences screen (see Figure 2-8). Given the incredible flexibility of Firefox, this tool really comes in handy when you need to change the low-level settings to improve performance, usability, or navigation, or for development purposes. Each section has several options, which are categorized by the following:
_ Browser
_ HTTP Network
_ Chrome Uninstaller
_ Mouse Wheel
_ Keyboard Navigation
_ Master Password
_ Debug
This extension is a good way to get around having to find preference names and values to tweak your browser and can be used to get your feet wet with hacking Firefox preferences and tweaking hidden settings.

FIGURE 2-8: Configuration Mania window with several tweaking and hacking options

Hacking with the Preferential Extension
The Preferential extension, while dated, offers an incredibly easy interface to view all current and available preferences in a hierarchical mode, as shown in Figure 2-9. Once the interface has been opened and after each of the categories has been populated, you can peruse each setting by expanding and collapsing each key in the hierarchy. Preferential creates a hierarchical view based on the groupings and separation of preferences by the period(s) in the preference name. Preferential builds a hierarchy tree where, for example, browser.throbber.url would have a top hierarchy level of browser, a subhierarchy level of browser.throbber, and one property of browser.throbber.url, as shown in Figure 2-10. The number of levels is driven by the number of period-separated values in the preference name. So a preference such as font.default would have one level only, font, and a preference such as sessionsaver.static.default.cookies would have a hierarchy tree of three levels: sessionsaver, then sessionsaver.static, and then sessionsaver. static.default. The final level would be the value of sessionsaver.static.default.cookies.

FIGURE 2-9: Preferential window with top-level browser tree expanded
One great benefit of this extension is that it can show you a description for many of the common preferences. However, because the extension is not actively being maintained, some descriptions may be blank. Another great feature is that you can delete a preference tree without having to search through files or other dialogs. All you have to do is click on the tree level that you want to remove and then right-click and delete.To accomplish this with about:config, you would have to reset each individual setting. For example, suppose you just installed the Session Saver extension and after using it realized that you really didn’t want it, so you uninstalled it.While uninstalling removes the files and the extension information from your profile, it does not remove your customized settings from your prefs.js file.Typically, you would have to close Firefox, open the prefs.js file, remove the sessionsaver entries, save the file, and relaunch Firefox. Optionally, you could open the about:config tool from the main browser window, apply a filter of “sessionsaver,” and then right-click and reset each value, which for this extension could total over 30 entries. Using Preferential you avoid all this; you quickly peruse your setting and just delete the top-level hierarchy of sessionsaver, and all 30+ settings would be removed without your having to restart Firefox or reset each value.
When launching this extension (by choosing Tools➪Advanced Preferences . . .) you see the progress dialog showing you the status as it populates the whole tree.

FIGURE 2-10: Preferential window with top-level “browser.throbber” tree expanded

To edit the preference, just right-click and choose Edit Selected from the context menu. Most interface preferences changes take effect on restart; although some should be available immediately.