ThemeForge – Dark, Light & Neon Themes

ThemeForge is a Chrome (Manifest V3) browser extension that applies full-page color themes — Dark, Light, Dim, Cyberpunk/Neon, and a fully Custom palette — to any website instantly. It's a self-contained, zero-dependency, vanilla-JS extension with no build step. What it does Recolors any webpage on the fly by injecting a stylesheet that forces backgrounds, text, borders, links, form controls, and scrollbars to the chosen theme's palette. Ships 5 built-in themes plus a user-defined Custom theme with 8 individually editable colors. Supports two scopes: 🌐 Global — apply one theme to every open tab + all future pages. 📍 This Site — a per-hostname override stored separately, so e.g. github.com can stay Dark while everything else is Light. Persists choices across browser restarts and re-applies on navigation/page load. Architecture The extension has three coordinated parts plus a folder of theme stylesheets: 1. Background service worker — background.js The brain. It owns all CSS injection through the chrome.scripting API (insertCSS / removeCSS), which is the key design decision: scripting-API injection bypasses a page's Content-Security-Policy, where injecting a <link>/<style> into the DOM would be blocked on strict sites. Notable details: Tracks tabId → injected theme file in an in-memory Map, with a fallback that tries removing all known theme files if the worker restarted and lost state. A processingTabs lock set guards against double-injection races — both the content script's restoreTheme and the tabs.onUpdated navigation listener can fire on the same load. Stores per-tab custom-variable CSS in chrome.storage.session so it can be cleanly removed later. Re-applies the resolved theme on every completed navigation, and resolves which theme applies via perSite[host] || globalTheme || 'none'. Handles a message protocol: restoreTheme, applyTheme, applyThemeAllTabs, removeThemeAllTabs, saveTheme, savePerSite, clearAll. 2. Content script — content.js Deliberately minimal (runs at document_start on <all_urls>). It does not inject CSS itself. It only: Asks the background to restore the saved theme for the current URL on load. Answers getTheme queries from the popup by reading the data-themeforge attribute on <html>. 3. Popup UI — popup/ A polished control panel (popup.html, popup.js, popup.css) using Google Fonts (Syne + Space Mono) with a neon-gradient aesthetic. It offers a scope toggle, a 6-card theme grid with live previews, an 8-swatch custom-color editor with live preview, status indicator, toast notifications, and a "Reset All" button. 4. Theme stylesheets — themes/ Each theme keys off the html[data-themeforge="<name>"] attribute selector and defines a set of --tf-* CSS variables, then force-applies them with !important to all elements (while keeping img/video/svg/canvas/iframe backgrounds transparent so media isn't washed out). The Custom theme (custom.css) reads --tf-custom-* variables that the background worker injects dynamically from the user's 8 color pickers, each with sensible fallback defaults.