Environment Variable Highlighter in Code Blocks

WHAT IT DOES This script automatically scans code blocks, configuration files, and text content for environment variable patterns and highlights them with color-coded categories. It detects variables in various formats including $VAR, ${VAR}, %VAR%, and {{VAR}}, then categorizes them as System, User, Secret, Path, or Custom variables. Each category has a distinct color—blue for system, green for user, red for secrets, amber for paths, and purple for custom variables. A floating badge shows the total count of variables found, and clicking it opens the settings panel. You can copy all variable names to your clipboard, toggle highlight visibility, and configure which categories to highlight. WHERE IT RUNS The script works on any page containing code blocks, configuration files, or environment variable listings—documentation sites, GitHub repositories, configuration guides, .env file examples, tutorial pages, blog posts, and any page with code snippets. It scans pre, code, and config container elements, as well as plain text nodes that contain environment variable patterns. HOW TO USE After installation, the script automatically scans and highlights environment variables on page load. A badge appears showing the total count. Open the panel to customize settings: toggle auto-highlight on or off, show/hide the count badge, enable or disable specific categories (system, user, secret, path, custom), add custom variable names (comma-separated), choose badge position, and set custom colors for each category. Use "Scan & Highlight" to manually trigger a scan, "Copy Variables" to copy all variable names to your clipboard, and "Toggle Highlights" to show or hide highlights. Hover over any highlighted variable to see its category in a tooltip. TECHNICAL MECHANISM The script uses a multi-stage variable detection and highlighting pipeline. First, it scans the DOM for code containers using a comprehensive set of selectors including pre, code, .code, .highlight, .source-code, .config, .env, and common config file extensions. Second, it walks text nodes within these containers using a TreeWalker, filtering out script and style elements. Third, it applies regex patterns for each category—system variables (HOME, PATH, SHELL), user variables (USERNAME, EMAIL, GITHUB_*), secret variables (API_KEY, PASSWORD, TOKEN), path variables (*_DIR, *_PATH, *_HOME), and custom patterns from user input. Fourth, it builds a map of unique variable names to avoid duplicate highlighting within the same block. Fifth, it replaces matches with styled `` elements with background colors, border colors, and tooltips showing the category. Sixth, it aggregates counts by category and updates the badge and statistics panel. THE PANEL The settings panel is fully draggable and can be positioned anywhere on your screen. It automatically snaps to the nearest edge when released, keeping your workspace organized. The panel can be collapsed to a small bubble showing only a gear icon, and restored with a single click. Its position is remembered across page reloads using GM_setValue. The panel also responds to the Escape key, which instantly hides it until you click the bubble again. All settings are saved immediately when changed and persist across browser sessions. PLEASE NOTE This script requires the free BotGentz extension to run. Variable detection relies on regex patterns and may not catch all environment variable formats. The script does not access, store, or transmit any personal data or browsing history. All scanning and highlighting happens locally in your browser and never leaves your device.