Userscripts with Tampermonkey — Automate Any Website with JavaScript

What is Tampermonkey?

Tampermonkey is a free browser extension that runs your own JavaScript on any website you choose. Once installed, you write a userscript — a JavaScript file with a special metadata header — and Tampermonkey automatically injects and runs it whenever you visit a matching URL.

Unlike Chrome Extensions, userscripts need no manifest.json, no packaging, and no store review. Write the script, save it, and it runs immediately.

The Userscript Metadata Header

Every userscript starts with a comment block that tells Tampermonkey how to run it:

// ==UserScript==
// @name         My First Userscript
// @match        https://example.com/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
  'use strict';
  // Your code goes here
})();

The @match field controls which pages the script runs on — it supports wildcards like *://*.example.com/* to match all subdomains.

Building Auto Dark Mode

This script forces dark mode on every website you visit using the CSS invert technique:

function applyDarkMode() {
  const style = document.createElement('style');
  style.textContent = `
    html { filter: invert(1) hue-rotate(180deg) !important; }
    img, video, picture { filter: invert(1) hue-rotate(180deg) !important; }
  `;
  document.documentElement.appendChild(style);
}

// GM_setValue/GM_getValue persist across ALL websites — unlike localStorage
GM_registerMenuCommand('Toggle Dark Mode', () => {
  const enabled = !GM_getValue('dark_mode_enabled', true);
  GM_setValue('dark_mode_enabled', enabled);
  if (enabled) applyDarkMode();
});

Building a Page Cleaner

Automatically hide cookie banners, popups, and ad containers — and keep watching for ones that load late:

const SELECTORS_TO_HIDE = [
  '[class*="cookie-banner"]',
  '[class*="newsletter-popup"]',
  '[class*="ad-container"]',
];

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

cleanPage();

// MutationObserver catches popups that load a few seconds after the page
const observer = new MutationObserver(() => cleanPage());
observer.observe(document.body, { childList: true, subtree: true });

Building an Auto Form Filler

Saves repetitive form values and auto-fills them on future visits:

document.addEventListener('input', (e) => {
  const name = (e.target.name || '').toLowerCase();
  if (name.includes('email')) {
    GM_setValue('saved_email', e.target.value);
  }
});

// On page load, fill empty fields with saved data
document.querySelectorAll('input[type="email"]').forEach(field => {
  if (!field.value) {
    field.value = GM_getValue('saved_email', '');
  }
});

This is a preview. The full ebook includes complete code for all 4 userscripts, a Link Opener that opens all matching links in background tabs using GM_openInTab, and a guide on sharing your userscripts via GitHub raw URLs.

Why Userscripts Are Powerful

A single userscript can run on thousands of websites you visit — automatically, forever, with no manual installation per site. They are the fastest way to fix annoyances or add missing features to websites you don't control.