Making Firefox the browser to rule them all

2020-04-04

We spend a lot of time these days in a browser. Given that , I thought it might be worth sharing some of the changes I have made to my browser. I use Firefox with a very select few extensions. As a general rule, I don’t like extensions, although there are a couple of open source ones that I run, as well as a few I have made myself.

Since using Qutebrowser, I have loved having the ability to browse the web from my keyboard. There are times that I use the mouse, but they are rare now. Until recently, I was using a fork of Vim Vixen. This fork didn’t do much more than change the colour scheme and I added the ability to set a proxy server using it. However, I have recently been experimenting with Tridactyl. I plan to write a blog post about it in the near future but if you are looking for a browser plugin to give you Vim-like navigation, both Vim-Vixen and Tridactyl are excellent choices.

I think it is fair to say that Tridactyl does more, that isn’t always a benefit though. A tool with fewer features is far less likely to contain serious bugs. However, for me, the ability to easily call external scripts was enough to make the switch.

Custom Stylesheets

Almost all websites are dark text on a light background. I like a dark background with light text. There are a lot of plugins that add dark mode, and a lot that allow you to use custom stylesheets. However, none of the ones I looked at allowed me to easily keep a repository of stylesheets locally.

I decided I would write a very simple extension that adds stylesheets to web pages. I then just use the extension manifest file to specify which stylesheets should be loaded and when:

    "content_scripts": [
        {
            "matches": ["*://*.archlinux.org/*"],
            "css": [ "css/archwiki.css" ],
            "run_at": "document_start"
        },
        {
            "matches": ["*://*.amazon.com/*","*://*.amazon.co.uk/*"],
            "css": [ "css/amazon.css" ],
            "run_at": "document_start"
        },
        {
            "matches": ["*://*.bbc.com/*","*://*.bbc.co.uk/*"],
            "css": [ "css/bbc.css" ],
            "run_at": "document_start"
        },
        "...":"..."
    ]

This makes it very easy to version control and maintain, and means I am not putting my trust in a plugin maintainer.

I also have a default stylesheet that I load on web pages that don’t have custom stylesheet applied to them. It is not perfect but it is simple and works well enough 90% of the time.

@import "./gruvbox-colours.less";

html{
    background: #fff - @gb-dm-bg0;
    filter: invert(100%);
}

body{
    background: #fff - @gb-dm-bg0;
}

img,svg,video{
    filter: invert(100%);
}

#vimvixen-console-frame{
    filter: invert(100%);
}

#cmdline_iframe{
    filter: invert(100%);
}

https://git.jonathanh.co.uk/jab2870/browser-overides/src/branch/master/less/global.less

It is quite simple. I set the background of the html and body elements to the inverse of the colour I like ( in this case a gruvbox dark colour ), then inverse everything. This works well for most things. I then invert again images and videos which makes them the colour they should be.

This is not a perfect solution, a notable problem is that background images appear inverted. For me though, it is good enough. If a website really doesn’t work well with this applied, I can simply disable the extension.

Full screen

Since using Qutebrowser and Surf, I have liked having minimal browser interfaces. Since Tridactyl or VimVixen mean that I very rarely need to touch the top bar, I would prefer not to have it (or at least not see it). Fortunately, if you enable the toolkit.legacyUserProfileCustomizations.stylesheet flag, you can customize the look of the browser using CSS.

To enable the flag:

Open about:config
Set toolkit.legacyUserProfileCustomizations.stylesheets to True
Restart Firefox

You can then create a file called userChrome.css

Open about:support
Click on Profile Folder -> Open Folder
Create a sub-folder named chrome
Change into the new folder
Create a file named userChrome.css

Now, you can add styles to the userChrome.css file to alter how Firefox looks.

The following will hide the url bar and the tabs, until you move your mouse to the top of the screen.

/* hides the url bar unless I hover over it */
#navigator-toolbox {
    margin-top: -72px;
    transition: 0.2s margin-top ease-out;
    border-bottom-width: 0;
}
#navigator-toolbox:hover {
    margin-top: 0;
}

https://git.jonathanh.co.uk/jab2870/Dotfiles/src/branch/master/NOSTOW/firefox/userChrome.css#L18-L25

Other extensions

I only use 2 other extensions, those are HTTPS Everywhere and Privacy Badger, both are built by the EFF and I think are essential in my ongoing effort to be tracked as little as possible.

Making Firefox the browser to rule them all

Vim Navigation

Custom Stylesheets

Full screen

Other extensions