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

---
title: Making Firefox the browser to rule them all
date: 2020-04-04
description: 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
tags:
  - 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](https://git.jonathanh.co.uk/jab2870/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](https://github.com/tridactyl/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](https://git.jonathanh.co.uk/jab2870/browser-overides) that adds stylesheets to web pages. I then just use the extension manifest file to specify which stylesheets should be loaded and when:

```json
	"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.

```css
@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
1. Set `toolkit.legacyUserProfileCustomizations.stylesheets` to True
1. Restart Firefox

You can then create a file called `userChrome.css`

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

```css
/* 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](https://www.eff.org/https-everywhere) and [Privacy Badger](https://privacybadger.org/), both are built by the [EFF](https://www.eff.org/) and I think are essential in my ongoing effort to be tracked as little as possible.