Screenshot Annotation Tool

WHAT IT DOES

Screenshot Annotation Tool is a browser extension that automatically scans the current webpage for screenshot elements, image captures, visual content, and canvas elements. It detects visual elements by examining image tags, canvas elements, class names, IDs, and data attributes for keywords like "screenshot", "image", or "canvas". The extension adds a floating "annotate" button (✏️) next to each detected image or visual element, allowing you to capture, annotate, and save images with a single click. Clicking the button opens a panel where you can capture a screenshot of the selected element or the full page, choose from annotation tools including arrows, rectangles, highlights, and text markers, select custom colors, add notes, and save the annotated image to your local database. The extension maintains a screenshot database per page with annotated images, notes, and timestamps for each saved screenshot. The main panel displays all saved screenshots, showing the page URL, timestamp, and any notes. All data is stored locally in your browser using GM_setValue, ensuring your annotated screenshots persist across page reloads and browser sessions. This helps designers, developers, QA engineers, product managers, and anyone providing visual feedback to capture, annotate, and share visual context across teams.

WHERE IT RUNS

This extension runs on any webpage that displays images, screenshots, visual content, canvas elements, or any page where visual feedback is needed – including design mockups, UI previews, bug reports, documentation sites, testing environments, and any page containing visual content. The extension intelligently adapts to different page structures and supports a wide range of common image display patterns. No manual configuration is required per site; the extension automatically detects visual elements using a flexible pattern matching system. This makes it ideal for teams providing visual feedback on designs, UI elements, or any on-screen content.

HOW TO USE

Simply install the extension and navigate to any webpage displaying images or visual content. The extension automatically detects visual elements and places a small "annotate" button (✏️) next to each one. Click any of these buttons to open the annotation panel with the image pre-selected. Click "Capture Screenshot" to capture the image or selected element. Then select an annotation tool (Arrow, Rectangle, Highlight, or Text) from the tool row. Choose a color from the color picker. Click and drag on the preview image to draw arrows or rectangles, click to place text markers, or drag to highlight areas. The annotation appears directly on the image preview. Add a note about the annotation, context, or feedback, then click "Save Annotated Screenshot" to store it in your local database. A floating button (📸) appears in the bottom-right corner of the page – click this to open the main panel. The main panel shows all saved screenshots with thumbnails, page URLs, timestamps, and notes. Use the settings section to enable or disable auto-detection. The "Clear All Screenshots" button removes all tracking data when needed.

ONE TECHNICAL SECTION – WHY IT WORKS

The extension employs a multi-layered detection system that identifies visual content with high accuracy. First, it scans the DOM using a comprehensive set of CSS selectors targeting common image and visual element patterns, including img tags, canvas elements, class names, IDs, and data attributes. The extension uses the HTML5 Canvas API for image capture and annotation rendering. When capturing a screenshot, the extension creates a canvas element sized to the target element's dimensions, then draws the element's visual content onto the canvas using ctx.drawImage() for img elements or by reading canvas data for canvas elements. For annotations, the extension uses the Canvas 2D API with separate rendering layers for each annotation type: arrows are drawn using moveTo() and lineTo() with arrowhead geometry, rectangles use rect() and stroke(), highlights use fillRect() with semi-transparent colors, and text uses fillText(). Each annotation is stored as a JSON object with coordinates, type, color, and text content, allowing annotations to be reapplied when viewing saved screenshots. The extension compresses image data to reasonable sizes for local storage using PNG encoding. A MutationObserver detects dynamic content updates and re-scans only when new visual elements appear, balancing real-time accuracy with system performance.

THE PANEL – DRAG / PER-SITE POSITION / SNAP / COLLAPSE / RESIZE / ESCAPE

The screenshot annotation panel includes a draggable title bar, allowing you to position it anywhere on screen for convenient access during annotation work. The extension remembers your preferred position per website, so the panel opens in the same location each time you return to that domain. The panel supports snap-to-edge behavior – when dragged near screen edges, it gently snaps into place for a tidy workspace layout. You can collapse the panel down to just its title bar by clicking the collapse button, keeping it accessible without taking up screen space. The preview image and annotation tools are contained within a scrollable body, ensuring all content remains accessible even on smaller screens. Pressing the Escape key closes the panel instantly, returning you to your workflow.

PLEASE NOTE

This extension requires the free BotGentz extension to be installed and enabled, as it relies on BotGentz's userscript injection and GM_* API shims for cross-browser compatibility. Websites frequently update their HTML structures and class names, which may cause image detection to break temporarily – we actively maintain the matching patterns and release updates regularly. The extension stores all screenshot data, annotated images, and notes exclusively in your local browser storage (GM_setValue); no data is ever transmitted to any external server or third party. Images are stored as base64-encoded PNG data within your local storage, which may use significant space depending on image size and count – we recommend periodically clearing old screenshots. You are responsible for backing up your screenshot data if you switch browsers or clear your storage. The extension does not read, modify, or interfere with any page content, images, or site functionality – it operates solely on the visual elements and stores only metadata and image data that you explicitly create. Use this tool responsibly for personal and professional visual feedback.