Creating and publishing a Greasy Fork script

January 29th 2021 GreasyFork JavaScript

I've been using a couple of GreasyFork scripts with Tampermonkey Firefox extension for a while. Only recently has a missing feature on a web page bothered me enough to consider creating a user script myself.

The community-maintained documentation is rather brief and not updated too often. But since user scripts are mostly just additional JavaScript running in the context of the web page, there isn't much to learn that's specific to user scripts. The most important part is the script header with meta keys describing the script and specifying when it's going to be activated:

// ==UserScript==
// @name         Copy TrueGaming achievement list
// @namespace
// @version      1.0.0
// @description  Copies the achievements/trophies from the True Achievements...
// @author       Damir Arh
// @license      MIT
// @supportURL
// @match*/achievements*
// @grant        none
// ==/UserScript==

In my case, most of the code was inspecting the DOM using the querySelector and querySelectorAll methods:

const filterDropdownTitleElement = document.querySelector(
  "#btnFlagFilter_Options .title"

I used unobtrusive JavaScript principles to add interaction to the page, i.e. I handle events using the addEventListener method:

const copyAnchor = document.createElement("a");
copyAnchor.setAttribute("href", "#");
copyAnchor.setAttribute("title", iconLabel); = "0";
copyAnchor.addEventListener("click", copyToClipboard);

A basic development environment is provided by the Tampermonkey extension. You can open it via the Add a new script... menu command:

Add a new user script in Tampermonkey

When you save the script for the first time, it appears in its Installed userscripts list. You can open it in the built-in editor from there to modify it at a later time:

Installed userscripts in Tampermonkey

Although the editor is decent, I prefer Visual Studio Code for writing JavaScript. Even without TypeScript types, it can provide great code completion and help for methods used. This makes writing code a lot easier. And it even helped me notice a couple of mistakes in my code without running it.

Admittedly, this approach adds some overhead to testing the script. Instead of simply saving it, I have to copy and paste it to the Tampermonkey editor and save it there. I found a Stackoverflow answer with instructions for loading the script in Tampermonkey directly from the file system but I couldn't get it to work. Despite that, for me the benefits of using Visual Studio Code overweigh the inconvenience of having to copy the script to test it.

Publishing a script on GreasyFork is just a matter of filling out a simple form. If you host your script on GitHub (or another Git host), the process is even simpler as you can import it from there. To automate updates, you can even set up a web hook.

You can check the script I've written in my GitHub repository. Of course, the code is very specific to the problem I was solving. Still, the general approach will be useful in other scenarios as well.

The key takeaway is that it isn't difficult to write a user script if you have some basic knowledge of writing JavaScript for the browser. It's much simpler to do than writing a standalone browser extension.

If you're looking for online one-on-one mentorship on a related topic, you can find me on Codementor.
If you need a team of experienced software engineers to help you with a project, contact us at Razum.
Creative Commons License