--- 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%); } ``` 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; } ``` ## 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.