jab2870/Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Website updates

Browse source
This commit is contained in:
Jonathan Hodgson 2020-04-04 14:16:37 +01:00
parent 41fe56cf13
commit 44e710a464
9 changed files with 252 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

120
content/blog/005-keyboard-driven-firefox.md Normal file
View file

@ -0,0 +1,120 @@
---
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 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](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.