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:
- Violentmonkey — fully open source
- Tampermonkey — more widely used, partly closed source
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 }); })(); 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; } `); 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'); } }); 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(); }); 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.
