About Full Page Screenshot

Full Page Screenshot is a free Chrome extension built to solve a common frustration: capturing an entire web page as a single, clean image. While browsers offer basic screenshot tools, they often produce poor results on modern websites with fixed headers, sticky navigation bars, and complex scrollable layouts. We set out to build something better.

The Problem We Solve

Modern web pages are far more complex than they were a decade ago. A typical website today might include:

• Fixed headers that follow you as you scroll, creating ugly repeated bars in naive screenshot captures
• Sticky sidebars and floating action buttons that appear in every viewport frame
• Independently scrollable panels (like YouTube's recommendation sidebar or Gmail's email list) that a single viewport capture misses entirely
• Shadow DOM components used by modern web frameworks that hide their internal elements from standard DOM traversal
• Lazy-loaded images and infinite scroll that don't render until the user actually scrolls to them

Chrome's built-in DevTools screenshot command handles some of these cases, but it requires multiple steps, doesn't handle fixed elements intelligently, and lacks clipboard support. Most existing extensions either produce low-quality results or require uploading your screenshots to third-party servers. We wanted a tool that handles all of these edge cases while keeping everything local and private.

How It Works Under the Hood

The extension uses Chrome's Manifest V3 architecture with a service worker for background processing. When you click "Capture Full Page," the following sequence occurs:

1. Page analysis: A content script scans the page DOM to identify fixed/sticky elements (using getComputedStyle), independently scrollable containers (by comparing scrollHeight to clientHeight), and Shadow DOM boundaries. This builds a comprehensive map of the page's layout behavior.
2. Scroll-and-capture loop: The extension scrolls the page in viewport-sized increments. Before each frame capture, it handles fixed elements — showing them in the first frame, hiding them in subsequent frames to prevent duplication. Each frame is captured using Chrome's captureVisibleTab API.
3. Scrollable panel expansion: For independently scrollable containers (sidebars, panels), the extension temporarily removes overflow constraints and expands their height to show all content, then captures them as part of the normal scroll flow.
4. Image stitching: All captured frames are sent to the service worker, which assembles them into a single seamless image using OffscreenCanvas. Frames are positioned precisely based on scroll offsets to prevent gaps or overlaps.
5. Viewer display: The final stitched image is temporarily stored in chrome.storage.local, a new viewer tab is opened, and the image data is injected via chrome.scripting.executeScript. The temporary storage is cleared immediately after injection.

This approach ensures no data leaves your browser at any point. The entire pipeline — from DOM analysis to final image assembly — runs locally within Chrome's extension sandbox.

Technical Challenges We Solved

The Fixed Element Problem

When you naively scroll-and-capture a page with a fixed header, the header appears in every single frame. In the final stitched image, this creates a jarring effect with the header repeating dozens of times. Our solution detects elements with position: fixed or position: sticky, measures their bounding rectangles, and toggles their visibility between frames. The header is captured naturally in the first frame, then hidden (via visibility: hidden with preserved layout) for all remaining frames.

The Scrollable Sidebar Problem

Sites like YouTube, Gmail, and Slack have sidebars that scroll independently from the main content. A full-page capture of the main content would clip the sidebar, showing only the initially visible portion. We solve this by detecting containers with overflow: auto or overflow: scroll where scrollHeight > clientHeight, temporarily expanding them to their full content height, and then restoring them after capture.

The Shadow DOM Problem

Web Components using Shadow DOM encapsulate their styles and structure, making them invisible to standard querySelectorAll calls. Our content script recursively traverses shadow roots to find fixed elements and scrollable containers even inside Shadow DOM boundaries. This ensures correct behavior on sites built with modern component frameworks like Lit, Polymer, or custom elements.

The Connection Reliability Problem

Chrome extensions communicate between content scripts and the service worker via message passing. In practice, this connection can fail silently — especially when a content script hasn't fully loaded yet. We implemented a retry mechanism with automatic re-injection: if chrome.tabs.sendMessage fails with "Could not establish connection," the extension re-injects the content script and retries up to three times with increasing delays.

Our Privacy Philosophy

We believe screenshot tools should not require internet access. Your screenshots may contain sensitive information — passwords, financial data, private messages, internal dashboards. Sending this data to a server (even temporarily) creates unnecessary risk.

Full Page Screenshot is designed from the ground up with privacy as a core constraint, not an afterthought:

• Zero network requests: The extension makes no HTTP requests. No analytics, no telemetry, no crash reporting, no update checks beyond Chrome's built-in extension update mechanism.
• Minimal permissions: We request only activeTab (to capture the current tab), scripting (to inject the content script), and storage (for temporary data transfer to the viewer). No tabs, no history, no bookmarks.
• Ephemeral data: Screenshot data exists in chrome.storage.local only for the brief moment between capture and viewer display. It's deleted programmatically as soon as the viewer page loads the image.
• Open architecture: The extension's behavior is fully inspectable. Every step from capture to display happens within Chrome's extension sandbox, visible through DevTools.

Built with Modern Web Standards

Full Page Screenshot is built entirely with standard web technologies — no frameworks, no build tools, no dependencies:

• Chrome Extension Manifest V3 — The latest extension platform with service workers instead of background pages
• OffscreenCanvas API — For high-performance image stitching in the service worker without DOM access
• Chrome Scripting API — For dynamic content script injection with proper error handling
• Clipboard API — For one-click image copying using navigator.clipboard.write
• MutationObserver — For detecting when image data is injected into the viewer page

The entire extension is under 20KB of JavaScript with zero external dependencies. This keeps the extension fast, auditable, and free from supply chain risks.

Open Source & Community

We welcome feedback, bug reports, and feature suggestions. If you encounter a website where the extension doesn't produce clean results, please let us know — every edge case report helps us improve the detection algorithms for fixed elements, scrollable containers, and layout anomalies.

Visit our Contact page to get in touch, or browse our Guides for tips on capturing better screenshots.