CSS Variable Inspector Panel

WHAT IT DOES

CSS Variable Inspector Panel helps you understand and manage CSS custom properties on any webpage. The script extracts all CSS variables (--custom-properties) from inline styles, style tags, and external stylesheets, displaying them in a hierarchical panel with variable names, values, and computed colors with visual swatches. Each variable shows its usage count and whether it's inherited or defined locally. Unused variables are highlighted so you can clean up your CSS. You can edit variable values in real-time by clicking on a variable—the change is applied immediately to the page, allowing you to preview design changes instantly. Color variables include a color swatch showing the computed color value. The panel supports search and filtering by variable name, used/unused status, or color variables. You can export all variable definitions as CSS for documentation or reuse.

WHERE IT RUNS

This script runs on every website (matching all URLs), inspecting CSS variables across the entire web. It works on any page that uses CSS custom properties—modern websites, design systems, component libraries, and more. The script automatically adapts to each page and handles both static and dynamically injected styles.

HOW TO USE

After installing through the BotGentz extension, the CSS Variable Inspector appears on any page. Use the configuration panel to customize your experience: show or hide unused variables, show or hide inheritance indicators, show or hide color swatches, and enable or disable auto-open on page load. The panel displays real-time statistics including total variables, used/unused counts, and color variable count. Use the search box to filter variables by name or value, and use the filter dropdown to show all, used, unused, or color variables only. Click any variable value to edit it—the page updates instantly. Use the "Inspect Variables" button to rescan the page, or "Export as CSS" to copy all variable definitions to your clipboard.

COMPREHENSIVE CSS VARIABLE EXTRACTION WITH REAL-TIME EDITING AND USAGE TRACKING

This script implements a CSS variable extraction engine using multiple strategies. The engine scans style tags for variable declarations using regex pattern matching, iterates through stylesheet rules to extract declared variables, and reads computed styles on the root element for inherited values. Usage tracking scans all DOM elements' computed styles to determine which variables are actually used on the page. The inheritance detection identifies variables that are defined in multiple locations and shows the inheritance chain. The real-time editing engine uses element.style.setProperty() to apply changes instantly, with undo support via value prompts. The export engine generates a formatted CSS block with all variable definitions. The color swatch engine uses temporary element rendering to compute actual color values from any CSS color format.

THE PANEL

The configuration panel is fully draggable and remembers its position per-site using GM_setValue. It snaps to screen edges when dragged near them, collapses to a compact bubble when minimized, and supports Escape key for quick collapse. All settings—including unused variable display, inheritance display, color swatches, and auto-open—are persisted across sessions.

PLEASE NOTE

This script requires the free BotGentz extension to run. The script runs on all websites and reads CSS styles to extract variables. It does not capture, store, or transmit any personal information. All data is stored locally in your browser using GM_setValue and never transmitted to external servers. Editing variables only affects the current page session—changes are not saved to the source CSS files. This tool is designed to help developers understand and debug CSS custom properties and is provided for informational and development purposes only.