How to use Userscripts

In this blog post, we’ll explore the magic of userscripts and Chrome extensions, comparing their differences so that you can better manage your web surfing experience.

What Are Userscripts?

Userscripts are small pieces of JavaScript (JS) code that allow you to modify the functionality or appearance of websites on the fly.

To run userscripts, you need a browser extension like Violentmonkey or Tampermonkey, which acts as a “manager” for your scripts. These tools inject the JS code into the pages you visit.

For example, here’s some example code for a Grayscale toggle¹.



    // ==UserScript==
    // @name         Grayscale Toggle with Persistence
    // @namespace    http://tampermonkey.net/
    // @version      1.1
    // @description  Toggles grayscale on the webpage with Alt+G and remembers the state
    // @author       Drewby123
    // @match        *://*/*
    // @grant        none
    // @license      MIT
    // ==/UserScript==
     
    (function() {
        'use strict';
     
        const STORAGE_KEY = 'grayscaleToggleState';
     
        // Retrieve and apply the saved grayscale state on page load
        let isGrayscale = localStorage.getItem(STORAGE_KEY) === 'true';
        document.body.style.filter = isGrayscale ? 'grayscale(100%)' : 'none';
     
        // Listen for the Alt+G key combination to toggle grayscale
        document.addEventListener('keydown', (e) => {
            if (e.altKey && e.key.toLowerCase() === 'g') {
                isGrayscale = !isGrayscale;
                document.body.style.filter = isGrayscale ? 'grayscale(100%)' : 'none';
     
                // Save the current state to localStorage
                localStorage.setItem(STORAGE_KEY, isGrayscale);
            }
        });
    })();

What Are Chrome Extensions?

Chrome extensions are basically the same thing but for Chrome.

Unlike userscripts, they’re distributed through the Chrome Web Store and require installation before they can be used.

Key Differences: Userscripts vs Chrome Extensions

1. Ease of Use & Setup

Userscripts: Setting up userscripts requires a bit more technical know-how. You need to install a script manager like Tampermonkey or Greasemonkey (both FOSS²) and find/write a script.
Chrome Extensions: Extensions are much easier for most users to install and use. Simply visit the Chrome Web Store, find the extension you want, and click “Add to Chrome.”

2. Customization and Flexibility

Userscripts: Userscripts offer a high degree of customization. If you know JS, you can write scripts to modify almost any aspect of a webpage. This gives users ultimate control, but it also requires a certain level of coding knowledge.
Chrome Extensions: Extensions can be very powerful, but they have to work within the sandboxed environment of the browser. While they can do more than userscripts (e.g., interact with the browser itself), their customization is often more rigid because of the way they are packaged and distributed.

When to Use Userscripts

You only need to make small, specific tweaks to websites (e.g., hiding elements, modifying layouts).
You prefer a lightweight solution that doesn’t affect the entire browser.

When to Use Chrome Extensions

You want to add more complex functionality to the browser, such as toolbars, context menus, or deep integrations with browser data.
You need something that works across multiple websites or tabs seamlessly.

Conclusion

In the end, both userscripts and Chrome extensions have their unique advantages, and the choice between the two depends on your needs. Firefox also has their own extension store³.

drew's blog