joof

Add custom JavaScript or CSS to any webpage

Usage no npm install needed!

<script type="module">
  import joof from 'https://cdn.skypack.dev/joof';
</script>

README

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.

Installation

$ npm install -g joof
$ joof setup

This will …

  1. Create the ~/.joof directory
  2. Install the daemon as a macOS service running on https://localhost:3131
  3. Accept a self-signed certificate to allow https requests from localhost
  4. Install the Safari extension

Chrome 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.

Usage

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); }
PapayaHub

When visiting github.com joof will look for 3 files in ~/.joof:

  1. global.js
  2. github.com.js
  3. github.com.css

Limitations

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.

License

MIT