Firefox Quantum was recently released, with claims of being faster, sleeker, and better in general. At the time of release, I was an avid user of Qutebrowser, and really happy with it. However, seeing the new Firefox release was pretty exciting, I was finding Qutebrowser a bit on the slow side at times, and though I love the extensive keybindings in Qutebrowser, I was finding some got in the way of general web browsing and were impossible to configure on a per site basis (I believe this has improved now; who knows, my next post might be about using Qutebrowser again!). Long story short, I switched to Firefox 57 and immediately loved it. It was as fast and as sleek as advertised.

Now Firefox has always been known for being very customisable, but with the Quantum release came the end of the deep customisation previously available. Goodbye vimperator cry. Good news though: webextensions and native messaging exist, and there are heaps of useful extensions to make web browsing great again!

Now for the purpose of this post, how to make a vanilla Firefox look like this:

customised firefox screenshot

(Plus a heap of things under the hood.) I’ll describe my current config, addons, and other customisations, along with why I’ve made those choices. This isn’t really a tutorial, but rather a description of a bunch of cool things. Hopefully it will be useful to someone looking for tips and ideas.

Addons

Ok, let’s start with addons. My criteria for an addon are:

  • open source
  • do one thing well
  • provide a useful function that I couldn’t otherwise efficiently do

For convenience, all these addons are in my favourites list on the Mozilla addons site. Now to discuss the addons I use, in alphabetical order:

Bookmarklets context menu

Useful for managing bookmarklets - I keep all my bookmarklets in a sub directory of the main bookmarks root. The addon automatically finds all the bookmarklets, and lets you run one by selecting from a context menu list.

cliget

Interesting little tool to be able to ‘replay’ a download from the commandline. Gives you a copyable curl command which will send exactly the same information the browser did, allowing scenarious such as downloading protected files from the command line on a remote server. I find I don’t need to use it much, but it’s there and highly convenient when I need it.

Useful addon for privacy and tracking protection. Automatically deletes cookies based on rules. Whitelist sites you want to stay logged into, and it will autodelete the rest after a configurable time after closing a tab.

This is great, because it doesn’t block cookies (which often breaks things), but removes them afterwards so that sites can’t track you across sessions.

Download Star

Basically, this is like DownThemAll!, but a webextension version. (Recall that the non-webextension addons are no longer compatible.) It has a minimal interface that takes a little while to learn but is very efficient.

Firefox Multi-Account Containers

A frontend to the multi-account containers feature in Firefox. Awesome for privacy and partitioning web browsing. I keep separate containers for certain social media sites so I can stay logged in, but avoid the possibility of tracking elsewhere on the web.

It can also be useful for web development, to have a clean container where you are not logged in to a web site for testing, but stay logged on in another container.

Greasemonkey

A userscript manager. Pretty essential if you like userscripts for those extra tweaks on certain websites.

Note: there are other userscript managers. Tampermonkey is a popular one, which is no longer open source (a deal breaker for me). Violentmonkey seems to be a newer addition with a more polished UI and fancy features. It sounds like a worthy alternative that I’ll probably be trying out soon. Links:

NoScript

Basically a configurable javascript blocker. I installed this after running into too many sites where javascript made the page much worse…

uMatrix is a powerful alternative, but a bit too overwhelming for me. It takes a lot just to make each site unbreak. I only really want basic protection from malicious scripts and dodgy sites that want to bombard you with popups.

PassFF

Now this is an interesting, niche addon. It provides firefox integration for a pass compatible password manager. Very configurable and can autosign in to sites (though I disable that to avoid possibility of a password getting leaked to a malicious site), manage http basic auth, and heaps of other functions.

It relies on a host application (passff-host) installed on the computer, with a configuration file to set up native messaging. This allows it to interface directly with the pass application and local password store on your computer.

Proxy SwitchyOmega

A proxy switcher addon. Works manually and/or with per-site rules. Clean UI, does one thing and does it well. I switched to this after the original FoxyProxy was no longer compatible, and I highly recommend it.

Random User-Agent

In my quest to reduce my browser’s fingerprint as much as possible, I came across this gem. Configure it with a list of useragents (it has built-in ones to select as well), and it will randomise it every few minutes (also customisable). The browser still has a fingerprint, but at least part of the fingerprint keeps changing. Confuse the enemy!

Search by Image

Provides a context menu to quickly perform a reverse search for an image on a webpage. Simple, efficient.

Smart Referer

Hides the referer when changing domains. A nice little privacy addon that doesn’t break sites that use the referer for some reason.

Stylus

A userstyles manager. Powerful and doesn’t track you (as far as I’m aware). I switched to it from Stylish recently due to Stylish being involved in tracking and other possible dodginess behind the scenes.

Userstyles are pretty essential for making some sites look sane. I like dark themes, so install dark themes for as many websites as possible. For example, the screenshot at the beginning of this article shows GitHub with the GitHub Dark userstyle, which is beautiful!

Note: it’s possible to manage userstyles with a userscript manager, but I prefer to let each addon do what it does best.

A very simple addon that lets you double click on a url in plain text to open it. Much easier than copy/pasting or selecting the url, right clicking, and choosing ‘open’.

Tree Style Tab

A 100% essential addon! Let’s use the spare space on the side of the screen to organise all the tabs! So many advantages, and it looks gorgeous!

After installing this, it’s also essential to disable the default tab bar on the top - the process is described further down in this post.

uBlock Origin

The only adblocker I trust. No “accepted ads”, no shady deals in the background, just pure adblocking at its best.

Be sure to go through the settings - it also has some useful privacy tools such as blocking csp reports, and select the adblock lists you want.

Sidenote: if you don’t like ads, but want to support content creators and websites, consider purchasing paid subscriptions or donating. Everyone wins!

Unpaywall

Useful extension that searches for an open access version for a scholarly article when visiting that article’s page on a journal website. Don’t pay journals for articles that researchers want to provide freely! Support open access!

Wallabagger

An addon for saving pages to Wallabag, an open source Pocket alternative.

I also recommend disabling the Pocket integration in Firefox if you don’t use it: go to about:config and turn off extensions.pocket.enabled.

Wayback Machine

This is a very nice polished addon that searches the Internet Archive whenever you hit a 404 and provides the link to click if it’s in the archive. I stopped using it because there was no way to disable the automatic search - I don’t want to leak every 404 url to the Internet Archive! I currently using a bookmarklet to open the current url in the archive. However, it is a great addon for making it quicker to find a dead page in the archive if you don’t mind sacrificing a bit of privacy. (Maybe someone can add a config item to fix privacy issues?)

Zotero Connector

One click save page to Zotero, the reference manager. This was awesome during research for my thesis. Zotero along with Archive.org were awesome, and hopefully the subject of a future blog post!

Note that this requires Zotero running locally on your computer for best saving results (it can save direct to online, but I think it’s less accurate with the metadata scraping).

Addons conclusion

Phew, that’s it for the addons I use! I didn’t realize how many there were until I started to write about them! Maybe I should try to cut down on addons, but the truth is that they all just make web browsing so much nicer - web browsers are now basically operating systems, so why not make full use of them!

It also should be noted that there are hundreds of other high quality addons available - this is just my carefully curated list arrived at after several months of heavy use. There have been other good addons I’ve used but I haven’t found them essential and they’ve been dropped. Go ahead and explore the Mozilla addons site and see what you find!

UI customisation

about:preferences

Ok, now for configuring the UI itself! Much of the config can be done directly from the preferences page - best is to trawl through everything and set everything just right. Important settings I look for here include:

  • default fonts (yes this is important)
  • default search engine (DuckDuckGo!)
  • block third party cookies
  • tracking protection
  • firefox account sync

Customize

Clicking the Customize button in the main menu puts the browser into customise mode where you can drag and drop to customise the toolbar and change the theme (the new built-in dark theme is perfect). The toolbar customisation allows you to hide addon buttons that don’t need to be displayed, add other shortcuts to the toolbar, and order everything how you like it.

customize mode firefox screenshot

userChrome.css

For the final tweaks, we need to resort to code. Pretty much the entire interface can be controlled with css from the userChrome.css file. This file is located under

$HOME/.mozilla/firefox/<profile>.default/chrome/userChrome.css

It’s usually not there by default and needs to be created. https://www.userchrome.org/ and http://kb.mozillazine.org/index.php?title=UserChrome.css appear to have some further useful information about userChrome.css.

Mine has the following contents:

/* namespace - do not alter */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* hide the native tabbar (we have treestyletab, so no longer required */
#TabsToolbar {
    visibility: collapse !important;
}

/* hide the header for the treestyle tabs sidebar for aesthetics */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

As the comments say, it’s just some tweaks to hide the tab bar and make the treestyle tabs sidebar look nicer.

about:config

Finally, let’s look at some under the hood tweaks that can only be accessed through the about:config page. Be careful poking around here!

As mentioned earlier, the deep Pocket integration can be turned off by setting extensions.pocket.enabled to false.

A security/privacy setting that you may want to enable is privacy.firstparty.isolate. https://superuser.com/questions/1271648/how-to-enable-first-party-isolation-in-firefox has some more information on this and describes what is does better than I can explain it (it’s a cookie isolation thing).

There are heaps of other tweaks if you really want to tweak something that can only be accessed from there. For the most part though, these can be left as default, or be configured through safer means.

Parting notes

Firefox is pretty awesome! smile With a few (ok, many) tweaks, web browsing becomes a lot more enjoyable and safe.

There’s still some more things that would be nice, such as more keyboard control and a faster way to switch tabs; the things that I miss from Qutebrowser. However, at the moment I’m more than content.

As always, if have any feedback or discover any issues on this article, please don’t hesitate to comment below, ping me on Twitter, or contact me. smiley