Extending and customizing Firefox

I've been using Firefox for a long long time, even before it got its official name and was simply known as Phoenix.

Favorite extensions

This is the list of what I currently use with Firefox, and it ranges from the essential stuff (such as AdblockPlus) to more specific stuff (such as web development). Give them a try.

  1. AdblockPlus [essential]
    Probably the best reason ever to use Firefox
  2. ColorZilla [developer]
    Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
  3. ContextSearch [essential]
    Expands the context menu's 'Search for' item into a list of search engines.
  4. FEBE [essential]
     Backup your Firefox data
  5. Firebug [essential/developer]
    Web Development Evolved. I can't imagine my daily job without it.
  6. Firecookie [developer]
    Cookie manager for Firebug.
  7. Fission [other]
    Progress bar in the address bar (Safari style).
  8. FlashGot [essential]
    Download manager integration.
  9. GmailManager [essential]
    Gmail accounts management and new mail notifications.
  10. HtmlValidator [developer]
    Adds HTML validation to the View Page Source of the browser.
  11. ImageZoom [other]
    Adds zoom functionality for images. Nice if you want to show or hide images on-the-fly.
  12. Omnibar [essential]
    Integrates search bar to the location bar. Pretty sure it's going to be implemented in the not-too-distant future.
  13. PersonalMenu [other]
    Create your own menu and save more space. I got rid of the menu bar this way. Yay more space!
  14. Stay-OpenMenu [other]
    Facilitates opening multiple items from the Bookmarks Menu and various other bookmark-related dropdown menus. Almost mandatory if you use PersonalMenu.
  15. TwitterFox [essential]
    This extension lets you know twitter statuses and post from it. It also shorten URLs automatically.
  16. WebDeveloper [developer]
    Adds a menu and a toolbar with various web developer tools. Still a great tool, but Firebug is better.

Customizing

Another hidden, more subtle feature of Firefox is that its interface is like a huge XML file, and it can be customized as such. By adding some lines in a special file we can achieve neat stuff and replicate things only possible with extensions. This file is called userchrome.css, and it must be created (via any text editor, like Notepad) and saved inside the chrome folder of the Firefox user profile folder (usually: C:\Documents and Settings\name\Application Data\Mozilla\Firefox\Profiles\profilename\chrome under XP). These are some lines that can change the apperance of the browser:

/* remove Go and Search button */
#go-button-stack { display: none !important;}
.search-go-button-stack { display: none !important;}
#search-container {margin-right: 3px !important;}

/* removes text on the Bookmarks toolbar, icons closer*/
#personal-bookmarks .toolbarbutton-text {display:none !important}
#personal-bookmarks .toolbarbutton-icon {margin:0 1px 0 0 !important}
#personal-bookmarks toolbarbutton {margin:0 1px 0 0 !important;padding:0 1px !important} /* smaller extensions list */
#extensionsView richlistitem[selected=true] {background-image: none !important;}
#extensionsView richlistitem:not([selected=true]) .addonIcon {height: 16px !important; width: 16px !important;}
#extensionsView richlistitem:not([selected=true]) .addon-description {display: none !important;}

/* active tab color*/
.tabbrowser-tab[selected="true"] > hbox,
.tabbrowser-tab[selected="true"] > .tab-close-button {background-color: #3B5F9F !important;color: #fff !important;}
.tabbrowser-tab[selected="true"]:hover > hbox,
.tabbrowser-tab[selected="true"]:hover > .tab-close-button {background-color: #3B5F9F !important;color: #fff !important;}
.tabs-bottom {background-color: #3B5F9F !important;}

To see them in action, save the file, close and restart the browser.
Many other snippets are available at userstyles.org.

back to the features section