Creating and publishing a Greasy Fork script
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 https://damirscorner.com
// @version 1.0.0
// @description Copies the achievements/trophies from the True Achievements...
// @author Damir Arh
// @license MIT
// @supportURL https://github.com/damirarh/GreasyForkScripts
// @match https://www.trueachievements.com/game/*/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);
copyAnchor.style.marginLeft = "0";
copyAnchor.appendChild(copyIcon);
copyAnchor.addEventListener("click", copyToClipboard);
filterDropdownTitleElement.appendChild(copyAnchor);
A basic development environment is provided by the Tampermonkey extension. You can open it via the Add a new script... menu command:
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:
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.
