Skip to content
This repository has been archived by the owner on Mar 11, 2024. It is now read-only.
/ joof Public archive

๐ŸŒŽ๐Ÿ’จ Add custom JavaScript or CSS to any webpage

License

Notifications You must be signed in to change notification settings

mikker/joof

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

74 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation


๐Ÿšจ Joof is no longer maintained in this form.
Instead it lives on as a native Mac app at Sprinkles.app


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