https://github.com/mikker/joof

🌎💨 Add custom JavaScript or CSS to any webpage
https://github.com/mikker/joof

browser-extension css customization dotfiles js nodejs safari-extension

Last synced: about 2 months ago
JSON representation

🌎💨 Add custom JavaScript or CSS to any webpage

• Host: GitHub
• URL: https://github.com/mikker/joof
• Owner: mikker
• License: mit
• Archived: true
• Created: 2017-07-04T10:45:58.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-11T20:26:32.000Z (6 months ago)
• Last Synced: 2024-07-13T04:23:49.360Z (2 months ago)
• Topics: browser-extension, css, customization, dotfiles, js, nodejs, safari-extension
• Language: JavaScript
• Homepage:
• Size: 168 KB
• Stars: 26
• Watchers: 3
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        




  

  

  

  



 


---

🚨 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](https://github.com/defunkt/dotjs) it's because it is. It's the exact same idea, just maintained and with added support for CSS files.

## Installation

```sh

$ 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](https://github.com/mikker/joof/raw/master/ext/chrome.crx). 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`:

```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`:

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