Joof.app

🌍 Add custom JavaScript or CSS to any webpage in any browser.

👩‍💻 Edit scripts using your editor of choice.

🥞 It's like UserScripts or Stylish — but portable and bundled into one.

🖥 Safari support built-in, extension available for Google Chrome and Firefox.

1.

Say you've always wanted GitHub's source font to be a little bigger, its Octocat rotated and just be generally creamier.

Well, your dream can come true.

Whenever you visit a domain, say github.com, Joof.app looks for and adds 4 files:

  • global.js
  • global.css
  • github.com.js
  • github.com.css
github.com.css
/* Bump code font size */
.blob-code-inner, .blob-num { font-size: 16px; }

/* Flip that logo */
svg[class*='octicon-mark-github'] {
  transform: rotate(180deg);
}

/* Add some cream to it */
body { background-color: papayawhip }

2.

Why is this cool? Well, suddenly we can change just about any website. Missing functionality? Fonts getting you down? Just change them!

I have for example this snippet ⬇️ ⬅️ in my global.js that let's me reset all fonts to the system default with ctrlalts.

People can take their ugly, unreadable fonts and stick 'em!

global.js
document.addEventListener("keyup", event => {
  if (event.keyCode === 83 &&
      event.ctrlKey && event.altKey) {
    const s = document.createElement("style");
    s.innerHTML = `
      * {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
      }
      p {
        font-weight: 400 !important;
        max-width: 40rem;
        line-height: 1.5;
      }
      pre, code, pre * {
        font-family: 'SF Mono', 'Menlo', monospace !important;
      }
    `;
    document.body.appendChild(s);
  }
});

3.

How does it work? Joof.app has a few moving parts to make this happen.

It runs a tiny webserver in the background, serving the scripts and styles via https to a browser extension that evals them.

Extensions available for Safari, Firefox and Google Chrome. Write your scripts once, bring them to all the browsers.

Interested?

Joof.app is still getting ready for its first release — but you can try it now if you aren't scared away by words like beta or experimental. (I use it all day, every day.)

Sign up to download the beta and get updates on development. No spam, of course.