Website/content/blog/005-keyboard-driven-firefox.md

title	date	description	tags
Making Firefox the browser to rule them all	2020-04-04	So much of what we do these days is in a browser, so I thought it would be worth while taking some time to optimize / customize by browser	[Firefox]

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.

Vim Navigation

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 more 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:

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

You can then create a file called userChrome.css

1. Open about:support
2. Click on Profile Folder -> Open Folder
3. Create a sub-folder named chrome
4. Change into the new folder
5. 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.