Hacking Firefox - part 8 ppsx

For extensions, it automatically defaults to an *.xpi file type, and for themes, it defaults to a *.jar file type, making it easier to distinguish those files from others you might have

Trang 1

Originally, I just wanted to mirror for the Extension Manager the Install button functionality that Bradley had created for the Theme Manager Version 1.0 was quickly built and released Since then, File menu, shortcut keys, and international localizations have been added

The basic idea is that you can now choose how you can install local copies of extensions and themes For extensions, it automatically defaults to an *.xpi file type, and for themes, it defaults

to a *.jar file type, making it easier to distinguish those files from others you might have saved

in the same directory

You can download the Local Install extension at http://www.mrtech.com/extensions/

Hacking via userChrome.css

Earlier in this chapter we introduced the manual steps for creating your own style sheets to change the appearance of the main browser windows and supporting screens This section dives into how to use customizations already packaged with some very popular themes

Several themes have subskins, style sheet modifications that are wrapped up into a CSS file,

which is then bundled within the theme’s JAR file Doing this makes certain features optional and allows the themes themselves to be hacked from the userChrome.css

A generic example of a userChrome.css entry that uses a subskin looks like this:

@import url(“chrome://global/skin/subskin/round.css”);

This tells the browser to look for the round.css file in the registry theme’s chrome path of ://global/skin/subskin/

If you switch themes and no round.css file is found, the browser continues without failure Remember that in your userChrome.css file, all @importlines for subskins or other features need to be put above the @namespaceline, if it exists

You have to check each individual theme to see if it has subskins and determine the exact path-and filenames needed to take advantage of the modifications The following sections cover some of the popular themes and some of the available hacks

Hacking Aaron Spuler’s Themes

Aaron Spuler’s collection of themes is by far my most recommended and best-loved collection

of themes under one roof The style and consistency within each theme is something most users will appreciate That coupled with timely updates makes for a great set of themes to adopt

as your primary set

Themes featured on his site include the following:

Apollo

Atlas

Blue

iCandy Junior

Mars

Trang 2

Neptune

Playground

Pluto

Rain

Smoke Two of the several hacks that are available with most of these themes are brushed metal back-ground and Safari-style tabs, as shown in Figure 4-12

F IGURE 4-12: Aaron Spuler’s theme hacks

To apply the brushed metal background hack shown in Figure 4-13, just add the following line

to your userChrome.css, save, and restart Firefox:

@import url(“chrome://global/skin/subskin/brushed.css”);

To apply the Safari-style tabs, add the following line:

@import url(“chrome://global/skin/subskin/safaritabs.css”);

To download or install any of Aaron’s themes, visit http://www.spuler.us/

Trang 3

F IGURE 4-13: Aaron Spuler’s Atlas theme with the brushed background subskin applied

Hacking the Mostly Crystal Theme

Another great theme that can be hacked with subskins is Mostly Crystal Mostly Crystal is based on Crystal SVG (for Linux) icons created by Everaldo (http://www.everaldo com) Several nice features of Mostly Crystal subskins allow for rounded corners, toolbar tweaks, and using menu icons, as shown in Figure 4-14

Here are just some of the great hacks you can apply that are specific to the Mostly Crystal theme, as shown in Figure 4-15:

/* Use SMALL throbber image regardless of toolbar size */

@import url(“chrome://global/skin/subskin/throbber-sm.css”); /* Change the Plain Dropmarkers for address bar and menulists to images */

@import url(“chrome://global/skin/subskin/dropmarker.css”); /* Show icons for menuitems (English only) */

@import url(“chrome://global/skin/subskin/menuitems.css”); /* Use stylized address and search bars */

Trang 4

F IGURE 4-14: Mostly Crystal subskins samples

F 4-15: Mostly Crystal with subskin hacks applied

Trang 5

To download or install the Mostly Crystal theme, visit http://www.tom-cat.com/

mozilla/ firefox.html

Hacking the Phoenity Theme

Phoenity has become my theme of choice for several reasons, but mostly because of its small, simple icons Besides its support for extensions with icon functionality, it boasts support for several other applications and has its own Firefox subskins

These are just some of the multitude of great options that you have with regards to being able

to hack the Phoenity skin, as shown in Figure 4-16

Use this snippet to apply Phoenity icons to the menus:

@import url(“chrome://browser/skin/subskins/cutermenus.css”);

To update the icons used by buttons, add this to the userChrome.css:

@import url(“chrome://browser/skin/subskins/cutebuttons.css”); For smooth, rounded corners around the location and search bars, use this line:

@import url(“chrome://browser/skin/subskins/roundedbars.css”);

To download or install the Phoenity theme, visit http://phoenity.com/firefox.html

F IGURE 4-16: Phoenity theme with subskin hacks applied

Trang 6

Hacking Website Icons

A web site icon or favicon is a 16 ×16 pixel icon that is viewable on the location bar of most browsers; Firefox also has the capability of displaying this icon as the bookmark’s icon This section covers how to make sure that you have favicon support enabled; how to remove it man-ually; and, briefly, how to use the Delete Icons extensions

Enabling Icons for Bookmarks and Websites

By default, Firefox tries to load a site’s favicon to display it on the location bar and as the book-mark’s icon The standard favicon format is an ICO or icon file, but Firefox also supports GIF, JPEG, PNG, MNG, XBM, and BMP formatted icons The default file that Firefox looks for,

if it is not specified in the web page, is favicon.ico on the root of the web server the page is being loaded from

While the default display of icons is 16 ×16 pixels, Firefox resizes icons to display properly in the location bar and bookmarks Additionally, the maximum size for icons to be saved with bookmarks is 16K

Some tweaking extensions allow you to enable or disable the loading of favicons by modifying the following preferences listed My preference is to have both entries in my user.js file to make sure they are always set to my preferred setting of true

user_pref(“browser.chrome.favicons”, true);

user_pref(“browser.chrome.site_icons”, true);

Sites can specify the name and the location for their favicon file with HTML entries such as the following:

In Firefox, favicon.ico can be replaced with any GIF, JPEG, PNG, MNG, XBM, or BMP formatted icon (for example, favicon.gif and so on)

For a web service to create favicons from your own pictures, visit http://www.html-kit com/favicon/

Removing Favicons Manually

While this task seems trivial, it does involve some digging into the bookmarks.html file This file is formatted as a standard HTML file with specific syntax to allow Firefox to parse it prop-erly This file is loaded once on startup and saved when the browser shuts down Special atten-tion should be made to close all Firefox windows before editing it, as all changes will be lost if

Trang 7

Firefox is left open You can use this to your advantage if sites have malformed or corrupt favi-cons, or if the bookmark file becomes corrupt Additionally, if sites update their favicon, the favicon will not get updated in the bookmarks.html file

The bookmarks.html file is located in the root of your profile directory and should be backed up before editing

The bookmark file uses a standard HTML link to store the information for each bookmark with special properties, as illustrated in the following:

Additional properties that are stored within the link tag, if available, include:

LAST_VISIT

LAST_MODIFIED

SHORTCUTURL

ICONor favicon The ICONproperty holds a base64 or text equivalent of the binary icon file that is downloaded from the site Because of this conversion, the ICONproperty’s value is very long A bookmark that contains an icon image will look similar to the following link:

For the sake of keeping the preceding example short, 778 characters were removed where you see SNIPPED in the ICON property of the link

To remove the ICONor favicon, just follow these steps:

1 Close all Firefox windows.

2 Make a backup of bookmarks.html.

3 Load the bookmark file from your profile directory into any text editor, preferably one

with HTML syntax highlighted to make it easier to read

4 Page through or do a search for the offending web address.

5 Scroll over to the ICONproperty for that site and remove all values within the quotes for the ICONproperty, including the ICONtag

Trang 8

The resulting tag should look like this:

<A HREF=”http://www.mozilla.org/products/firefox/central.html”

LAST_CHARSET=”ISO-8859-1” ID=”rdf:#$GvPhC3”>

The next time you visit that link in your bookmarks, the favicon will be fetched again and saved to your bookmarks

Removing Icons with the Delete Icons Extension

If you want to facilitate removing bookmark icons, this is the extension you want to try This extension adds a Delete Icon property to the right-click context menu for bookmarks and a Delete Icons entry to the Tools menu The bookmark option removes just the individual icon that was right-clicked; the Tools menu option can remove all icons and allow you to start over

As a proponent of housecleaning, I like to do a full sweep every now and then, and this exten-sion makes it very easy

To get Delete Icons, visit http://www.gozer.org/mozilla/extensions/

Recommended Themes

I use several criteria used to make theme recommendations, including frequency of updates, extendibility, and version compatibility Keeping themes updated is critical, considering the multitude of options as well as updates that are made to the underlying rendering code The following extensions have historically been very good in maintaining compatibility and provid-ing extended features such as subskins and support for popular extensions:

Atlas:http://www.spuler.us/atlas/

Doodle Plastik and Doodle Classic:http://home.student.uu.se/dana3949/

doodle/

iCandy Junior:http://www.spuler.us/icandyjr/

Lila:http://www.deviantart.com/deviation/12834861/

Mostly Crystal:http://www.tom-cat.com/mozilla/

Noia 2.0 Lite:http://www.deviantart.com/deviation/5706856/

Noia 2.0 eXtreme:http://www.deviantart.com/deviation/12834861/

Phoenity:http://www.phoenity.com/firefox.html

Playground:http://www.spuler.us/playground/

Pluto:http://www.spuler.us/pluto/

Qute:http://quadrone.org/graphics/

Toy Factory:http://www.projectit.com/freestuff.html#toyfactory

Trang 9

This chapter is a good primer for theme development and understanding some of the funda-mentals of how themes work The chapter highlights different approaches to hacking the Firefox user interface with colors, background images, and changing the spacing around icons

It also taps into installing themes remotely and locally, then moves right into applying hacks to themes that support subskins or Cascading Style Sheet modifications Finally, it tackles how to manually hack favicons or website icons, as well as how to hack them with the Delete Icons extensions

Trang 10

Performance,

Security, and

Banner Ads

Chapter 5

Performance Tweaks and Hacks

Chapter 6

Hacking Security and Privacy

Chapter 7

Hacking Banner Ads, Content, Images, and Cookies

part

in this part

Định dạng
Số trang	10
Dung lượng	1,41 MB