Vocabulary Word Highlighter and Save

WHAT IT DOES

Vocabulary Word Highlighter and Save scans web pages for words you want to learn or track, highlighting them with a configurable color for easy identification. Click any highlighted word to open a tooltip that displays its definition and provides options to save, edit, or remove the word from your personal vocabulary list. When you save a word, it is stored permanently and will appear with a distinct highlight color on every page you visit, allowing you to recognize familiar vocabulary instantly. The script includes a floating vocabulary panel that shows all your saved words with definitions, a search bar to filter your list, and export functionality to copy your complete vocabulary to the clipboard. This tool is ideal for language learners, students, researchers, and anyone looking to expand their vocabulary while reading online content.

WHERE IT RUNS

This script operates as a userscript within the BotGentz extension on every webpage you visit across all websites and domains. It functions on any modern browser that supports the BotGentz extension, including Chrome, Firefox, Edge, Safari, and Opera. The script runs entirely client-side, storing all vocabulary data locally using GM_setValue without sending any information to external servers. It seamlessly integrates with existing page content, highlighting words without disrupting the original layout.

HOW TO USE

After installation, the script automatically scans the page for words in your custom word list and any saved vocabulary. Custom words can be added via the panel by entering comma-separated words and clicking "Highlight Custom Words." Saved words are highlighted with a green accent, while custom words use the configured highlight color. Click any highlighted word to open a tooltip showing its definition, with buttons to save, edit, or remove the word from your list. Use the floating vocabulary panel to view all saved words, search through them, export the list to your clipboard, or clear the entire vocabulary. The panel can be toggled from the script panel at any time.

THE MECHANISM THAT MAKES IT WORK

Unlike simple keyword finders that rely on text matching only, this script uses a DOM tree walker that traverses all text nodes on the page, ensuring that highlights are applied to text content without breaking the underlying HTML structure. The script constructs a single regular expression from all vocabulary and custom words, using word boundaries to avoid partial matches. It then replaces each matching text node with a document fragment containing highlighted span elements interleaved with plain text nodes, preserving all original text while adding interactive highlighting. The highlighting system distinguishes between saved vocabulary words and custom words by applying different colors and CSS classes. All vocabulary data is stored as a JSON object mapping words to definitions, enabling fast lookup and seamless synchronization across page loads. When a word is saved or removed, the script rescans the page to update highlights dynamically without requiring a page refresh.

THE PANEL

The script panel is built using BotGentz's BGPanel framework and provides comprehensive control over the highlighter's behavior. The panel opens as a floating overlay that can be dragged anywhere on your screen, with a clean dark theme matching the tool's aesthetic. It includes input fields for custom highlight colors and known word highlight colors, toggle switches for case sensitivity, highlighting saved words, and enabling tooltips on click. A text input allows you to add custom words as a comma-separated list, with a button to apply the highlights. Action buttons let you show the vocabulary list panel, clear all vocabulary, rescan the current page, save highlight settings, or reset all settings to defaults. A dropdown menu lets you set the panel's default position to top-left, top-right, bottom-left, or bottom-right. The panel collapses to a small icon when not in use and expands when clicked, remaining accessible but unobtrusive. Press the Escape key at any time to close the panel.

PLEASE NOTE

This script requires the free BotGentz extension to be installed and activated in your browser. The extension is available from the official BotGentz website. All vocabulary data is stored locally using GM_setValue and is not shared with any third-party services. The script modifies page content by replacing text nodes with highlighted span elements; you can disable the script or toggle highlighting options at any time via the panel. The tooltip feature requires JavaScript interactions and may not work in all security-restricted environments. For best results, use modern browsers with JavaScript enabled. The script is designed as a learning aid and does not provide authoritative definitions; definitions are user-defined and should be verified independently.