DEV Community

Carlos D Moron
Carlos D Moron

Posted on

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 recording + editing workflow myself.

What it can do
Screen, tab and window recording
Mouse cursor highlighting
Click effects
Cursor tracking
Automatic zoom following the cursor
Smooth zoom transitions
Camera overlay with multiple positions and sizes
Microphone selection
Video trimming
Text/title overlays
Background music
Video framing
Recording library
Cloud storage and shareable recordings
The interesting technical part

The extension is built with Manifest V3, TypeScript and React.

For the backend I’m using Supabase for authentication, database and security policies, while video files are stored in Cloudflare R2.

The recording/export pipeline uses browser APIs such as:

MediaRecorder
canvas.captureStream()
requestAnimationFrame()
getDisplayMedia()
chrome.tabCapture

One of the more interesting challenges was getting the exported video to maintain a stable frame rate while applying cursor effects, zoom animations, camera overlays and other editing operations.

I also had to deal with some fun browser/video edge cases around WebM metadata, duration detection and seeking.

The goal is to eventually make the whole workflow feel more like:

Record → Edit → Export → Share

instead of:

Record → Download → Open editor → Edit → Export → Upload → Share

I’m still actively improving it.

If you're building Chrome extensions or browser-based video tools, I'd be interested in hearing:

What would you improve about this architecture?

And if you regularly record coding tutorials, product demos or walkthroughs:

What is the most annoying part of your current workflow?

Chrome extension: https://chromewebstore.google.com/detail/ldenfjhiiedcdbofkapllglgokegohng

Top comments (0)