Transform overwhelming YouTube playlists into actionable insights using AI.
Features • Installation • Usage • Architecture • API • Contributing
YouTube Curator is a Chrome extension that uses artificial intelligence to analyze YouTube playlists and provide intelligent recommendations. Instead of manually scanning through hundreds of videos, let AI categorize, summarize, and prioritize content for you.
- 📚 Playlists with 50+ videos are overwhelming
- ⏰ No time to watch everything
- 🔍 Hard to find the most relevant content
- 📋 No way to understand playlist themes at a glance
YouTube Curator automatically:
- 🤖 Scrapes video metadata from any YouTube playlist
- 🧠 Analyzes content using AI (via OpenRouter)
- 📊 Categorizes videos by theme and topic
- ⭐ Recommends which videos to watch first
- 📝 Summarizes the entire playlist in seconds
| Feature | Description |
|---|---|
| 🔄 Auto-Scroll Scraping | Automatically scrolls through lazy-loaded playlists to capture all videos |
| 🤖 AI Analysis | Uses OpenRouter API to access multiple LLM models (GPT-4, Claude, Gemini, etc.) |
| 🏷️ Smart Categorization | Groups videos by identified themes and topics |
| ⭐ Priority Recommendations | Suggests most valuable videos to watch first |
| 📊 Visual Dashboard | Beautiful dark-themed UI with progress indicators |
| 💾 Persistent State | Saves analysis results for later viewing |
| 🔧 Configurable Models | Choose from free or paid AI models |
| 🔒 Privacy-First | Your data stays local; only video titles go to AI |
- Node.js 18+ and npm
- Google Chrome browser
- OpenRouter API Key (free tier available)
# Clone the repository
git clone https://github.com/yourusername/youtube-curator.git
cd youtube-curator
# Install dependencies
npm install
# Build for production
npm run build- Open
chrome://extensionsin Chrome - Enable "Developer mode" (top right toggle)
- Click "Load unpacked"
- Select the
dist/folder from this project - Pin the extension to your toolbar
- Visit OpenRouter.ai
- Sign up (free) and create an API key
- Click the YouTube Curator extension icon → Settings
- Paste your API key and click Save
1. Navigate to YouTube → Open any YouTube playlist page
2. Click Extension Icon → Opens the YouTube Curator popup
3. Click "Start Scan" → Extension scrolls and extracts videos
4. Wait for Analysis → AI processes video metadata
5. View Results → Browse categorized insights
- ✅ Regular playlists (
/playlist?list=...) - ✅ Watch Later playlist
- ✅ Liked videos playlist
- ✅ Channel playlists
⚠️ Mix playlists (limited support)
The AI provides:
- Summary: One-paragraph overview of the playlist
- Themes: Key topics with video counts
- Categories: Grouped videos with rationale
- Recommendations: Top videos to watch first with reasons
YouTube Curator follows a modular Chrome Extension architecture using Manifest V3:
┌─────────────────────────────────────────────────────────────────┐
│ CHROME BROWSER │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ Messages ┌──────────────────────────┐ │
│ │ │◄──────────────►│ │ │
│ │ Popup │ │ Background Service │ │
│ │ (React) │ │ Worker │ │
│ │ │ │ │ │
│ └──────────────┘ └────────────┬─────────────┘ │
│ │ │
│ │ Messages │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────┐ │
│ │ Content Script │ │
│ │ (Runs in YouTube tab context) │ │
│ └─────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
│
│ HTTPS
▼
┌──────────────────┐
│ OpenRouter │
│ API (AI) │
└──────────────────┘
| Component | Technology | Purpose |
|---|---|---|
| Popup | React + TypeScript | User interface and controls |
| Background | Service Worker | State management, AI communication |
| Content Script | Vanilla TypeScript | DOM scraping, scroll automation |
| Messaging | Chrome Runtime API | Type-safe inter-process communication |
youtube-curator/
├── src/
│ ├── popup/ # React UI
│ │ ├── App.tsx # Main app component
│ │ ├── components/ # UI components
│ │ │ ├── ScanButton.tsx
│ │ │ ├── AnalysisResult.tsx
│ │ │ ├── SettingsPage.tsx
│ │ │ └── ProgressIndicator.tsx
│ │ ├── styles.css # Dark theme styling
│ │ └── main.tsx # React entry point
│ │
│ ├── background/
│ │ └── serviceWorker.ts # Background orchestration
│ │
│ ├── content/
│ │ └── youtubeScript.ts # YouTube DOM interaction
│ │
│ └── lib/ # Shared modules
│ ├── common/
│ │ ├── messaging.ts # Type-safe messaging
│ │ └── types.ts # TypeScript interfaces
│ ├── ai/
│ │ └── openRouterClient.ts # AI API client
│ ├── settings/
│ │ └── storage.ts # Chrome storage wrapper
│ └── youtube-mechanics/
│ ├── scroller.ts # Infinite scroll handler
│ └── parser.ts # Video metadata extractor
│
├── public/
│ └── icons/ # Extension icons
│
├── manifest.json # Chrome extension manifest
├── vite.config.ts # Vite + CRXJS configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts
The extension uses a type-safe messaging system:
interface MessageTypeMap {
// Popup → Background
'START_SCAN': { tabId: number };
'STOP_SCAN': {};
'GET_STATE': {};
'CLEAR_RESULTS': {};
// Background → Content Script
'SCROLL_TO_BOTTOM': { selector: string };
'PARSE_VIDEOS': { containerSelector: string };
// Content Script → Background
'SCROLL_PROGRESS': { loaded: number; estimatedTotal: number };
'VIDEOS_PARSED': { videos: VideoMetadata[] };
// Background → Popup
'STATE_UPDATE': ExtensionState;
'ANALYSIS_COMPLETE': { analysis: AnalysisResult };
}interface VideoMetadata {
id: string;
title: string;
channel: string;
duration: string;
thumbnail: string;
url: string;
}
interface AnalysisResult {
summary: string;
themes: Array<{ name: string; description: string; videoCount: number }>;
categories: Array<{ name: string; rationale: string; videos: string[] }>;
recommendations: Array<{
videoId: string;
reason: string;
priority: 'high' | 'medium' | 'low'
}>;
}# Development with hot reload
npm run dev
# Production build
npm run build
# Type checking
npm run typecheck
# Run tests
npm run test- Build Tool: Vite + CRXJS
- Language: TypeScript 5.3
- UI Framework: React 18
- Extension API: Chrome Manifest V3
- AI Provider: OpenRouter (LLM Gateway)
- Use
npm run devfor hot-reload during development - Check
chrome://extensions→ "Errors" for debugging - Use Chrome DevTools on the popup: right-click → "Inspect"
- Background script logs appear in the service worker console
- ✅ No user tracking - Zero analytics or telemetry
- ✅ Data stays local - Video data stored in Chrome's local storage
- ✅ Minimal AI exposure - Only video titles and channels sent to AI
- ✅ Your API key - You control and pay for AI usage
- ✅ Open source - Audit the code yourself
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a 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
- Follow existing TypeScript patterns
- Add types for all new code
- Test in Chrome before submitting
- Update documentation for new features
This project is licensed under the MIT License - see the LICENSE file for details.
- OpenRouter for providing LLM API access
- CRXJS for excellent Chrome extension tooling
- Vite for blazing-fast builds
Made with ❤️ by developers who had too many videos in their Watch Later
