One-click screenshot capture, upload to Cloudflare R2, CDN URL to clipboard
- One-click capture -- screenshot visible tab from browser toolbar
- Cloudflare R2 upload -- automatic upload via S3-compatible API with date-folder/GUID naming
- CDN URL -- generates public URL from custom domain, copies to clipboard with toast feedback
- Smart endpoint parsing -- paste a full S3 API URL and auto-extract endpoint + bucket name
- Connection test -- verify R2 credentials before saving
- Themes -- system / light / dark
- Configurable quality -- adjust JPG compression (1-100)
- i18n -- 10 languages: English, ็ฎไฝไธญๆ, ็น้ซไธญๆ, ๆฅๆฌ่ช, ํ๊ตญ์ด, Francais, Deutsch, Espanol, Portugues (BR), ะ ัััะบะธะน
- Bun v1.x+
- Google Chrome
bun installThe
preparescript automatically sets up Git hooks.
bun run build- Navigate to
chrome://extensions/ - Enable Developer mode (top-right toggle)
- Click Load unpacked -> select the
dist/directory
| Command | What it does |
|---|---|
bun run dev |
Start Vite dev server |
bun run build |
Type-check and build for production |
bun run build:zip |
Build + package into dist/r2shot-<version>.zip for Chrome Web Store |
bun run test |
Run unit tests (Vitest) |
bun run test:watch |
Run tests in watch mode |
bun run test:coverage |
Run tests with V8 coverage report (90% threshold) |
bun run test:e2e |
Run E2E tests |
bun run lint |
Lint src/ with ESLint (zero warnings enforced) |
bun run lint:fix |
Lint and auto-fix |
Hooks live in .husky/ and are activated via git config core.hookspath .husky.
| Stage | Command | Purpose |
|---|---|---|
pre-commit |
bun run test |
Catch regressions before commit |
pre-push |
bun run test && bun run lint |
Full quality gate before push |
Coverage is enforced at 90% for all four metrics:
--------------------|---------|----------|---------|---------|
File | % Stmts | % Branch | % Funcs | % Lines |
--------------------|---------|----------|---------|---------|
All files | 97.62 | 91.60 | 93.93 | 97.62 |
--------------------|---------|----------|---------|---------|
r2shot/
โโโ .husky/ # Git hooks (pre-commit, pre-push)
โโโ assets/ # Store descriptions (10 languages)
โโโ e2e/ # E2E tests
โ โโโ workflow.test.ts
โโโ public/
โ โโโ _locales/ # i18n messages (10 languages)
โ โโโ icons/ # Extension & UI icons (16-128px, logo 32/64px)
โ โโโ manifest.json # Chrome Extension Manifest V3
โโโ scripts/
โ โโโ build.sh # Build + package ZIP for Chrome Web Store
โ โโโ generate-icons.sh # Generate icons from logo.png via sips
โโโ src/
โ โโโ background/ # Service worker (message routing)
โ โโโ core/ # Domain logic (upload, config, connection, storage)
โ โโโ popup/ # Toolbar popup (capture + copy UI)
โ โโโ settings/ # Settings page (R2 config, theme)
โ โโโ shared/ # Shared UI components (Button, Input, Label, theme)
โ โโโ types/ # Message types
โโโ logo.png # Source logo (2048x2048)
โโโ popup.html # Popup entry HTML
โโโ settings.html # Settings entry HTML
โโโ PRIVACY.md # Privacy policy
โโโ vite.config.ts # Multi-entry Vite build config
โโโ vitest.config.ts # Vitest + coverage config
โโโ vitest.e2e.config.ts # E2E test config
โโโ eslint.config.js # ESLint flat config
โโโ tsconfig.json # TypeScript config (path aliases)
โโโ package.json # Scripts & dependencies
| Layer | Technology |
|---|---|
| Language | TypeScript |
| UI | React 19, Tailwind CSS 4, Lucide icons |
| Build | Vite 6 |
| Testing | Vitest 3, Testing Library, happy-dom |
| Upload | @aws-sdk/client-s3 (S3-compatible) |
| Extension | Chrome Manifest V3 |
bun run build:zipThis produces dist/r2shot-<version>.zip containing the built extension ready for upload.
| Asset | Location | Status |
|---|---|---|
| Description (EN) | assets/description-en.txt |
Done |
| Description (ZH) | assets/description-zh.txt |
Done |
| Description (ZH-TW) | assets/description-zh-tw.txt |
Done |
| Description (JA) | assets/description-ja.txt |
Done |
| Description (KO) | assets/description-ko.txt |
Done |
| Description (FR) | assets/description-fr.txt |
Done |
| Description (DE) | assets/description-de.txt |
Done |
| Description (ES) | assets/description-es.txt |
Done |
| Description (PT-BR) | assets/description-pt-br.txt |
Done |
| Description (RU) | assets/description-ru.txt |
Done |
| Privacy Policy | PRIVACY.md |
Done |
| Store Icon (128x128) | public/icons/icon128.png |
Done |
- Register at the Chrome Web Store Developer Dashboard ($5 one-time fee)
- Run
bun run build:zipto generate the ZIP - Upload
dist/r2shot-<version>.zip - Fill in listing details using the descriptions in
assets/ - Set privacy policy URL to
https://github.com/nocoo/r2shot/blob/main/PRIVACY.md - Upload store icon and at least 1 screenshot (1280x800 or 640x400)
- Submit for review (typically 1-3 business days)