A Chrome/Firefox browser extension (Manifest V3) that extracts YouTube video transcripts and generates AI-powered Mermaid.js concept map diagrams. View, edit, copy, and export transcripts and diagrams from a dashboard that replaces your new-tab page.
- Transcript Extraction — One-click transcript capture from any YouTube video via the extension popup
- AI Diagram Generation — Generate Mermaid.js concept maps from transcripts using Google Gemini AI (
gemini-2.5-flash-lite) - Monaco Editor — Edit generated Mermaid diagram code with full syntax support
- Diagram Export — Export diagrams as PNG, SVG, or PDF with configurable background and resolution
- Transcript History — Browse and manage up to 50 saved transcripts from the dashboard
- Dark/Light Mode — Theme switching via next-themes
- Internationalization — Full English and Spanish language support (i18next)
- Cross-Browser — Adapter pattern supports Chrome and Firefox APIs
| Technology | Purpose |
|---|---|
| TypeScript (~5.6) | Language |
| Preact (10.28) | UI framework (aliased as React) |
| Chakra UI v3 | Component library |
| Zustand (5.x) | State management |
| Vite (5.x) | Build tool |
| @crxjs/vite-plugin | Extension bundling |
| Google Gemini AI | Diagram generation |
| Mermaid.js | Diagram rendering |
| Monaco Editor | Code editor |
| i18next + react-i18next | Internationalization |
| Vitest (4.x) | Unit testing |
| pnpm | Package manager |
# Clone the repository
git clone https://github.com/Savecoders/YTranscripts.git
cd YTranscripts
# Install dependencies
pnpm install
# Build for production
pnpm run build- Open
chrome://extensions - Enable Developer mode
- Click Load unpacked and select the
dist/folder
- Open
about:debugging#/runtime/this-firefox - Click Load Temporary Add-on
- Select any file inside the
dist/folder
- Navigate to a YouTube video
- Click the YTranscripts extension icon
- Click Get Transcript to extract the video transcript
- Open a new tab to access the dashboard with your saved transcripts
- Click Generate on any transcript to create an AI-powered Mermaid diagram
- Edit the diagram code in Monaco Editor, export as PNG/SVG/PDF, or copy to clipboard
Note: Diagram generation requires a Google Gemini API key. Configure it in Settings from the dashboard.
pnpm run dev # Start Vite dev server with HMR
pnpm run build # TypeScript check + Vite production build
pnpm run lint # Run ESLint
pnpm run preview # Preview production buildThe project uses Vitest with jsdom and @testing-library/preact. There are 84 unit tests across 7 test files covering services, store, utilities, and i18n configuration.
pnpm run test# Run all tests once
pnpm run test:watch # Run tests in watch mode
pnpm run test:coverage # Run tests with coverage report┌─────────────────────────────────────────────────────────┐
│ Pages (Popup + Dashboard) │
├─────────────────────────────────────────────────────────┤
│ Store (Zustand — history, CRUD, optimistic updates) │
├─────────────────────────────────────────────────────────┤
│ Services │
│ BrowserAdapter (Chrome/Firefox) | StorageService │
│ GeminiService | DiagramExporter + ExportBuilder │
├─────────────────────────────────────────────────────────┤
│ Content Script (YouTube DOM transcript extraction) │
└─────────────────────────────────────────────────────────┘