RegexChameleon

RegexChameleon - Multi-Color Regex Highlighter Extension Overview: RegexChameleon is a powerful and intuitive Chrome extension designed for highlighting regular expression matches on any webpage with vivid, multi-color visualization. Developed to assist developers, data analysts, researchers, and anyone working with text patterns, this extension transforms the often abstract process of regex pattern matching into a clear, visual experience directly within the browser. By applying multiple regex rules simultaneously with distinct colors, users can instantly see how different patterns match against the same text, making it invaluable for debugging complex expressions, validating data formats, extracting information, or learning regex syntax. Core Functionality: The extension centers around a flexible regex highlighting system with several key capabilities: 1. Multi-Rule, Multi-Color Highlighting: Unlike basic regex testers that show only one pattern at a time, RegexChameleon allows users to define and apply multiple regex rules simultaneously, each highlighted in a distinct color from a 10-color palette. This enables direct comparison of different patterns on the same text. 2. Real-Time Application and Preview: As users type regex patterns in the extension interface, the extension provides: * Live syntax validation with immediate feedback * Real-time highlighting preview on the current webpage * Dynamic match counting for both saved rules and the pattern being typed * Visual indication of validity through color-coded syntax messages 3. Persistent Rule Management: All defined regex rules are stored locally using the Chrome storage API, allowing users to: * Save complex pattern sets for reuse across browsing sessions * Enable/disable individual rules without losing their configuration * Delete rules they no longer need * Maintain consistent color assignments for pattern recognition 4. Intuitive User Interface: The extension popup features: * A color palette preview showing the next color to be assigned * Dedicated fields for pattern input and flags (like "g", "i", "m") * Real-time syntax checking with helpful error messages * Visual indicators for match counts and rule status * One-click apply and clear functions * Link to the full web application at alahay.org for advanced features 5. Robust Text Processing Engine: The content script implements: * Tree walking to efficiently traverse text nodes in the DOM * Smart filtering to skip irrelevant elements (script, style, textarea, input fields) * Protection against infinite loops from malformed regex patterns * Proper handling of overlapping matches through sequential processing * Preservation of original text structure when clearing highlights Technical Implementation: RegexChameleon utilizes a streamlined architecture focused on performance and usability: - Manifest v3 Configuration: Defines essential permissions (activeTab, scripting, storage), browser action with popup interface, and declares no persistent content scripts (they're injected dynamically as needed) - Dynamic Script Injection: Uses chrome.scripting.executeScript to inject the content.js file only when users actively apply rules, minimizing performance impact - Content Script Logic: The content.js file implements: * A self-invoking function that creates a isolated scope to prevent conflicts * TreeWalker API for efficient text node traversal with appropriate filtering * RegExp object creation with proper flag handling (automatically adds "g" if missing) * DocumentFragment-based DOM manipulation for efficient highlighting * Exposure of applyRules and clearHighlights functions on window.__regexChameleon - Popup Interface: HTML/CSS/JavaScript-based user interface featuring: * Modern design with JetBrains Mono and DM Sans fonts for code readability * Real-time syntax validation using RegExp constructor try/catch * Debounced live preview to prevent excessive processing while typing * Color-coded feedback for valid/invalid patterns * Persistent storage integration via chrome.storage.local API * Badge updates showing total match counts on the extension icon - Storage System: Uses chrome.storage.local to persist: * Array of rule objects containing pattern, flags, enabled status, and assigned color * Automatic color assignment based on rule index in a rotating 10-color palette * Efficient retrieval and updating of rule sets User Experience: When interacting with RegexChameleon, users encounter a fluid workflow: - Initial State: Clean interface with color palette preview, empty rules list, and ready-to-use input fields - Pattern Definition: As users type in the pattern field: * Immediate syntax feedback appears below the input * The preview dot shows the color that would be assigned to a new rule * If the pattern is valid, live highlighting appears on the webpage * Match count updates in real-time showing how many instances were found - Rule Management: Users can: * Click the "+" button or press Enter to save the current pattern as a rule * See saved rules appear in the rules list with their color dots, patterns, flags, and match counts * Toggle rules on/off using the eye icon buttons * Delete rules using the trash can buttons * Observe automatic color preservation when rules are removed (remaining rules keep their assigned colors) - Application Control: Users can: * Click "Apply" to refresh all active rules on the current page * Click "Clear" to remove all highlights from the page * Rely on automatic highlighting when rules are modified (through live preview) - Navigation Features: The interface provides: * Link to the full web application for advanced features * Clear visual indication of extension state through the action bar and match count display * Responsive design that works well at the extension's standard width Privacy and Security: RegexChameleon prioriti…