A Chrome browser extension for capturing screenshots and recording screencasts directly from the browser.
- Screenshot capture — take a snapshot of the current visible tab
- Screencast recording — record video of the current tab using the Chrome Tab Capture API
- User-defined frame — select a region of the screen before recording
- Video editor — preview and save the recorded video after recording stops
- React 18 + TypeScript
- Vite — build tooling with multi-entry support
- Nanostores — lightweight state management
- @dnd-kit — drag-and-drop for the toolbar
- SCSS Modules — component-scoped styles
- Chrome Extensions Manifest V3
- Node.js 18+
- npm or any compatible package manager
- Google Chrome 116+
npm installnpm startWatches for changes and rebuilds automatically via nodemon.
npm run buildOutput is placed in the dist/ folder.
The extension requires the following Chrome permissions:
| Permission | Purpose |
|---|---|
activeTab |
Access the current tab |
tabs |
Query tab information |
tabCapture |
Capture tab media stream for recording |
desktopCapture |
Desktop/tab capture support |
offscreen |
Run MediaRecorder in an offscreen document |
pageCapture |
Capture visible tab as image |
storage |
Persist toolbar state |
- Click the extension icon to open the popup.
- Click Show toolbar to inject the floating toolbar into the current page.
- Drag the toolbar to reposition it anywhere on the page.
- Click Start to begin recording the tab (you may define a frame area first).
- Click Stop to end the recording.
- The video editor opens automatically — preview and save the recording.
Alternatively, use Take a picture in the popup to capture an instant screenshot.
MIT