~ / blog / modding-the-web

Modding the Web

2022-02-02 | 5 min | 870 words

I've known for a while that browser plugins for Userscripts and Userstyles exist and have some really dedicated fans, but I never really saw the point and didn't give them a fair shake for a long time. After seeing a Hacker News comment about redirecting Arxiv to an HTML variant that mentioned using Userscripts, I decided to give it a try for the first time in many years.

Though I immediately hit a hurdle: There are several Userscripts plugins, and a few different Userstyles plugins as well...

Picking a Plugin

Since I am using Firefox I just sort of browsed around AMO and looked up comparison threads. Here's what I basically came up with:

There were also a few Userstyles plugins:

But in my surfing and searching I found a winner: FireMonkey.

It seems notably less popular than many of the other options, which is a shame since it's been nothing but great so far! Only supports Firefox because it uses a specific API, but that's not really a problem for me.

The Fun Starts

OK, now that we're back on track the actual fun begins. Userscripts allow you to run arbitrary JS on any page, Userstyles do the same for CSS. First you define a meta-data block with the pages the script should run on, and then an JavaScript that you want. This means that with FireMoneky you can basically do... anything. You can completely re-write the looks and functionality of any web-page you want.

I've been using it to do a number of things already

The possibilities are really endless, and I've barely even touched using Userstyles yet.

Writing and Debugging

Since you can write and debug Userscripts right in the browser, the process is actually really fun. Using inspect-element to find the right place, nab style classes so your additions match, and debug errors immediately is a great feedback loop. It really kinda highlights how nice browser tools are these days, and how pleasant writing vanilla JavaScript can be.

Since FireMonkey uses the user-script API built into Firefox, you can even inspect and set breakpoints right in your script without touching the JS on the page itself (though FireMonkey does give you this option as well).

The Real Magic is in your Head

As a developer I know that the web is malleable, that I have the sources and structure and that they're running on my machine where I can edit them. But you still end up treating web pages as published artifacts, static things that you have no control over.

That's the real beauty and fun of Userscripts/styles. You can re-take the web, mod it and bend it to your will. Add features that the site's developers never will because it goes against what they want, or because only you care.

Exempli Gratia

A great example of a feature that the site itself will never add is a button on Steam that links to the game on IsThereAnyDeal so that you can compare prices. Below is the code and a picture of the button on the Steam page. All my other Userscripts can be found in the repo here if you'd like to take a look, feel free to take ones you like as well!

// ==UserScript==
// @name             Steam IsThereAnyDeal
// @match            https://store.steampowered.com/app/*
// @version          1.0
// @grant            none
// @run-at           document-end
// ==/UserScript==

const title = encodeURI(document.getElementById("appHubAppName").innerText);

const template = document.createElement("template");
template.innerHTML = `
  <a href="https://isthereanydeal.com/search?q=${title}" class="btnv6_blue_hoverfade btn_medium" target="_blank">
    <span>IsThereAnyDeal</span>
  </a>
`.trim();

document.querySelector(".apphub_OtherSiteInfo").appendChild(template.content.firstChild);

 A Screenshot of Steam with the IsThereAnyDeal button