I need to give you a bit a background so you can see what my priorities are when setting up my favorite browser. I am a computer programmer that deals with web stuff as well as back-end stuff. I am NOT a designer in general, mostly a coder. I am running Firefox 3 beta 5 (not RC1 yet) since it is compatible with almost all of my extensions.

Step 1: My Theme

NASA Night Launch – This has little effect on my productivity but I get asked about this more than anything else. I like the cool blackness and the fact that this theme is Firefox 3 compatible.

Step 2: Get Extensions

• Adblock Filterset.G Updater – Update ad killer
• Adblock Plus – Kill ads
• All-in-One Sidebar – Really, really slick sidebar
• Delicious Bookmarks – I use del.icio.us for bookmarking everything so having this is a must. I basically switched to FF3 once this extension was compatible.
• DOM Inspector – For all those tricky userChrome.css questions you give me ;)
• Firebug 1.2 Beta – In case you haven’t heard there is a new beta with some more cool features!
• Firecookie 0.5beta – Firebug extension that is now essential for cookie debugging
• FireGestures – Simple mouse gestures extension. Compatible with FF3 unlike many others
• Fission – Not a productivity enhancer, just cool to put my progress bar behind my address bar like Safari
• Keyconfig – Configure everything to be a simple key command away! OK, you got me, the latest keyconfig is not compatible with FF3b5. Wait, what’s this I made for you?
• Web Developer – Another staple for anyone doing web development work.
• XUL/Migemo – Enhances search by allowing regex search with nice highlighting. Way better than I can describe in this one-liner.
• YSlow – Web performance analytics tool that works through Firebug. Another must-have.

I also plan on using this extension when they are compatible with Firefox 3:

• Google Browser Sync – Sync history, bookmarks, cookies, etc. across my many Firefox instances.

Step 3: Menu & Interface Customization

I right click and customize my top toolbar by dragging the back, forward, etc. buttons to the top, as well as the address bar and the search bar. I remove pretty much everything else and am left with only the Menu Bar and the Web Developer Toolbar on top.

I first configure All-in-One Sidebar by making basically everything except "Page Source" open in the sidebar. I leave the hotkeys at their default values and enable the thin sidebar switch. I put a few buttons for things on my sidebar but really I use hotkeys to access everything on the sidebar. Ctrl-B gets me my searchable del.icio.us bookmarks, Ctrl-H for searchable history etc. More on that in Step 7

Last but not least, my status bar with Firebug, YSlow and Greasemonkey sits on the bottom. I also use the XUL/Migemo extension to freshen up my search, allowing it to use regular expressions and highlighting the text just like Safari. A lot of you have specific questions about this, so keep ‘em coming by contacting me.

Step 4: userChrome.css

You have probably already seen most of my userChrome.css file posted in a couple earlier posts, you can just grab the file I use here (Right-click to Save Link As…). Here are instructions just in case ;)

Step 5: userContent.css

I am not going to post the thousands of lines of code in my userContent.css file, but you can download my personal userContent.css here (Right-click to Save Link As…). Allow me to give you the important bits – the titles are pretty self-explanatory:

• Digg.com – Dark gray design
• GMail Redesigned
• Dark Gray Google
• about:blank – Dark Firefox

Just like editing userChrome.css, and instructions are here.

Step 6: about:config

You might be surprised to learn that I don’t use all of the about:config entries that I have posted. Let’s go through the ones I DO use:

browser.cache.disk.capacity » 150000
browser.cache.offline.capacity » 20480
browser.download.manager.closeWhenDone » true
browser.search.openintab » true
browser.tabs.loadDivertedInBackground » true
browser.tabs.opentabfor.middleclick » false
browser.urlbar.hideGoButton » true
browser.urlbar.maxRichResults » 5
network.http.pipelining » true
network.http.proxy.pipelining » true
zoom.maxPercent » 400

I seem to remember there being more that I used with Firefox 2 but Firefox 3s interface just suits my needs more so I don’t have to do so much :)

Step 7: Special bookmarks

Lifehacker provided me with some really cool chrome bookmarks that I use to quickly get to pretty much any Firefox setting quickly. Let me give you some examples: Ctrl-L goes to the URL bar, then I type "opt" to access Firefox options. Similarly, I can type "gmonkey" to access my greasemonkey scripts. You can also set this up yourself to access Live HTTP Headers and friends. Cool, huh?

Step 8: Hotkeys etc.

The point of many of these tweaks is to make everything available with few keystrokes. Of course, I set hotkeys for pretty much everything. Another really important part of my setup is bookmark keywords. I use this alongside del.icio.us to make my browsing super-efficient. When you hit Ctrl-D to enter a bookmark, make sure you have a short "keyword" so that you only have to type "g" and hit Enter to go to Google.

Use all these things and I think you will be a master web browser. What do you do to optimize your browsing? Which extensions? Let’s hear it!