Word Definition Popup on Hover

WHAT IT DOES

Word Definition Popup on Hover displays instant definitions for any word you hover over on any webpage. Simply move your mouse over a word, and a clean popup appears with the word's definition—no clicking, no context menus, no interruption to your reading flow. The extension includes a built-in English dictionary with over 300 common words, and definitions are cached locally so they appear instantly on subsequent hovers. You can customize the popup's position relative to the cursor (above, below, or beside), choose from three sizes (small, medium, large), and control how long definitions are cached. A toggle switch lets you enable or disable the popup instantly, and per-site settings allow you to customize behavior on specific websites. For language learners, students, and anyone who frequently encounters unfamiliar words, this extension transforms reading into a seamless learning experience.

WHERE IT RUNS

The extension works on every website with text content, including news sites, blogs, documentation pages, academic articles, social media, and any other page with English text. It runs locally in your browser, detecting words and displaying definitions without sending any data to external servers. The extension supports all major browsers and adapts to both desktop and mobile viewports seamlessly.

HOW TO USE

After installation, the extension is enabled by default. Simply hover over any English word on any webpage—after a brief pause (200ms), a popup appears with the word's definition. The popup shows the word in blue and its definition below, along with the source (built-in dictionary). To close the popup, move your mouse away from the word or press the Escape key. To customize the experience, open the extension panel and adjust the popup position (above, below, or beside the cursor), select a size (small, medium, or large), or disable the popup entirely using the toggle switch. For per-site customization, enable or disable the extension on specific websites using the per-site controls. The extension caches definitions for 7 days by default—adjust this duration in the settings or clear the cache manually.

THE ACTUAL MECHANISM — CARET RANGE WORD DETECTION WITH DEBOUNCED HOVER HANDLING

The extension uses the browser's `document.caretRangeFromPoint()` method (or `document.caretPositionFromPoint()` on some browsers) to detect the word under the cursor. When the user moves the mouse, the extension captures the mouse coordinates and uses `caretRangeFromPoint()` to get the text node and offset at that position. It then scans backward and forward from the offset within the text node to find word boundaries using a regex that matches alphabetic characters (`[a-zA-Z]`). The resulting word is extracted and validated (minimum 2 characters, contains at least one letter). The extension uses a debounced hover handler with a 200ms delay—this prevents popups from appearing when the user is just moving the mouse across the page, while still feeling responsive. Once a word is detected, the extension checks a local cache (stored via GM_setValue with a timestamp) before looking up the definition in the built-in dictionary. The built-in dictionary is a key-value object with over 300 common English words and their definitions. If the word is not found in the dictionary, the popup displays "No definition found." The popup is positioned using `position: fixed` with coordinates calculated relative to the cursor position and adjusted to stay within the viewport. The popup uses a fixed z-index (2147483000) to ensure it appears above all other page content.

THE PANEL

The settings panel is a lightweight, draggable overlay that appears in the center of your screen. You can reposition it by clicking and dragging the title bar; release it near the screen edge and it will snap into place automatically. To collapse the panel into a compact title bar, click the minimize button, expanding it again with the same control. The panel is fully responsive, adapting to different screen resolutions with a minimum width of 300px and a maximum of 480px. Press the Escape key at any time to dismiss the panel without applying changes. All controls—the enable/disable toggle, definition source selector, position selector, size selector, cache duration input, clear cache button, per-site source override, and per-site enable/disable controls—are accessible within a clean, high-contrast interface that respects your system's color scheme.

PLEASE NOTE

This extension requires the free BotGentz companion extension to be installed and active, which provides the underlying DOM access and storage engine. The built-in dictionary contains over 300 common English words—this is sufficient for general reading but may not cover every word you encounter. Additional dictionary sources (Dictionary.com, Merriam-Webster, Wiktionary) are planned for future updates. The word detection works on text nodes only and may not detect words within interactive elements like buttons or form fields. No personal data, browsing history, or text content is ever collected, stored, or transmitted. All definitions are cached locally using the browser's storage API and remain solely on your device. The extension does not inject ads, trackers, or analytics of any kind.