A personal Brave/Chrome extension that applies per-website CSS overrides and JS fixes. The goal is a single extension that houses all site-specific tweaks — narrower layouts, hidden annoyances, behavioral fixes — organized so that each site is isolated and adding a new one is trivial.
This is a Manifest V3 extension using declarative content scripts. Each site gets:
- A directory under
sites/named after its hostname (e.g.,sites/news.ycombinator.com/) - A
styles.cssand/orfix.jsinside that directory - A corresponding
content_scriptsentry inmanifest.json
A background service worker (background.js) powers the toolbar toggle button. A shared toggle.js content script is injected into every site to enable/disable overrides without removing the extension.
All CSS selectors are prefixed with html:not(.chrome-hacks-off) so the toggle script can disable them by adding a class to <html>.
- Create
sites/<hostname>/withstyles.cssand/orfix.js - Prefix all CSS selectors with
html:not(.chrome-hacks-off)so the toggle works - Add an entry to the
content_scriptsarray inmanifest.json:Include{ "matches": ["*://<hostname>/*"], "css": ["sites/<hostname>/styles.css"], "js": ["toggle.js"], "run_at": "document_start" }"sites/<hostname>/fix.js"in thejsarray if the site needs JS fixes. - Reload the extension in
brave://extensions
Click the extension icon in the toolbar to toggle all overrides on/off. An "OFF" badge appears on the icon when disabled. State persists across browser restarts.
- Clone this repo
- Open
brave://extensions(orchrome://extensions) - Enable Developer mode (toggle in the top-right corner)
- Click Load unpacked and select the repo directory
- The extension is now active — navigate to a supported site to verify
