Skip to content

1Snap

extensionLast commit

Local-first Chrome extension that scrolls through a complete web page, stabilizes changing presentation, stitches captured frames in the browser, and opens a measured workspace for non-destructive annotation and original-resolution PNG export.

Open productSource
Role
Product design and browser-extension engineering
Scope
Capture lifecycle, page stabilization, local image processing, annotation tooling, and release delivery
Status
GitHub release v0.1.1
1Snap result page with Marker, Highlight, and Border annotation controls over a captured report

Problem

Chrome's standard screenshot flow captures only the visible viewport, while many full-page tools add heavy editors, accounts, or cloud upload. 1Snap had to capture and mark one complete image without introducing a remote processing boundary.

Constraints

  1. C1

    Chrome can capture only the active visible tab, so the source tab must stay active while 1Snap scrolls and records each frame.

  2. C2

    Dynamic content, visible images and fonts, fixed or sticky elements, and the user's original scroll position must be stabilized or restored without leaving the page altered.

  3. C3

    Captures are bounded to 50 frames, 16,000 by 32,000 output dimensions, and 120 million pixels, with proportional downscaling when needed; annotation geometry must stay aligned through responsive editing and original-resolution export.

Architecture

Toolbar-triggered WXT background controller coordinating the active tab and progress; injected page planning that measures, stabilizes, scrolls, and restores document state; capture and annotation records in extension-owned IndexedDB; local Canvas stitching followed by a React result page with an SVG editing overlay and original-resolution export composition.

01

Capture orchestration

The background controller owns the active-tab lifecycle, progress badge, capture rate, cancellation, and recovery.

02

Page preparation

An injected page script measures the document, waits for visible assets, pauses motion, manages sticky elements, and restores the original presentation.

03

Local processing

Captured frames and vector annotation documents are retained separately in IndexedDB; frames are stitched into a bounded PNG through the browser Canvas API.

04

Result and delivery

A React result page reports capture measurements, supports Select, Marker, Highlight, and Border tools, and composes marks into the PNG only for Copy or Download; release automation packages a checksummed Chrome archive.

Decisions

D1

Keep capture and stitching inside Chrome

Store recent frames and assemble the PNG locally rather than uploading page captures, avoiding an account or remote image-processing boundary.

D2

Keep annotations non-destructive until export

Persist vector geometry separately from the stitched screenshot so users can select, move, resize, undo, redo, or cancel edits before Canvas composition produces the final PNG.

D3

Treat page restoration as part of capture correctness

Record and restore scroll position and temporary presentation changes on success or failure so the capture workflow does not leave the source page modified.

D4

Bound frames and output dimensions explicitly

Stop or proportionally downscale oversized captures instead of allowing unbounded browser memory and canvas work.

Contribution

  • Designed the one-click capture, progress, result, annotation, copy, download, and recovery journeys.
  • Implemented document measurement, scroll planning, visible-asset waiting, animation pausing, sticky-element handling, and state restoration.
  • Built IndexedDB frame and annotation retention, local Canvas stitching, SVG editing and history controls, output sizing safeguards, and original-resolution annotated export.
  • Established unit and UI coverage, the public product website, Netlify deployment, and the checksummed Manifest V3 v0.1.1 release.

Outcomes

  • Users can turn a regular web page into one full-height PNG, then mark details with Marker, Highlight, or Border tools.
  • Capture frames, vector annotations, image assembly, and export composition remain inside extension-owned browser storage and processing.
  • The result page combines measured capture evidence with selection, movement, resizing, color and width controls, undo, redo, clear, copy, and download.
  • Maintainers shipped v0.1.1 as a verified Chrome ZIP with a matching published SHA-256 checksum.

Product screenshot

1Snap result page with Marker, Highlight, and Border annotation controls over a captured report
The v0.1.1 result workspace keeps the complete capture visible while users highlight, draw, frame details, and export one locally composed PNG.

Verified stack

  • WXT
  • React 19
  • TypeScript
  • Chrome Manifest V3
  • Chrome Extensions API
  • Browser Canvas API
  • SVG
  • IndexedDB
  • Vite
  • Sharp
  • Vitest
  • React Testing Library
  • Happy DOM
  • Netlify
  • GitHub Actions
  • CI/CD
  • System Design

Working through something similar?

Share your challenge, scope, and timeline to start a focused conversation.