joof allows you to add custom JavaScript or CSS to any webpage.
It does so by injecting .js and .css files in ~/.joof with a browser extension and a tiny webserver running in the background.
Similar extensions can also do this but they will probably make you use some kind of textarea-based in-browser editor like an animal and importing and exporting scripts quickly becomes tedious.
By having our customizations outside the browser in plain files you can use whatever editor you fancy and it's trivial to include them in your dotfiles or sync them with Dropbox or whatever.
If this sounds like dotjs it's because it is. It's the exact same idea, just maintained and with added support for CSS files.
$ npm install -g joof
$ joof setupThis will …
- Create the
~/.joofdirectory - Install the daemon as a macOS service running on
https://localhost:3131 - Accept a self-signed certificate to allow
httpsrequests fromlocalhost - Install the Safari extension
There's also a Chrome extension. Download it here. To complete the installation, open https://localhost:3131 in Chrome and click ADVANCED then Proceed to localhost to accept the self-signed certificate.
Create .js or .css files in ~/.joof with filenames matching the domain of the website you want to spice up.
Eg. for a much more creamy GitHub experience create ~/.joof/github.com.css:
body { background-color: papayawhip }
svg[class*='octicon-mark-github'] { transform: rotate(180deg); }
When visiting github.com joof will look for 3 files in ~/.joof:
global.jsgithub.com.jsgithub.com.css
Some sites have strict(er) Content Security Policies (eg. google.com). Good for them! But it unfortunately means that joof can't inject neither scripts nor styles into them.
MIT