I’ve previously written about site-specific CSS in Firefox here, where I used custom CSS to mark visited links on a specific site, but as Firefox for some reason stopped syncing browsing history, also that feature stopped working.
So, I started looking for a Google Chrome solution - which turned out to be easier than expected! Turns out, you just have to create a custom plugin for Chrome and load it.
I created a folder in Google Drive (to sync it between computers), and then created a manifest.json file and a custom CSS file:
{
"manifest_version": 3,
"name": "My Custom CSS",
"version": "1.0",
"content_scripts": [
{
"matches": ["https://url-of-the-website.com/*"],
"css": ["style.css"]
}
]
}The name contains the plugin name that shows up in Chrome, so might want to give that some thought. The matches key contains an array of URLs to match, and the asterisk to match all subpages.
The css key contains the name of the CSS file to load (also located in the same folder).
Then it’s just a matter of writing very specific selectors to override the site CSS, or just use !important (which you of course never should ;)).