DEV Community

Weather Clock Dash
Weather Clock Dash

Posted on

Firefox Userscripts with Tampermonkey/Violentmonkey: A Practical Guide

#productivity #firefox #javascript #webdev

Userscripts are JavaScript snippets that run on specific websites. Firefox supports them via the Tampermonkey or Violentmonkey extensions. Here's a practical guide.

What Userscripts Do

A userscript runs after a page loads and can:

  • Modify page content (add/remove/change elements)
  • Inject custom CSS styling
  • Add buttons or functionality
  • Automate repetitive actions
  • Remove annoyances (cookie banners, overlays)

They're like micro-extensions, but easier to write and share as single files.

Setting Up

Install Violentmonkey (open source, recommended) or Tampermonkey from AMO:

Both work similarly. Userscripts are managed via the extension's dashboard.

Your First Userscript

Create a new script in the Violentmonkey dashboard:

// ==UserScript==
// @name         Example: Remove Cookie Banners
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Hide cookie consent banners
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Common cookie banner selectors
    const selectors = [
        '#cookie-notice', '.cookie-banner', '#gdpr-consent',
        '[id*="cookie"]', '[class*="cookie-notice"]'
    ];

    function hideBanners() {
        selectors.forEach(selector => {
            document.querySelectorAll(selector).forEach(el => {
                el.style.display = 'none';
            });
        });
    }

    // Run on load and on DOM changes
    hideBanners();
    const observer = new MutationObserver(hideBanners);
    observer.observe(document.body, { childList: true, subtree: true });
})();
Enter fullscreen mode Exit fullscreen mode

The // ==UserScript== block is the metadata header. Key fields:

  • @match — which URLs to run on (supports wildcards)
  • @run-at — when to run: document-start, document-end (default), document-idle
  • @grant — API permissions (GM_xmlhttpRequest, GM_getValue, etc.)

Useful Userscript Examples

Force Dark Mode on a Specific Site 

// @match        *://docs.example.com/*
// @run-at       document-start

GM_addStyle(`
body { background: #1a1a1a !important; color: #e0e0e0 !important; }
a { color: #7ec8e3 !important; }
pre, code { background: #2a2a2a !important; }
`);
Enter fullscreen mode Exit fullscreen mode

This uses GM_addStyle (requires @grant GM_addStyle) to inject CSS. Simpler than a dark mode extension for sites you visit regularly.

Open External Links in New Tab 

// @match        *://*/*
document.querySelectorAll('a[href^="http"]').forEach(link => {
    if (!link.hostname.includes(window.location.hostname)) {
        link.setAttribute('target', '_blank');
        link.setAttribute('rel', 'noopener');
    }
});
Enter fullscreen mode Exit fullscreen mode

Auto-Dismiss Cookie Banners via Accept Button 

// @match        *://*/*
// @run-at       document-idle
const acceptSelectors = [
    'button[id*="accept"]', 'button[class*="accept"]',
    'button[aria-label*="accept cookies"]'
];
acceptSelectors.forEach(sel => {
    const btn = document.querySelector(sel);
    if (btn) btn.click();
});
Enter fullscreen mode Exit fullscreen mode

Finding Existing Userscripts

Greasy Fork (greasyfork.org) — the main userscript repository. Scripts for most major sites. Check review counts and dates before installing.

Security note: userscripts run with full access to page content. Only install from sources you trust, and read the code before installing anything that touches sensitive data.

Userscripts vs Extensions

Feature Userscript Browser Extension
Ease of creation Easy (single JS file) Moderate (manifest, popup, etc.)
Cross-browser Works in any browser with Tampermonkey Separate builds/reviews
Distribution Greasy Fork or file share AMO, Chrome Web Store
Storage GM_getValue/GM_setValue browser.storage
Power Limited to page content Full browser API access
Security review None AMO reviews code

For site-specific tweaks, userscripts are faster. For full browser integrations, proper extensions are better.

Developer Use Case

Userscripts are useful for:

  • Adding keyboard shortcuts to internal tools
  • Reformatting API responses in browser
  • Auto-filling test forms with dummy data
  • Adding "open in IDE" links to GitHub files

Combined with Tab Manager & Session Saver for managing development tool tabs alongside your regular browsing, you can build a focused developer environment.

Top comments (0)