Recording Browser Extension and Plugin Demos That Sell the Idea

Browser extensions are hard to demo. The whole product lives in a 300-pixel popup, a 16-pixel toolbar icon, and a few changes to a page that someone else built. There is no app window to show off, no splash screen, no dashboard. Yet an extension demo is often the only thing standing between a curious visitor and an install.

The good news is that the constraints are predictable. Once you know where extension demos usually fall apart, a short recording can be remarkably persuasive.

Why Extension Demos Are Different

Most screen recording advice assumes your product owns the window. An extension does not. That changes four things:

• Your UI is tiny: Popups, badges, and context menus are a fraction of the frame, so default framing makes them invisible
• The host page is the stage: Viewers need to recognize the site you are enhancing before they can see what you changed
• The value is a delta: You are not showing a feature, you are showing a page that got better
• Install is part of the product: Permission prompts and pinning are the first thing a new user meets, and they cause real drop-off

Plan the recording around those four facts and the rest is ordinary craft.

Build a Clean Demo Profile First

Never record an extension demo in your daily browser. Create a dedicated profile and use it only for recordings.

• Empty the toolbar: Every other extension icon competes with yours. Remove or hide all of them
• Pin only your extension: A single icon in an otherwise empty toolbar is unmistakable
• Sign out of personal accounts: Avatars, names, and email addresses show up in a surprising number of frames
• Clear bookmarks and the bookmarks bar: Or replace bookmarks with neutral, demo-safe ones
• Reset the new tab page: Default new tab pages often show your browsing history as thumbnails
• Turn off unrelated notifications: Both browser and OS level
• Set a sensible zoom level: 100% page zoom, and a window size that matches your export aspect ratio

Do this once, then save the profile. Every future recording starts from the same clean slate, which also makes your videos look consistent as a set.

Choose the Right Capture Mode

You have three reasonable options, and the choice depends on whether the browser chrome matters.

• Window capture: The default for extension demos. Viewers see the toolbar, which is where your icon and badge live. Capturing just the browser window also hides your desktop and dock
• Area capture: Good for a tight shot of the popup plus the part of the page it affects. Useful for short social clips, but it cuts off the toolbar, so viewers lose the sense of where your UI lives
• Full screen: Only when you need to show something outside the browser — a native file dialog, an OS permission prompt, or a second app your extension talks to

For most demos, record the browser window at a size close to 16:9, then use zoom in the editor for close-ups rather than switching capture modes mid-video.

Show the Install Flow Honestly

It is tempting to skip installation and jump to the working extension. Do the opposite for at least one video. New users worry about permissions, and watching someone breeze through the prompt is reassuring.

• Start from the store listing or your install button: The exact path a real user takes
• Do not hide the permission dialog: Let it appear, then explain in one sentence why the permission is needed. “It needs access to this site because it reads the prices on the page” answers the question before it becomes a doubt
• Show the pinning step: Many users install an extension and then cannot find it. Ten seconds of pinning the icon prevents a lot of support messages
• Use a fresh profile so the flow is real: An already-granted permission silently skips the dialog and makes your video misleading

If you also want a short feature-only clip, cut that separately from the same recording rather than compromising the full walkthrough.

Make Tiny UI Readable

This is where extension demos are won or lost. Your popup is small on your monitor and microscopic on a phone.

• Zoom on every popup open: A zoom effect centered on the popup for as long as it is open is the single highest-value edit in an extension video
• Zoom on the toolbar icon when the badge changes: A count going from 0 to 12 is meaningless if nobody can see the number
• Highlight the cursor: Clicks on a 16-pixel icon are invisible otherwise. Cursor highlights and click effects tell viewers exactly where the interaction happened
• Hold still after opening the popup: Give it a full second before you move the mouse. Motion on small UI reads as blur after compression
• Use text overlays for labels you cannot enlarge: A short caption beats squinting at 10-pixel type
• Do not rely on hover tooltips: They are small, slow, and often invisible in the recording. Say the label out loud instead

Structure It as Before and After

Extensions improve an existing experience, so lead with the pain.

1. Show the page without the extension for five to ten seconds. The manual work, the missing information, the tedious step
2. Turn the extension on or click its icon, visibly
3. Show the same page transformed, ideally in the same framing so the difference is obvious
4. Do one realistic task end to end using the feature
5. Close with the install path and where settings live

Keeping the framing identical between steps 1 and 3 does a lot of work for you: the viewer’s eye compares the two frames directly instead of trying to remember what the page looked like a minute ago.

Recording and Export Settings

• 30fps is plenty for page interactions and popup UI; text stays crisp and files stay small
• Record at native resolution and let the editor crop or zoom, rather than recording small and scaling up
• Keep the browser window fixed: Resizing mid-recording reflows the page and ruins your zoom keyframes
• Record system audio if the extension makes sounds, otherwise microphone only
• Export 1080p for the web, and consider a vertical crop of the best 20 seconds for social

A Pre-Record Checklist

[ ] Demo browser profile active, other extensions hidden
[ ] Only your extension pinned to the toolbar
[ ] Signed out of personal accounts, new tab page cleaned
[ ] Demo data prepared on the host page
[ ] Page zoom at 100%, window sized to your export ratio
[ ] Permissions not yet granted, if showing the install flow
[ ] Notifications off, notification badges cleared
[ ] Ten-second test recording checked at phone size

Common Mistakes

• Demoing in a browser with fifteen other extensions: Nobody can tell which icon is yours
• Never zooming: The most common reason extension videos fail
• Editing out the permission prompt: It reads as hiding something
• Using a real, logged-in account: Personal data leaks into frames you will not rewatch carefully
• Explaining the popup while moving the mouse: Pick one, then the other
• Forgetting the host page context: Viewers need to know what site this is before they care what changed

Conclusion

An extension demo has to do two jobs in under two minutes: show that the install is safe and simple, and make a small piece of UI feel significant. A clean profile handles the first. Zoom effects, cursor highlights, and a tight before-and-after structure handle the second. Record the browser window, keep it still, zoom on every popup, and let the transformed page make your argument for you.