Zitlac Inspiration — Full-Page Web Capture & Curation Chrome Extension

I built a Chrome Extension (Manifest V3) that lets creative teams capture full-page screenshots (not just the viewport), organize them with collections & tags, and store everything securely in Firebase. The popup UI is gated behind sign-in, capture is reliable on long pages (auto-scroll + stitch), images are compressed to stay fast and under limits, and clean metadata (URL, title, date, tags) is saved for easy retrieval.

What it does

One-click Save to Library from the popup
Full-page capture (auto-scroll, overlap, stitch)
Collections & tags for organization
Auth-gated UI (signed-in users only)
Metadata: URL, title, dimensions, file size, created_at
Secure storage: Firebase Storage (images), Firestore (metadata)
Adaptive compression (JPEG + downscale) to keep files <10 MB
Clear messaging for pages Chrome won’t allow (chrome://, Web Store, built-in PDF)

How it works

Sign in (Firebase Auth) → popup unlocks
Pick collection & tags → Save to Library
The extension measures the page, scrolls with small overlap, captures slices via chrome.tabs.captureVisibleTab, stitches on canvas, compresses to JPEG
Uploads to Firebase Storage: screenshots/<uid>/<assetId>.jpg
Writes Firestore metadata (screenshots collection): user_id, collection_id, tags[], page_url, title, storage_path, download_url, width, height, size_bytes, created_at

Technology

Chrome MV3: service worker, content scripts, chrome.scripting.executeScript, chrome.tabs.captureVisibleTab

Frontend: React + Vite (popup)

Firebase: Auth (email/password; Google-ready), Firestore, Storage

Security: Per-user Firestore rules (ownership & scoped reads/writes), per-user Storage paths with size/type limits

My role
Product & UX flow • Architecture & extension implementation • Firebase config & security rules • Performance hardening (scroll timing, overlap, canvas limits, compression) • Handoff docs & QA

Challenges & solutions

Viewport vs full-page → Scroll-capture-stitch with overlap + paint delay for pixel-perfect results
Large pages / file size → Adaptive JPEG + optional downscale to meet Storage rules without losing fidelity
MV3 constraints → Local Firebase SDKs, no remote code, service-worker-safe patterns
Privacy → Per-user isolation via rules + path conventions

Results

Reliable full-page capture on long, image-heavy sites
Lightweight files (typically 0.5–5 MB, capped <10 MB)
Clean, searchable library via collections/tags
Minimal support post-launch thanks to robust error handling

Quick specs
Timeline: ~1–2 weeks to MVP + iterative hardening
Deliverables: Chrome MV3 extension, Firebase rules & data model, deployment guide, QA checklist

CTA
Got requirements for a Chrome extension, an AI bot for your website, or a custom site (React/Vite/Next.js, Firebase, secure auth)? Tell me what you need—I’d love to help.