ScrollSnapper

ScrollSnapper is a privacy-first Manifest V3 Chrome extension that captures a full webpage and saves it as one local PNG. The capture pipeline runs entirely inside Chrome, with no server, account, analytics, tracking, or cloud upload.

Why It Is Technically Interesting

A browser can capture only the visible viewport. ScrollSnapper coordinates several isolated Chrome extension contexts to turn those viewport tiles into one reliable full-page image:

1. The popup starts an explicit user-authorized capture.
2. A Manifest V3 service worker validates the active tab and orchestrates the workflow.
3. A content script measures the page, hides repeated fixed elements, scrolls through deterministic positions, and restores the original page state.
4. chrome.tabs.captureVisibleTab captures each viewport within Chrome's API quota.
5. An offscreen document uses OffscreenCanvas to stitch the tiles locally.
6. Chrome downloads the final PNG and confirms completion before success is reported.

flowchart LR
  A[Popup] --> B[MV3 service worker]
  B --> C[Content script]
  C --> D[Viewport capture]
  D --> E[OffscreenCanvas stitching]
  E --> F[Local PNG download]

Loading

Engineering Highlights

• Manifest V3 with an ES module service worker
• Explicit active-tab validation before every tile capture
• Global capture locking to protect the shared offscreen canvas
• Capture throttling below Chrome's visible-tab quota
• Deterministic scroll planning with bottom-edge handling
• Canvas dimension and memory safety limits
• Page-state restoration after success or failure
• Validated responses across extension contexts
• Download completion tracking with timeout and error handling
• Zero runtime dependencies
• Automated unit tests and continuous integration

Privacy Model

ScrollSnapper requests access only after the user selects Capture full page. Page content and screenshot tiles remain on the device. The extension has no backend, remote code, analytics, advertising, or data collection.

Permission	Purpose
activeTab	Temporarily access only the page selected by the user.
scripting	Measure, scroll, and restore that page during capture.
downloads	Save the requested PNG locally.
offscreen	Stitch image tiles locally without opening another visible tab.

See PRIVACY.md for the full privacy policy.

Local Development

1. Clone this repository.
2. Open chrome://extensions in Chrome.
3. Enable Developer mode.
4. Select Load unpacked and choose the repository directory.
5. Open a normal HTTP or HTTPS page and select Capture full page.

No dependency installation is required.

npm test
npm run validate
npm run package

Project Structure

src/
  content/capture-page.js   Page measurement, scrolling, and restoration
  offscreen/offscreen.js    Local OffscreenCanvas image stitching
  popup/                    User interface and progress reporting
  service-worker.js         Capture orchestration and Chrome API safeguards
  shared/capture-plan.js    Pure capture planning and safety limits
test/
  capture-plan.test.js      Unit tests for planning and image constraints
scripts/
  package.sh                Reproducible release packaging
  validate-manifest.js      Manifest and asset validation

Limitations

• Chrome blocks capture on protected pages such as chrome:// and the Chrome Web Store.
• The target page must remain active until capture completes because Chrome captures only the visible tab.
• Pages exceeding the configured canvas dimension or memory limits are rejected safely.
• Highly dynamic pages may change while the browser is moving between viewport positions.

Release Documentation

• CHANGELOG.md
• PUBLISHING.md
• STORE_LISTING.md

License

MIT