Modding the Web
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:
- GreaseMonkey the original of the bunch. Apparently it's now somewhat outdated and development is slow. Saw multiple mentions to the latest version being feature-lacking, but also couldn't find anything to support that.
- TamperMonkey the most popular by far. Seemed nice overall, but is closed-source which kills my interest.
- ViolentMonkey a newer open-source plugin. Interface was quite nice, and for non-Firefox browsers this would probably be my choice, but more on that below.
There were also a few Userstyles plugins:
- Stylish the original, but has gone close-source into some kind of freemium model or something? I remember people being upset when this happened a few years ago.
- Stylus open-source version of Stylish that continues where it's predecessor left off.
But in my surfing and searching I found a winner: FireMonkey.
- Supports both Userscripts AND Userstyles
- From a reputable developer
- Frequently updated
- Uses the Firefox user-scripts API
- Nice interface
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
I've been using it to do a number of things already
- Redirect various websites that I don't like (Twitter, Reddit) to lighter-weight alternatives
- Add buttons to websites that redirect to searches, like a button on Steam that opens IsThereAnyDeal.
- Create shortcuts for DuckDuckGo
- Force misbehaving websites into their light-modes
The possibilities are really endless, and I've barely even touched using Userstyles yet.
Writing and Debugging
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.
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== ; ; template.innerHTML = ` <a href="https://isthereanydeal.com/search?q= " class="btnv6_blue_hoverfade btn_medium" target="_blank"> <span>IsThereAnyDeal</span> </a> `; ".apphub_OtherSiteInfo"template.content.firstChild;