Visible Area Screenshot

WHAT IT DOES

Visible Area Screenshot captures exactly what you see in your browser's viewport and saves it as an image. The tool renders a high-fidelity screenshot of the visible area using the browser's native canvas API, preserving the exact visual state of the page including CSS styles, images, and layout. Choose between PNG format for lossless quality or JPEG format for smaller file sizes with adjustable compression quality. The screenshot can be copied directly to your clipboard or downloaded as an image file. A live preview thumbnail shows the captured image before you save it, allowing you to verify the result.

WHERE IT RUNS

The extension runs entirely within your browser's local environment using the BotGentz framework. All screenshot rendering and image processing occur on your machine without any network requests. No page content, captured images, or user activity is ever transmitted, uploaded, or stored externally. The tool works on any website and respects the browser's security boundaries, operating within the isolated extension sandbox. Screenshots are generated locally using the HTML canvas element.

HOW TO USE

Click the extension toolbar icon to open the Visible Area Screenshot panel. Click "Capture Viewport" to take a screenshot of the visible area. The captured image appears as a preview thumbnail in the panel. Choose PNG or JPEG format using the format dropdown—PNG provides lossless quality while JPEG creates smaller files. For JPEG images, adjust the quality slider (10-100) to balance file size and visual quality. Toggle "Show preview" to enable or disable the preview thumbnail. Toggle "Auto download" to automatically download the image after capture. Toggle "Include scrollbars" to overlay scrollbar position indicators on the screenshot. Set a custom filename for downloaded images. Use the "Copy to Clipboard" button to copy the screenshot directly, or click "Download" to save it as a file.

THE CANVAS-BASED CAPTURE ENGINE — WHY IT WORKS

Most screenshot tools rely on browser extensions APIs (chrome.tabs.captureVisibleTab) that are unavailable in user scripts. This tool uses a pure DOM approach: it draws the entire documentElement onto a canvas using drawImage, which captures the full rendered content of the page. The viewport is captured by using the current scroll position to determine which portion of the document to render. The canvas is sized to match the viewport dimensions (window.innerWidth × window.innerHeight), then the documentElement is drawn at the negative scroll offset, effectively capturing only the visible area. For JPEG output, the canvas' toDataURL method is used with a quality parameter (0-1) that controls compression. For PNG, toDataURL is called without quality parameters to preserve lossless output. The optional scrollbar overlay draws custom scroll indicators on the canvas, helping developers understand the page's scroll position relative to the full document. This approach requires no permissions beyond what the page already has.

THE PANEL

The Visible Area Screenshot panel is fully draggable by its title bar and remembers its position on screen per website. It snaps to the edges of your browser window for clean alignment. Collapse the panel to a compact icon strip using the minimize button, restoring it with a single click. Resize the panel by dragging any edge or corner; the preview and controls adjust proportionally. Press the Escape key to close the panel instantly. The panel maintains independent state for each browser tab, allowing you to capture screenshots in multiple tabs simultaneously.

PLEASE NOTE

This extension requires the free BotGentz extension framework to be installed and enabled. Screenshots are captured from the current viewport only; capturing the full page or specific elements is not supported. Some pages with complex rendering, canvas elements, or WebGL content may not render perfectly. Cross-origin images in the page may appear blank in the screenshot due to browser security restrictions. All captured images are generated locally and are never transmitted, logged, or shared. The extension requests no network permissions and functions entirely offline. The source code is fully auditable and available for review.