Capture extension

The Capture extension records the tab you're on, a window or your whole screen, with your microphone and camera, and logs what happens on the page while you record: clicks, typing, scrolls, page changes and private fields. That log is what makes Polish automatic. It tells the editor where to zoom, where the cursor goes and what to blur.

It's a small reference extension in the SDK repository (apps/capture-extension), built on @miraiclip/capture. Use it as it is, or as the starting point for your own.

InstallCopy Anchor Link

The extension isn't in the Chrome Web Store yet. Build it from the SDK repository and load it into Chrome or Edge:

1. Build it:

   Copy Text

   git clone https://github.com/comaniacs/miraiclip.git
   cd miraiclip
   pnpm install
   pnpm --filter miraiclip-capture-extension build   # → apps/capture-extension/dist

2. Open chrome://extensions (in Edge: edge://extensions).

3. Turn on Developer mode (top right in Chrome, left sidebar in Edge).

4. Click Load unpacked and choose the apps/capture-extension/dist folder.

5. Pin it: click the puzzle-piece icon in the toolbar, then the pin next to Miraiclip Capture.

After you change the extension's code, build again and click the reload icon on its card in chrome://extensions.

RecordCopy Anchor Link

1. Click the extension's toolbar button, or press Alt+Shift+M. The recorder panel opens at the top right of the page. On a page extensions can't touch (chrome://, the Web Store, a PDF), it opens on a page of its own instead; record a window or your screen from there.

2. Pick what to record:

   • Screen + Cam: your screen, window or tab, with your camera in a round bubble.
   • Screen only.
   • Cam only: just you, talking to the camera.

3. For the screen, pick Screen, Window or This tab (see the differences).

4. Choose your camera and microphone. The green line under the microphone moves when it hears you. Pick No microphone to record without voice. The first time, Chrome asks the site for the camera and microphone.

5. Click Start recording. Chrome's share picker opens on the kind you picked; choose what to share and click Share. A 3-second countdown follows (click it to start right away, or press Esc to go back).

6. Do your walkthrough. The controls sit at the bottom left of the page:

   Control	What it does
   ■ (red)	Finish the recording. Alt+Shift+X works from any tab
   ❚❚ / ▶	Pause and resume. Alt+Shift+P. Paused time is cut from the video and the log alike
   Flag	Mark a step. Alt+Shift+S. Steps become chapters, sections of the written guide and lines of the voiceover
   Pen	Draw on the page (see Draw on the page)
   Microphone	Mute and unmute your voice
   ↻	Restart: delete this take and record again after the countdown, without picking the screen again
   Bin	Delete the recording and go back to the panel

   Restart and delete ask first, and the recording pauses while you decide. While recording, the extension's toolbar button shows a red REC badge (grey while paused).

7. Finish. The recording is saved in the extension and opens in a new tab, ready to watch, rename and download (see Review and download).

Close the panel with ✕ to cancel and release the camera and microphone. Clicking the toolbar button again hides or shows the panel.

The camera bubbleCopy Anchor Link

With Screen + Cam or Cam only, a round preview of your camera sits at the bottom left of the page.

• Drag it anywhere. S, M and L (shown when you hover it) resize it. The extension remembers where you put it.
• The bubble hides when the recording starts, so it isn't recorded into the screen video. The camera is saved as its own file, and the editor places it as a round picture-in-picture you can shape and move under Camera. Turn on Also show the camera bubble in the screen video to keep it on the page instead; the camera then shows twice in the editor until you hide one (Camera → Show the camera).
• Float over other apps (the last button under the bubble) moves the camera into a small always-on-top window, so you stay in view when a window or screen recording moves to other tabs or apps. Click the bubble's placeholder, or close that window, to bring it back.
• Mirror my camera preview flips the preview like a mirror. The recorded camera is never flipped.

Draw on the pageCopy Anchor Link

Click the pen in the controls to circle, point at or box something while you talk. A toolbar opens beside it:

• Pen, Highlighter, Arrow and Box, in red, yellow, green, blue or white.
• Fade (on by default): each mark fades away about three seconds after you draw it, so the page clears itself as you move on. Turn it off to keep marks until you clear them.
• Undo (Ctrl+Z, ⌘Z on a Mac) and Clear.
• ✕ or Esc stops drawing and wipes the marks.

The marks are drawn on the page, so they are in the screen video (for a window or screen recording, as long as that tab is on screen). The page can't be clicked while you draw, and your drawing isn't logged as clicks, so it doesn't trigger auto-zooms. To draw with the keyboard, set a key for Draw on the page while recording at chrome://extensions/shortcuts. Drawing isn't offered in Cam only recordings.

Tab, window or screenCopy Anchor Link

Record a tab when you can: everything is exact, and you choose the cursor's look. Pick a window or the screen when the walkthrough moves between tabs or windows, or outside the browser.

Why not other apps? An extension only sees inside web pages; Chrome gives it no way to see clicks in a desktop app. And Chrome always draws the real pointer into a window or screen recording, whatever a page asks for. For walkthroughs outside the browser, use the desktop recorder: it logs clicks and shortcuts in every app.

For window and screen recordings, keep each browser window still while recording (positions are measured as you click, but a window being dragged can be off for a moment).

Shortcuts work from any tab: Alt+Shift+M opens the recorder, Alt+Shift+X finishes, Alt+Shift+P pauses or resumes, Alt+Shift+S marks a step. Change them at chrome://extensions/shortcuts.

Permissions. To log clicks in every tab, the extension runs a small logger in every page, so Chrome lists it as able to "read and change data on all websites". The logger does nothing until you start a window or screen recording, and stops when you stop. Like the tab recorder, it never logs what you type.

Review and downloadCopy Anchor Link

Every recording is kept in the extension, on your computer, until you delete it. The review page lists them all, newest first (open it any time from Your recordings in the panel). For each one you can:

• Watch it, with your camera placed as a picture-in-picture (Show camera) when it isn't already in the video.
• Rename it: click the title.
• Jump to a step: click it in the Steps list.
• Download for the editor: one .mcrec file holding the screen video, the camera video and the log. A recording over 4 GB downloads as separate files instead (.webm, .camera.webm and .session.json).
• Download video: just the screen video with your voice, as .webm.
• Delete it (click twice).

New starts another recording from the review page.

Open it in the editorCopy Anchor Link

In the Editor UI kit, open Record in the left rail, click Choose files… under Import a recording, and pick the .mcrec file (or all the separate files together). The camera goes in a corner as a picture-in-picture; shape and move it under Camera. The recording opens as a new project, with a marker for every step you marked. Then go to Polish.

What's in the logCopy Anchor Link

Fields are flagged private when they are password, card or one-time-code fields, when their name, id, placeholder or label looks secret (password, token, API key, secret, card, CVV, IBAN, PIN…), or when they sit inside an element marked data-private or data-sensitive (or with the class private or sensitive). Mark anything else you never want shown, such as an account balance:

<div data-private>Balance: $12,480</div>

Private fields are pixelated by Polish and never outlined in a written guide. The recorder's own clicks (the panel, the bubble, the controls and drawing) aren't logged.

Good to knowCopy Anchor Link

• Keep the recorder's page open. The recorder runs inside the page where you started it. Following a link there, reloading it or closing it ends the recording. Other tabs are free to navigate (in a window or screen recording they're logged too), and in-app navigation in single-page apps is fine.
• The controls are in the video. In a tab recording (and in a window or screen recording of that tab) the controls at the bottom left are recorded too. Crop them out, or keep that corner of your page empty.
• Resizing is fine. Resizing or zooming the window during a tab recording keeps the video going: the page is scaled to fit the original frame, and clicks still line up.
• Camera and microphone are asked per site. Chrome remembers the answer for each site, so a new site asks again.
• The pointer isn't in tab recordings (Polish draws one in your style); it is in window and screen recordings (Polish can highlight it).
• Storage. Recordings stay in the extension until you delete them; the review page shows how much space they use. Removing the extension deletes them.

Build your ownCopy Anchor Link

The extension is built on @miraiclip/capture: startRecording records the screen, microphone and camera with the log, recording.mark() adds steps, pause() and resume() cut paused time from the video and the log, and packRecording makes the .mcrec file. Upload the files to your backend instead of keeping them in the extension, or open your editor directly when recording stops.