Article Highlight-and-Save Tool

WHAT IT DOES This script lets you highlight and save text selections from any article, just like a digital highlighter. Select any text on the page and a floating bar appears, letting you choose a color category (yellow, green, blue, pink, purple, orange) and save the highlight with an optional note. Each highlight is stored with a timestamp, the article title, and its URL. A panel displays all your saved highlights for the current article, organized with color dots, notes, and timestamps. You can export all highlights to Markdown or plain text, making it perfect for research, studying, or saving key passages for later reference. WHERE IT RUNS The script works on any article or long-form content page across the web—news sites, blogs, documentation, research papers, tutorials, and more. It automatically detects article containers and works within the main content area. The script runs on any website, adapting to each page's structure. HOW TO USE After installation, simply select any text on an article page. A floating highlight bar appears with color buttons and a save button. Choose a color category (yellow, green, blue, pink, purple, or orange) and click "Save" to store the highlight. You can add an optional note when saving. All highlights are listed in the panel, where you can view them, add notes, or delete individual highlights. Use the export button to copy all highlights to your clipboard in Markdown or plain text format. The keyboard shortcut Ctrl+Shift+H toggles the floating bar visibility. TECHNICAL MECHANISM The script uses a multi-stage highlight pipeline. First, it captures text selection using the Selection API, detecting when the user selects text and the highlight bar appears. Second, it applies color-coded highlighting using a TreeWalker to traverse text nodes within the article container, wrapping matched text in styled `` elements with background colors and underline accents. Third, it stores highlights as JSON objects containing the text, category, color, note, timestamp, URL, and title, keyed by the article URL in GM_setValue. Fourth, it maintains a persistent highlight list in the panel, rendered dynamically from storage. Fifth, it exports highlights using template-based generation for Markdown (with headings, blockquotes, and bold formatting) or plain text. The script also uses a MutationObserver to re-apply highlights if the page content changes dynamically. THE PANEL The settings panel is fully draggable and can be positioned anywhere on your screen. It automatically snaps to the nearest edge when released, keeping your workspace organized. The panel can be collapsed to a small bubble showing only a gear icon, and restored with a single click. Its position is remembered across page reloads using GM_setValue. The panel also responds to the Escape key, which instantly hides it until you click the bubble again. All settings are saved immediately when changed and persist across browser sessions. PLEASE NOTE This script requires the free BotGentz extension to run. Highlights are stored per-article URL and are not synchronized across devices. The script works best on standard article layouts; complex or heavily dynamic pages may affect highlight placement. The script does not access, store, or transmit any personal data or browsing history. All highlight data is stored locally in your browser's userscript storage and never leaves your device.