Table Row Highlighter

WHAT IT DOES

Table Row Highlighter is a floating panel that adds customizable row highlighting to any table on the current page. Select a table from a list of automatically detected tables and choose a highlight color—the panel applies hover effects (background color change on mouseover), click-to-sticky highlighting (keep a row highlighted after clicking), zebra striping (alternating row colors), and search-based highlighting (highlight rows matching a search term) individually or in combination. You can toggle each mode independently to suit your workflow, and all preferences are automatically persisted per domain. The panel also includes a search input that instantly highlights rows containing the search term as you type. You can copy your current highlight settings as a CSS snippet or insert them directly into any editable field on the page (input, textarea, or contenteditable). Perfect for data analysts reviewing tables, QA engineers tracking test cases, project managers scanning status reports, or anyone who needs visual cues to quickly navigate and interpret tabular data.

WHERE IT RUNS

The panel overlays any website that loads the BotGentz extension—whether you're on a data dashboard, a CRM, a project management tool, an admin panel, a spreadsheet view, or any other web page. It works on all modern Chromium‑based browsers (Chrome, Edge, Brave, Arc) and Firefox. The script injects a self‑contained UI element that does not interfere with the host page's layout, styles, or JavaScript execution. It runs client‑side only, with no external API calls or cloud dependencies.

HOW TO USE

After installing the free BotGentz extension, visit any page and click the extension icon to activate the panel. The first time you use Table Row Highlighter, it will appear as a draggable widget near the bottom‑right corner of your viewport. To highlight rows:

- Select a table from the dropdown menu. The panel automatically detects all tables on the page.

- Choose a highlight color using the color input (hex values supported).

- Toggle the desired modes: Hover highlight (background change on mouseover), Click to sticky highlight (click a row to keep it highlighted), Zebra striping (alternating row colors), and Search highlight (highlight rows matching a search term).

- If Search highlight is enabled, enter a search term in the search input field—matching rows are highlighted instantly.

- Click "Apply Highlighting" to activate the selected modes on the table.

- Click "Clear Highlighting" to remove all highlights and reset row colors.

To use the settings:

- Click "Copy Highlight Settings" to copy the current configuration as JSON.

- Click "Insert Settings into Active Field" to paste the settings into the focused editable field.

The panel remembers your table selection, color, and mode preferences across sessions.

MULTI-MODE ROW HIGHLIGHTING ENGINE WITH STICKY STATE MANAGEMENT

Unlike simple CSS-only highlighters, this panel uses a multi-mode row highlighting engine that manages row states independently while allowing modes to coexist. The engine maintains a per-row state object that tracks sticky highlighting, search matches, and zebra striping. When multiple modes are active, the engine applies them in priority order: sticky (click) highlight takes precedence over search highlight, which takes precedence over zebra striping. Each mode uses semi-transparent overlay colors (20%, 40%, 50%, and 100% opacity) to create layered effects without completely obscuring the original row background. The search highlight is updated on every keystroke using an input event listener, providing instant feedback as the user types. The click-to-sticky mode uses a toggle mechanism—clicking a highlighted row removes its sticky highlight, while clicking an unhighlighted row clears all sticky highlights and applies a new one. The engine also stores the original background color of each row before applying any highlighting, enabling clean removal when highlights are cleared. All settings are serialized to JSON and persisted via GM_setValue, with automatic restoration on page reload.

THE PANEL

- Drag: Click and hold the panel's header bar to move it anywhere on the screen.

- Per‑site position: The panel stores its last position separately for each domain using the browser's localStorage, keyed by hostname.

- Snap: When dragged near any edge of the viewport, the panel snaps to that edge with a 16px margin for a clean, docked feel.

- Collapse: Click the "−" button in the header to collapse the panel to a compact title bar, preserving all current values. Click "+" to expand it back.

- Resize: Drag the bottom‑right corner handle to resize the panel from 280px to 600px wide and 200px to 500px tall; the layout adapts responsively.

- Escape: Press the Escape key while the panel is focused to close it entirely (you can reopen it from the extension toolbar).

PLEASE NOTE

This script requires the free BotGentz extension to run—it is not a standalone bookmarklet or user script. Websites frequently update their DOM structures and security policies; while we strive to keep the panel functional across thousands of sites, occasional updates may be needed. The highlighter performs all operations entirely in your browser—no data is sent to any server, and no cookies or tracking identifiers are used. Your highlight settings and preferences remain private to your local session and are persisted only via GM_setValue (the extension's local storage) for convenience, not shared across devices or sessions. The search highlight is case‑insensitive and matches substrings within cell content. Tables with complex structures (e.g., merged cells, nested tables) may produce inconsistent highlighting; the tool works best with standard table layouts. When click-to-sticky is enabled, it may interfere with other click events on the table—use it on tables where row selection is the primary interaction.