You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
5.1 KiB
120 lines
5.1 KiB
--- |
|
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. |
|
|
|
|
|
|
|
|
|
|
|
|