Universal Glossary Term Highlighter

WHAT IT DOES

This script scans the current page for glossary terms by detecting definition lists (dl, dt, dd), glossary sections, and term-definition pairs in the page content. It builds a glossary dictionary from detected terms and their definitions, then highlights matching terms in the main page content with a subtle underline and hover tooltip showing the definition. A floating panel displays the full glossary list, allowing users to click any term to scroll to its definition on the page. Users can toggle highlighting on/off, add custom terms and definitions, export the glossary as CSV, and adjust the highlighting color. All glossary data is stored per domain locally for reuse across visits.

WHERE IT RUNS

Works on any webpage with glossary content—documentation sites, educational articles, technical blogs, wikis, or any page with definition lists, glossaries, or term-definition pairs. The script detects terms from multiple formats including definition lists (dl/dt/dd), glossary sections with bold terms, table-based glossaries, and inline "term: definition" patterns.

HOW TO USE

The panel appears automatically when you visit a page. It detects glossary terms and highlights them with a dotted underline. Hover over any highlighted term to see its definition in a tooltip. The glossary list in the panel shows all detected and custom terms with definitions. Click the 🔍 button next to any term to find and scroll to that term on the page—it will briefly flash to show its location. Use the "Add Custom Term" form to add terms not detected automatically—these are stored for future visits. Toggle "Enable Highlighting" to turn the feature on/off. Change the highlight color using the color picker. Export the full glossary as CSV for documentation or reference. Use "Clear Custom Terms" to remove only your manually added terms.

TECHNICAL MECHANISM: MULTI-PASS GLOSSARY DETECTION WITH DOM HIGHLIGHTING AND TOOLTIP SYSTEM

The script uses a comprehensive detection strategy. First, it scans for definition lists (dl) and extracts term-definition pairs from dt and dd elements. Second, it searches for glossary containers using class selectors (.glossary, .definitions, etc.) and extracts term-definition pairs by splitting on colons, dashes, or by detecting bold/strong terms. Third, it scans tables for term-definition pairs in two-column rows. Fourth, it uses a TreeWalker to scan text nodes for "term: definition" patterns with colons. All detected terms are merged with stored custom terms, with stored terms taking precedence. For highlighting, the script walks text nodes in the page body (excluding script, style, heading, and glossary containers), finds terms using word boundary regex, and wraps them in span elements with a dotted underline and hover event listeners. The tooltip is a fixed-position div that appears on mouseenter, positioned with viewport-aware offset logic to prevent overflow. Each highlighted term stores its original text and definition, and the find function scrolls to the term and temporarily highlights it. Glossary data is stored per domain using GM_setValue with custom terms persisting across visits.

THE PANEL

The glossary highlighter appears in a draggable, resizable panel that remembers its position per site. The panel shows the full glossary list with term, definition, and a find button. Add custom terms with the input form. Toggle highlighting and adjust the highlight color. Drag by the header to reposition, collapse to a compact icon with a click, and resize using the bottom-right corner. The panel snaps to screen edges for tidy placement and closes with the Escape key. All settings—highlighting toggle, highlight color, and panel position—persist per website using GM_setValue, so your view returns exactly as you left it.

PLEASE NOTE

This script requires the free BotGentz extension to run. Glossary detection relies on the page using common term-definition formats—custom or non-standard implementations may not be detected. Highlighting wraps terms in span elements, which may affect page styling if the page uses complex CSS selectors. The tooltip appears on hover with a 200ms delay on mouseleave to prevent flickering. Clicking the find button scrolls to the first occurrence of the term; if the term appears multiple times, only the first is highlighted. Custom terms are stored per domain and will appear on subsequent visits. All data is stored locally in your browser via GM_setValue and never transmitted.