I built a Chrome extension for screen recording with automatic mouse zoom
I’ve been building a Chrome extension called Screen Mouse Recorder. The original idea was simple: I wanted to record product demos and technical walkthroughs without having to spend more time editing the recording than actually making it. The problem was that most screen recorders solve the recording part, but the editing workflow usually happens somewhere else. So I decided to build the…
I have developed a Chrome extension named Screen Mouse Recorder. My initial inspiration was to record product demos and technical walkthroughs with minimal editing time. Most screen recorders handle the recording, but the editing process often occurs separately. Therefore, I integrated the recording and editing steps into a single workflow.
This extension enables screen, tab, and window recording, highlights the mouse cursor, tracks the cursor's movement, and automatically zooms in on the cursor. It also features cursor tracking, smooth zoom transitions, a camera overlay with adjustable positions and sizes, microphone selection, video trimming, text/title overlays, background music, and video framing capabilities.
Technically, the extension utilizes Manifest V3, TypeScript, and React. It leverages Supabase for authentication, database management, and security policies, while video files are stored in Cloudflare R2. The recording/export pipeline employs browser APIs such as MediaRecorder, canvas.captureStream(), requestAnimationFrame(), getDisplayMedia(), and chrome.tabCapture.
A significant challenge was maintaining a stable frame rate for exported videos while incorporating cursor effects, zoom animations, camera overlays, and other editing operations. Additional complexities arose from browser/video edge cases related to WebM metadata, duration detection, and seeking.
Ultimately, I aim to streamline the entire workflow into a more seamless process: Record → Edit → Export → Share. I remain dedicated to refining the extension. If you are building Chrome extensions or browser-based video tools, I would appreciate your feedback on potential improvements to this architecture. If you frequently record coding tutorials, product demos, or walkthroughs, please share what aspect of your current workflow you find most frustrating.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
