Beyond-Viewport Capture
Unlike conventional extensions that perform slow, jittery scroll-and-stitch sequences, Webshot commands Chromium's Blink compositor via CDP to rasterize the entire document layout in a single 1-shot pass.
Ultra-high-resolution screenshots (up to 8K), native Chrome DevTools Protocol rendering, and full-page capture for production web applications and localhost development servers.
Unlike conventional extensions that perform slow, jittery scroll-and-stitch sequences, Webshot commands Chromium's Blink compositor via CDP to rasterize the entire document layout in a single 1-shot pass.
Full-page capture that works reliably on complex Single Page Applications (Next.js, Vite, React) where internal containers (#root, #__next, overflow-y: auto) hide true heights from standard scroll APIs.
Pre-shutter automations strip cookie consent banners, GDPR notices, and chat widgets, while redaction engines obscure sensitive PII (emails, cards, IPs) directly before capturing.
Core Capabilities
Render viewports at 1080p, 1440p, 4K, 8K, or arbitrary dimensions. Dynamically multiplies device pixel scale factor before capture to output publication-grade typography and vector sharpness.
Invokes CDP Page.captureScreenshot with captureBeyondViewport: true. Eliminates repeated sticky navigation bars, sliced text seams, and canvas memory stitching allocation failures.
Engineered for development environments (localhost, 127.0.0.1). Inspects nested scroll containers (#root, #__next, main, [role="main"]) to compute true boundary heights.
Interactive DOM inspector to point, hover, and capture specific nodes with sub-pixel bounding-box precision, plus smart-subject detection for clean isolation of primary article bodies.
Automation Suite
Automatically detects and removes cookie consent banners, GDPR dialogs, floating promotional popups, and third-party chat widgets (Intercom, HubSpot, Drift, Zendesk).
In-page TreeWalker regex engine detects and obscures sensitive personal data (emails, phone numbers, credit card sequences, IPv4 addresses) prior to pixel rasterization.
Emulates CSS media feature prefers-color-scheme: dark directly at the browser compositor level to force dark themes on supported sites without manual toggling.
Automated micro-scroll sweep forces img[loading="lazy"] assets, progressive web fonts, and dynamically mounted components to evaluate and load before capture.
Composites an Apple-style window title bar complete with traffic light buttons, glass drop shadow, and rounded corner framing around the exported image.
Configurable 2s, 5s, or 10s capture delays allowing developers to stage dropdown menus, active tooltips, modal sheets, and hover interactions effortlessly.
Under The Hood
Instead of executing hundreds of iterative window.scrollTo calls and stitching canvas tiles in browser memory, Webshot queries true layout metrics via Page.getLayoutMetrics and commands Blink's compositor to draw the full page surface in a single rasterization pass:
await chrome.debugger.sendCommand({ tabId }, 'Page.captureScreenshot', {
format: 'png',
fromSurface: true,
captureBeyondViewport: true,
clip: { x: 0, y: 0, width: totalWidth, height: totalHeight, scale: 1 }
});Chromium GPU backends impose a hard surface boundary of 16,384px. Webshot computes effectiveScale = Math.min(targetScale, Math.floor(16384 / totalHeight)) so long documents never trigger texture allocation faults.
When decorative framing is disabled, screenshots stream directly from the background service worker via chrome.downloads.download. Raw pixel blobs never transit offscreen DOMs unless post-processing is active.
Technical Architecture
Security & Permissions
| Permission | Architectural Purpose |
|---|---|
| debugger | Attaches to the active tab to execute CDP emulation and native screenshot commands. |
| downloads | Saves captured images directly to the user's Downloads/Webshot/ directory. |
| scripting | Dynamically executes content helpers on tabs for SPA height detection and banner cleanup. |
| offscreen | Hosts background canvas processing for optional macOS window framing and drop shadows. |
| tabs | Identifies active tab metadata including page title, layout dimensions, and target URL. |
| host_permissions | Permits capture execution on all web origins, including localhost and 127.0.0.1. |
Local Development
Requires Node.js 18.x or 20.x+ and npm.
git clone https://github.com/thesatyamjain/webshot.git && cd webshot && npm install
Validates strict TypeScript types across all entrypoints.
npm run compile
Compiles optimized MV3 artifacts into .output/chrome-mv3.
npm run build
Navigate to chrome://extensions/, toggle Developer mode, click Load unpacked, and select webshot/.output/chrome-mv3.