DEV Community: FujiDevv

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

FujiDevv — Mon, 27 Jul 2026 08:02:52 +0000

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.

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.
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.
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!

I rebuilt 90s desktop pets for the modern web (using 100% Local AI in the browser)

FujiDevv — Thu, 25 Jun 2026 15:15:21 +0000

If you used a computer in the late 90s or early 2000s, you probably remember the sheer joy (and chaos) of virtual desktop pets. Whether it was a little sheep walking on your taskbar, a Shimeji dropping from the top of your screen, or the infamous Clippy judging your Word documents—they added a ton of personality to our screens.

I really missed that feeling, so I decided to bring it back for the modern web.

But I didn't want to just make a looping GIF. I wanted to build a virtual companion that actually "reads the room."

Meet Arcrawls — an open-source, context-aware browser mascot.

https://arcrawls.com

The Tech Stack

Building a browser extension that interacts with the DOM is tricky enough, but adding AI into the mix made it a really fun engineering challenge. Here is what I used:

Core Extension: TypeScript & Vite
Landing Page: Vue 3 & TailwindCSS
Extension API: Manifest V3
AI & Machine Learning: Chrome's Built-in AI (Gemini Nano) & ONNX Runtime (WebAssembly)

The Challenge: 100% Local Offline AI

The core feature of Arcrawls is that it analyzes the text and sentiment of the webpage you are currently reading. If you are reading a depressing news article, the pet acts sad. If your developer console is throwing a bunch of red errors, it puts on a hard hat and looks confused.

The easiest way to do this would have been to just grab the document.body.innerText and fire it off to an OpenAI API endpoint. But I firmly believe browser extensions should not be sending your private reading habits to the cloud. Instead, the entire AI sentiment analysis engine runs 100% locally and offline directly inside your browser. I achieved this using a hybrid approach:

Chrome's Built-in Gemini Nano: Arcrawls taps into the new, experimental window.ai API built directly into modern Chrome browsers. This allows the extension to leverage the local Gemini Nano model to perform complex sentiment and context analysis without downloading massive model weights.
ONNX Runtime for WebAssembly: For fallback support and lighter, faster inference tasks (like quick zero-shot classification), the extension runs on-device machine learning via ONNX Runtime compiled to WebAssembly (WASM). This runs directly within the extension's sandboxed Service Worker.

Because everything happens locally, zero data leaves your device, inference is incredibly fast, and there are absolutely zero recurring cloud API costs to worry about.

Bringing it to life with Physics

I implemented a custom spring physics engine that runs via a requestAnimationFrame loop. The pet recalculates its target position based on where you are scrolling and uses spring dampening to crawl, jump, and interact with the edges of your viewport naturally. Getting the physics to run buttery-smooth in Vanilla TS while injecting it into a shadow DOM (to prevent the host site's CSS from bleeding into the pet's UI) was a massive learning experience!

It's Open Source!

Arcrawls is a passion project, and it is 100% free and open-source. Building for Manifest V3 (especially trying to run WASM inside Service Workers) was a huge learning curve with plenty of weird CSP and fetching bugs to overcome.

I'd absolutely love for you to try it out! If you are interested in extension development, local AI, or just want a little crab keeping you company while you debug, check out the code.

Website: https://arcrawls.com
GitHub Repo: fujiDevv/context-aware-browser-pet https://github.com/fujiDevv/context-aware-browser-pet

Let me know what you think in the comments! Has anyone else experimented with Chrome's Gemini Nano or ONNX Runtime inside browser extensions? I'd love to swap notes on how you handled the memory constraints!