How I Built a 100 percent On-Device Tab Region GIF Recorder as a Chrome Extension

Most web-based screen recorders work by streaming video frame data to cloud servers for rendering, encoding, and storage. While convenient for team collaboration, uploading raw frame buffers creates privacy and security risks when capturing internal staging environments, admin dashboards, or client tools containing sensitive data.

To solve this, I built CstWeave—a privacy-first Chrome Extension that captures tab regions and encodes clean GIFs or HD WebMs 100 percent on-device directly inside local browser memory.

In this post, I will break down the architecture, technical decisions, and how to build a custom client-side GIF encoding pipeline within Chrome Extension Manifest V3.

TECHNICAL ARCHITECTURE (MANIFEST V3)

Under Manifest V3, Chrome extensions rely on ephemeral Service Workers rather than persistent background pages. Because Service Workers lack access to the HTML DOM and canvas elements, performing frame capture and pixel manipulation requires a decoupled offscreen architecture.

1. Scoped UI with Shadow DOM (selection.ts)
   To let users drag and crop any region on a webpage without CSS bleeding or layout shift, the selection interface is mounted inside an isolated Shadow DOM container. It renders the drag-to-crop selection overlay , manages floating active recording controls and countdown timers , and shows an overlay modal for instant clip previews, clipboard copying, or saving.

2. Background Orchestrator (background.ts)
   The Service Worker handles state orchestration, fetches media stream IDs via chrome.tabCapture, and manages the lifecycle of the offscreen document.

3. Offscreen Document and Encoding Engine (offscreen.ts)
   The offscreen canvas document processes video stream frames and handles all GIF and WebM rendering off main UI threads to prevent tab throttling. For WebM capture, it uses the native Web MediaRecorder API over canvas.captureStream() with optional system audio mixing. For GIFs, it runs a custom pure-TypeScript encoding pipeline.

THE CUSTOM TYPESCRIPT GIF ENGINE

Browser-native APIs like MediaRecorder do not output raw animated .gif files out of the box. To generate lightweight GIFs on-device without external WASM binaries or server-side render queues, CstWeave implements a pure TypeScript encoding pipeline:

Frame Capture: Uses a setTimeout loop drawing the tab stream to a canvas element, avoiding background tab requestAnimationFrame throttling.

Color Palette Generation: Runs a Median-Cut algorithm on sampled frame pixels (sampling roughly every 8th frame and 4th pixel) to compute an optimal 256-color palette.

Color Quantization: Applies optional Floyd-Steinberg dithering to smooth gradients across frames.

LZW Compression: Encodes pixel indices into variable code-width LZW dictionary chunks directly inside Uint8Array typed arrays.

Blob Assembly: Concatenates array chunks into a final binary Blob with image/gif MIME type for direct local export or clipboard pasting.

KEY FEATURES

100 percent Local Processing: Captured frames remain strictly inside local RAM and CPU memory—zero media ever leaves your machine.

Instant Hotkey Workflow: Press Alt+Shift+G (or Command+Shift+G / Option+Shift+G on Mac) on any tab to select a region and record.

No Forced Watermarks: Clean exports across both free (Lite) and paid (Pro) tiers.

Freemium Lifetime Model: Lite is free forever (5s GIF clips); Pro is a single $9.99 purchase (not a subscription) for longer clips, higher FPS, HD WebM, and audio capture.

CHECK IT OUT

If you work on sensitive staging environments, log bug reproductions for Jira/GitHub, or want clean GIF/WebM exports without cloud bloat, feel free to give CstWeave a try!

Website: https://cstweave.com Browser Support: Chrome 116+, Microsoft Edge, Brave

I would love to hear your feedback on the offscreen architecture or custom GIF encoder!