Open-source browser extension for capturing screenshots, recording screen, annotating, and uploading to your own S3-compatible storage.
- Screenshot — Capture visible tab, select area, or full page
- Screen Recording — Record screen with system/mic audio, pause/resume, timer badge
- Video Preview — Dedicated player page to review videos before saving/uploading
- Annotation Editor — Draw, arrow, rectangle, text, blur, crop with undo/redo
- S3 Upload — Upload directly to AWS S3, Cloudflare R2, MinIO, or any S3-compatible storage
- Optimized Storage — Uses IndexedDB to store raw binary video blobs (no memory limits)
- Privacy-first — Your keys stay in your browser. No server. No tracking.
- Upload History — Keep track of your uploads with an optimized local history
- Manifest V3 — Built with the latest Chrome, Edge & Firefox extension standard
- Automated CI/CD — Fully automated GitHub Actions pipeline for releases
- Install the extension
- Click the extension icon to open the popup or use keyboard shortcuts
- Choose to capture a screenshot or start a screen recording
- Annotate your screenshot in the built-in Editor if needed
- The image/video is uploaded directly to your configured S3 bucket
- The public URL is automatically copied to your clipboard
- Customize settings in the Options page:
- Configure S3 endpoint, bucket, and credentials
- View your upload history
- Change upload path and file naming conventions
| Technology | Purpose |
|---|---|
| Vite | Fast multi-target build tooling |
| React 19 | Popup, Options & Editor UI |
| TypeScript | Type-safe codebase |
| Manifest V3 | Chrome, Edge & Firefox extension platform |
| Web Crypto API | AWS Signature V4 for secure S3 uploads |
| Offscreen Document | Manifest V3 standard getDisplayMedia screen recording |
| IndexedDB | Optimized raw binary video blob storage |
| Canvas 2D | Lightweight annotation system |
proscreen-s3/
├── public/
│ ├── icons/ # Extension icons (16, 48, 128px)
│ ├── _locales/ # i18n language files
│ └── manifest.json # Extension manifest (Chrome & Edge)
├── src/
│ ├── background/
│ │ ├── index.ts # Service worker — message router
│ │ ├── capture.ts # Screenshot handlers (visible, area, fullpage)
│ │ └── recording.ts # Recording state, timer, offscreen management
│ ├── content/
│ │ ├── capture-overlay.ts # Area selection & recording widget
│ │ └── content.css # Content script styles
│ ├── editor/
│ │ ├── Editor.tsx # Annotation editor (canvas-based)
│ │ ├── main.tsx # Editor entry point
│ │ └── editor.css # Editor styles
│ ├── offscreen/
│ │ └── recorder.ts # Screen recording (MediaRecorder)
│ ├── options/
│ │ ├── Options.tsx # Settings page & history
│ │ ├── main.tsx # Options entry point
│ │ └── options.css # Options styles
│ ├── popup/
│ │ ├── App.tsx # Extension popup UI
│ │ ├── main.tsx # Popup entry point
│ │ └── popup.css # Popup styles
│ ├── video/
│ │ ├── Video.tsx # Video preview & upload page
│ │ └── main.tsx # Video entry point
│ ├── lib/ # S3 signer, uploader, history, idb-store
│ ├── hooks/ # useSettings hook
│ ├── i18n/ # Chrome native i18n wrapper
│ ├── constants/ # Message types, external links
│ ├── utils/ # Storage, clipboard, image helpers
│ └── types.ts # TypeScript definitions & default settings
├── popup.html # Popup HTML shell
├── options.html # Options page HTML shell
├── editor.html # Editor page HTML shell
├── video.html # Video preview HTML shell
├── scripts/
│ └── build-firefox.js # Firefox manifest generator
├── vite.config.ts # Vite config (multi-target builds)
├── tsconfig.json
└── package.json
npm install# Chrome & Edge
npm run build
# Firefox
npm run build:firefoxThis builds the extension into the dist/ directory (Chrome/Edge) or dist-firefox/ (Firefox).
- Open
chrome://extensions/ - Enable Developer mode (top right)
- Click Load unpacked
- Select the
dist/folder - Click the extension icon and configure your S3 settings.
- Open
edge://extensions/ - Enable Developer mode (left sidebar)
- Click Load unpacked
- Select the
dist/folder - The extension works the same as in Chrome!
- Run
npm run build:firefox - Open
about:debugging#/runtime/this-firefox - Click Load Temporary Add-on
- Select
dist-firefox/manifest.json - Click the extension icon and configure your S3 settings.
# Dev build with watch
npm run dev
# Build production
npm run build
# Build Firefox version
npm run build:firefox
# Create distribution zip files
npm run zip
npm run zip:firefox| Setting | Description | Default |
|---|---|---|
| Upload Mode | Cloud Server (coming soon) or Custom S3 | Custom S3 |
| S3 Endpoint | The S3 API endpoint URL | Empty |
| S3 Region | The S3 bucket region | Empty |
| S3 Bucket | The S3 bucket name | Empty |
| S3 Access Key | Your S3 Access Key ID | Empty |
| S3 Secret Key | Your S3 Secret Access Key | Empty |
| Upload Path | Custom path/folder in your bucket | uploads/ |
| Public URL Format | Custom public URL (e.g., CDN domain) | Auto-generated |
Note: ProScreen S3 is compatible with AWS S3, Cloudflare R2, MinIO, DigitalOcean Spaces, Backblaze B2, Wasabi, and any standard S3-compatible object storage.
| Action | Shortcut |
|---|---|
| Capture Visible Tab | Alt+S |
| Capture Area | Alt+A |
| Start/Stop Recording | Alt+R |
You can customize these shortcuts at chrome://extensions/shortcuts, edge://extensions/shortcuts, or Firefox's about:addons → Manage Extension Shortcuts.
Contributions are welcome! Feel free to:
- Fork this repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License — see the LICENSE file for details.
Quy Nguyen
- Website: ngocquy.dev
- Email: contact@ngocquy.dev
