Custom CSS Injector

WHAT IT DOES

Custom CSS Injector is a browser extension that allows you to inject custom CSS styles into any webpage with live preview and per-site persistence. You can write CSS rules in a built-in textarea and see changes applied immediately as you type. The tool supports multiple named style sets, so you can save different styles for different purposes, and includes a toggle to enable or disable styles without losing your work. Quick snippet buttons let you apply common styles like dark mode, ad removal, clean fonts, big text, and focus mode with a single click. The tool is ideal for developers testing CSS changes, users customizing website appearance, accessibility improvements, and anyone who wants to override default styles on web pages.

WHERE IT RUNS

Custom CSS Injector runs on any webpage, overlaying a floating panel that does not interfere with page content. It operates entirely in your browser as a lightweight userscript, injecting a style element into the page head. It works on any page, whether static or dynamic, with no external dependencies. All CSS data is stored locally using GM_setValue—no data is ever sent to any server.

HOW TO USE

After installation, open the floating panel by clicking the extension icon. The panel displays a textarea where you can write custom CSS rules. As you type, the styles are applied to the page in real time—you'll see changes immediately. Use the "Enable CSS" toggle to turn styles on and off without deleting your code. The style set selector lets you switch between multiple named style sets—save different styles for different use cases. Click the + button to create a new set, and the ✕ button to delete the current set. Click the "Apply CSS" button to refresh the style application, and "Reset" to clear the current set to default. Use the Quick Snippets buttons to quickly apply popular styles like dark mode, remove ads, clean fonts, big text, and focus mode. All changes are saved automatically per website.

REAL MECHANISM — WHY THIS WORKS

Most CSS injection tools require browser extensions with permission to access all pages, but Custom CSS Injector works as a lightweight userscript that creates and manages a style element in the document head. When the user types CSS rules into the textarea, an input event handler captures the text and updates the style element's textContent property. This applies the CSS immediately because the browser re-evaluates the style element contents instantly. The tool uses per-site persistence by storing CSS data in GM_setValue with a key based on the current hostname. When the page loads, the tool retrieves the saved CSS for that site and applies it. Multiple style sets are stored as a JSON object within the same storage key, allowing users to maintain multiple style variations. The toggle uses a simple boolean flag to either apply the CSS (set styleElement.textContent to the CSS text) or disable it (set styleElement.textContent to an empty string). This approach ensures fast, real-time CSS injection with full persistence across pages, without requiring any external services or network access.

THE PANEL

The floating panel is fully draggable and remembers its position per site, snapping to the edges of the viewport when dragged near them. You can collapse the panel to a small icon to minimize screen distraction and expand it back with a single click. The panel is resizable from the bottom-right corner, giving you more space to view and edit CSS. Press the Escape key to close the panel instantly. The panel remains open across page navigation within the same domain, maintaining your current view state. All preferences—panel position and all CSS styles—are saved per domain for a seamless experience.

PLEASE NOTE

Custom CSS Injector requires the free BotGentz extension to be installed and enabled, as it relies on the cross-extension messaging API provided by BotGentz for DOM access permissions. The tool injects CSS into the page head and does not modify the page's original CSS files. Styles are applied using the !important flag as needed to override existing styles. All CSS data is stored locally in your browser using GM_setValue. No CSS code, page content, or usage data is ever sent to any server. The extension does not read, store, or transmit any personal information. It only injects and stores CSS locally at your request.