Userscript Experiments

Additional features & usability across the web

Information

My passion project through the majority of 2017–18 was the development of custom userscripts to streamline my web browsing experience. At the same time, I took it as an opportunity to move away from using jQuery and begin focusing on writing vanilla JavaScript, as ES6 was quickly improving the front-end development landscape.

Once accustomed to plain JavaScript, I began experimenting with CoffeeScript and found that the terse, Pythonic language structure increased my enjoyment of the development process, much as Pug had done while developing Blackie Mini Storage. On the other hand, it also complicated my workflow, requiring Node and Gulp to generate the .user.js file, which I now use as a basis for many projects.

In 2018, I came across TypeScript which—while much less fun to write than CoffeeScript—was far more widespread, used professionally, and promoted better coding practices, prompting me to switch. Since I was already using Node/Gulp in my CoffeeScript workflow, transitioning to TypeScript wasn't a large step.

Unfortunately, documentation for userscripts is sparse and outdated at best, so I've been forced to develop my own custom workflows and create atypical solutions to problems that could otherwise be easily-solved with access to the source code. As I plan on developing many more userscripts in the future, I created a Typescript Userscript Builder that allows a userscript project to be set up quickly and painlessly. It includes TypeScript & Sass, automatic timestamping/version incrementing, build/watch/release commands, easy metadata configuration, and other helpful features.

The first and largest userscripting project I've undertaken is a complex script for a small, private hobby community. The script—which is used by many dozens of people—inserts its own settings page, adds buttons, tweaks layouts, filters messages, and fixes small bugs. An example based off an earlier version of the script (compiled from CoffeeScript) is linked below. I've also contributed to some scripts that link books/movies on database sites to others, or created scripts simply for my own day-to-day use.

Technologies

The userscripts are tested in Chrome & Firefox using both Tampermonkey and Violentmonkey, but will likely work in any modern web browser since ES6 support is now commonplace. The scripts are loaded into Violentmonkey in Chrome during development to take advantage of how Violentmonkey auto-refreshes the script as changes are made.

The scripts typically use Git for version control or Greasyfork for hosting, depending on their scopes and needs.

Userscript Builder Demo Script

Screenshots

CoffeeScript vs JavaScript example