SkipTube AI

AI-powered Chrome extension that automatically detects and skips sponsorships, intros, outros, and promotional content in YouTube videos using Claude AI or OpenAI.

Install from Chrome Web Store • Video • Screenshots • Support

🎬 See It in Action

skiptube-ai-promo.mp4

_{▶ Press play for sound. Not rendering in GitHub? Download the MP4.}

🚀 Features

🤖 Multiple AI Providers: Choose between Anthropic Claude or OpenAI GPT for transcript analysis
🎯 Smart Model Selection: Pick the best model for your needs (Haiku/Sonnet for Claude, GPT-4o/4o-mini for OpenAI)
⚡ Automatic Skipping: Seamlessly skips detected segments without interruption
🎨 Visual Timeline Markers: Color-coded segments on YouTube's progress bar
⚙️ Customizable Categories: Choose what to skip (sponsors, intros, outros, donations, self-promo)
💾 Smart Caching: Stores analysis results locally for 30 days
📊 Detailed Statistics: Track time saved, segments skipped, and analyzed videos
🔒 Privacy-First: All data stored locally, you control your own API key
🎯 Channel Whitelist: Exclude specific channels to support your favorite creators
⚡ Advanced Settings: Configure AI model, confidence threshold, and skip buffer

📸 Screenshots

Popup settings	Advanced configuration

Statistics	Channel exclusions

📦 Installation

For Users

Install from Chrome Web Store (Recommended)
- Visit the SkipTube AI Chrome Web Store page
- Click "Add to Chrome"
- Follow the installation prompts
Get Your API Key

Choose your preferred AI provider:

Option A: Anthropic Claude (Recommended)
- Visit Anthropic Console
- Create a free account if you don't have one
- Generate a new API key (starts with sk-ant-)
Option B: OpenAI GPT
- Visit OpenAI Platform
- Create an account if you don't have one
- Generate a new API key (starts with sk-)
Configure the Extension
- Click the SkipTube AI icon in your Chrome toolbar
- Select your AI Provider (Claude or OpenAI)
- Paste your API key in the corresponding section
- Click "Save"
- Choose your preferred AI model
- Select which categories to skip
- Done! Start watching YouTube videos

For Developers

See Development Setup below.

🎬 How It Works

Transcript Extraction: When you watch a YouTube video with captions, SkipTube AI extracts the transcript from the page
AI Analysis: The transcript is sent to Claude AI for intelligent analysis
Segment Detection: Claude identifies sponsorships, intros, outros, donations, and self-promotions
Smart Caching: Results are cached locally for 30 days to avoid re-analysis
Visual Feedback: Colored markers appear on the video timeline
Automatic Skipping: The extension automatically skips identified segments during playback

🔒 Privacy & Security

✅ Your API key is stored locally in your browser (encrypted by Chrome)
✅ All settings and cache are stored locally on your device
✅ No tracking - we don't collect any personal data
✅ No remote servers - we don't operate any backend
✅ Open source - all code is publicly auditable
✅ Transparent - only video transcripts are sent to Anthropic for analysis

Read our full Privacy Policy.

📋 Detected Categories

Category	Description	Color
🎯 Sponsorships	Paid promotions, sponsored content, discount codes	🔴 Red
🎬 Intros	Opening sequences, channel intros	🔵 Cyan
👋 Outros	Closing sequences, end screens	🟣 Purple
💝 Donations	SuperChat readings, patron mentions	🟢 Green
📢 Self-Promotion	Merch plugs, social media callouts	🟠 Orange

❓ FAQ

Does it work on all YouTube videos?

It works on videos with available captions/transcripts. If a video doesn't have captions, the extension cannot analyze it.

Is my API key secure?

Yes! Your API key is stored locally using Chrome's secure storage API. It's never transmitted to us or third parties (except Anthropic for analysis).

Can I exclude certain channels?

Absolutely! Go to "Advanced Settings" → "Excluded channels" and add channels you want to support.

Does it slow down YouTube?

No! Analysis happens in the background. Already-analyzed videos load instantly (< 100ms) thanks to caching.

Can I customize what gets skipped?

Yes! You can individually enable/disable each category and adjust the AI confidence threshold (0.5-1.0).

🛠️ Development Setup

Prerequisites

Node.js (v16 or higher)
npm or yarn
Chrome browser
API key from either:
- Anthropic Console (Claude)
- OpenAI Platform (GPT)

1. Clone and Install

git clone https://github.com/ChromuSx/SkipTubeAI.git
cd SkipTubeAI
npm install

2. Build the Extension

# Development build (with source maps)
npm run build

# Watch mode (rebuilds on file changes)
npm run watch

# Production build (minified)
NODE_ENV=production npm run build

3. Load in Chrome

Open Chrome and navigate to chrome://extensions/
Enable "Developer mode" (toggle in top-right)
Click "Load unpacked"
Select the dist directory (not the root directory!)
The extension is now loaded!

4. Configure API Key

Click the extension icon in Chrome toolbar
Enter your Claude API key in the popup
Click "Save"

Note: Unlike the old version, the API key is now configured through the UI, not hardcoded in source files.

📁 Project Structure

SkipTubeAI/
├── src/                                # 📂 SOURCE CODE (edit here)
│   ├── background/                     # Background service worker
│   │   └── background-main.js          # Main background orchestrator
│   │
│   ├── content/                        # Content script (YouTube page)
│   │   └── content-main.js             # Main content orchestrator
│   │
│   ├── popup/                          # Extension popup
│   │   ├── popup.html                  # Popup UI
│   │   └── popup-main.js               # Popup logic
│   │
│   ├── cache-viewer/                   # Cache viewer page
│   │   ├── cache-viewer.html           # Cache viewer UI
│   │   └── cache-viewer-main.js        # Cache viewer logic
│   │
│   ├── help/                           # Help page
│   │   ├── help.html                   # Help page UI
│   │   └── help.js                     # Help page script
│   │
│   ├── shared/                         # Shared modules
│   │   ├── config.js                   # Configuration constants
│   │   ├── constants.js                # Application constants
│   │   ├── utils.js                    # Utility functions
│   │   │
│   │   ├── errors/                     # Error classes
│   │   │   ├── base-error.js
│   │   │   ├── api-error.js
│   │   │   ├── storage-error.js
│   │   │   ├── validation-error.js
│   │   │   ├── transcript-error.js
│   │   │   └── error-handler.js
│   │   │
│   │   ├── logger/                     # Logging system
│   │   │   ├── log-levels.js
│   │   │   └── logger.js
│   │   │
│   │   ├── models/                     # Data models
│   │   │   ├── segment.js
│   │   │   ├── transcript.js
│   │   │   ├── settings.js
│   │   │   └── analysis-result.js
│   │   │
│   │   ├── validators/                 # Validation logic
│   │   │   ├── segment-validator.js
│   │   │   ├── settings-validator.js
│   │   │   ├── api-validator.js
│   │   │   └── transcript-validator.js
│   │   │
│   │   ├── repositories/               # Data access layer
│   │   │   ├── cache-repository.js
│   │   │   ├── settings-repository.js
│   │   │   └── stats-repository.js
│   │   │
│   │   └── services/                   # Business logic
│   │       ├── ai-service.js           # AI analysis
│   │       ├── storage-service.js      # Chrome storage wrapper
│   │       ├── analytics-service.js    # Statistics tracking
│   │       ├── transcript-service.js   # Transcript extraction
│   │       └── providers/              # AI provider implementations
│   │           ├── base-provider.js    # Abstract provider class
│   │           ├── claude-provider.js  # Anthropic Claude
│   │           └── openai-provider.js  # OpenAI GPT
│   │
│   ├── manifest.json                   # Chrome extension manifest
│   ├── icons/                          # Extension icons
│   └── logo.png                        # Extension logo
│
├── dist/                               # 📦 BUILD OUTPUT (load this in Chrome!)
│   ├── manifest.json                   # Copied from src/
│   ├── popup.html                      # Copied from src/popup/
│   ├── cache-viewer.html               # Copied from src/cache-viewer/
│   ├── help.html                       # Copied from src/help/
│   ├── help.js                         # Copied from src/help/
│   ├── icons/                          # Copied from src/
│   ├── logo.png                        # Copied from src/
│   ├── background-bundle.js            # Compiled from src/background/
│   ├── content-bundle.js               # Compiled from src/content/
│   ├── popup-bundle.js                 # Compiled from src/popup/
│   └── cache-viewer-bundle.js          # Compiled from src/cache-viewer/
│
├── rollup.config.*.js                  # Build configurations
├── package.json                        # Dependencies and scripts
├── marketplace/                        # Chrome Web Store listing text and assets
│   └── chrome-web-store/
│       ├── screenshots/                # Store screenshots
│       ├── promotional-images/         # Store promo tiles
│       ├── promotional-video/          # MP4, thumbnail, YouTube metadata
│       └── video/                      # Remotion source for the promo video
├── PRIVACY.md                          # Privacy policy
├── CLAUDE.md                           # Claude Code instructions
└── README.md                           # This file

🛒 Chrome Web Store Assets

All store-ready assets live in marketplace/chrome-web-store/:

listing-description.md - detailed Chrome Web Store description
listing-fields.md - name, summary, category, support URL, homepage URL, and privacy URL
privacy-dashboard.md - single purpose and permission justifications
screenshots/ - final store screenshots
promotional-images/ - small and featured promotional tiles
promotional-video/ - rendered MP4, YouTube thumbnail, and upload metadata
video/ - Remotion source used to render the promotional video

Render the promo video locally with:

npm run promo:video:render
npm run promo:video:thumbnail

💡 Development Workflow

Edit files in src/ - This is your source code
Run npm run build - Compiles everything to dist/
Load dist/ in Chrome - Load the dist folder as unpacked extension
Changes not showing? - Rebuild and reload the extension

🏗️ Architecture

Message Flow

YouTube Page (content.js)
      ↓
  Extract Transcript
      ↓
  Send to Background ──→ Background Service Worker
                              ↓
                         Check Cache
                              ↓
                      AI Analysis (Claude)
                              ↓
                      Parse & Validate
                              ↓
                         Save Cache
                              ↓
  Content Script ←──── Return Segments
      ↓
  Render Markers
      ↓
  Monitor & Skip

Key Components

Background Service Worker

AIService: Handles Claude API communication
StorageService: Manages Chrome storage operations
CacheRepository: Dual-layer caching (memory + persistent)
AnalyticsService: Tracks statistics

Content Script

TranscriptService: Extracts transcripts from YouTube DOM
VideoMonitor: Monitors playback and executes skips
SegmentManager: Manages skip segments
UIManager: Renders visual markers and notifications

Popup

PopupManager: Manages settings UI
SettingsRepository: Persists user preferences

Shared Infrastructure

Models: Type-safe data structures (Segment, Transcript, Settings, AnalysisResult)
Validators: Input validation and sanitization
Errors: Custom error hierarchy
Logger: Structured logging with levels

🔧 Configuration

AI Models

// src/shared/config.js
API: {
  ENDPOINT: 'https://api.anthropic.com/v1/messages',
  MODELS: {
    HAIKU: 'claude-3-5-haiku-20241022',    // Fast & economical
    SONNET: 'claude-sonnet-4-5-20250929'   // More accurate
  }
}

Cache Settings

CACHE: {
  MAX_AGE_DAYS: 30,        // Auto-clean cache older than 30 days
  KEY_PREFIX: 'analysis_'
}

Default User Settings

DEFAULTS: {
  skipSponsors: true,
  skipIntros: false,
  skipOutros: false,
  skipDonations: true,
  skipSelfPromo: true,
  autoSkip: true,
  enablePreview: true
}

📦 Build System

The project uses Rollup for bundling with the following features:

✅ Modular ES6+ source code
✅ Tree-shaking for optimized bundles
✅ Source maps in development mode
✅ Minification in production mode
✅ Separate bundles for background, content, popup, and cache-viewer

Build Commands

npm run build                  # Build all bundles
npm run build:content          # Build content script only
npm run build:background       # Build background script only
npm run build:popup            # Build popup only
npm run build:cache-viewer     # Build cache viewer only
npm run watch                  # Watch mode for development

🧪 Testing

Manual Testing

Load extension in Chrome (see Development Setup)
Open a YouTube video with captions
Open DevTools Console (F12)
Verify analysis starts automatically
Check timeline for colored markers
Test auto-skip functionality

Debugging

Background logs: chrome://extensions/ → Click "service worker" link
Content logs: F12 on YouTube page → Console tab
Storage: DevTools → Application → Storage → Extension
Clear cache: Click "Clear all" in extension popup
Force reanalysis: Click "Reanalyze" button

🐛 Common Issues

Extension not working

Verify the extension is enabled in chrome://extensions/
Check that the Active toggle is ON in the popup
Ensure you've configured a valid API key
Verify the video has captions/transcripts available

"API Key not configured" error

Click the extension icon
Enter your Claude API key in the "API Configuration" section
Click "Save"
Reload the YouTube page

Segments not appearing

Video must have captions/transcripts
Try manually opening the transcript panel on YouTube
Check browser console for errors
Verify at least one skip category is enabled

Build errors

rm -rf node_modules dist
npm install
npm run build

📊 Performance

Metric	Value
First analysis	2-5 seconds
Cached video	< 100ms
Memory usage	5-10 MB
Storage per video	1-2 KB

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Make your changes
Build and test: npm run build
Commit: git commit -m "Add amazing feature"
Push: git push origin feature/amazing-feature
Open a Pull Request

Development Guidelines

Follow existing code style
Add JSDoc comments for new functions
Test thoroughly before submitting
Update documentation if needed

💖 Support the Project

This project is completely free and open source. If you find it useful and would like to support its continued development and updates, consider making a donation. Your support helps keep the project alive and motivates me to add new features and improvements!

Every contribution, no matter how small, is greatly appreciated! ❤️

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Claude AI by Anthropic for providing the AI analysis engine
Chrome Extensions API for the extension framework
Rollup for the build system
YouTube for providing transcript data
All contributors and users who provide feedback

📞 Support

🐛 Report bugs: GitHub Issues
💬 Discussions: GitHub Discussions
📖 Documentation: See CLAUDE.md for detailed implementation notes
✉️ Email: giovanni.guarino1999@gmail.com

🔗 Links

If you find this extension helpful, consider ⭐ starring the repository!

_{Made with ❤️ by Giovanni Guarino}

Name		Name	Last commit message	Last commit date
Latest commit History 42 Commits
marketplace/chrome-web-store		marketplace/chrome-web-store
memory		memory
src		src
.gitignore		.gitignore
AGENTS.md		AGENTS.md
PRIVACY.md		PRIVACY.md
README.md		README.md
package.json		package.json
rollup.config.background.js		rollup.config.background.js
rollup.config.cache-viewer.js		rollup.config.cache-viewer.js
rollup.config.content.js		rollup.config.content.js
rollup.config.popup.js		rollup.config.popup.js
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

SkipTube AI

🎬 See It in Action

🚀 Features

📸 Screenshots

📦 Installation

For Users

For Developers

🎬 How It Works

🔒 Privacy & Security

📋 Detected Categories

❓ FAQ

🛠️ Development Setup

Prerequisites

1. Clone and Install

2. Build the Extension

3. Load in Chrome

4. Configure API Key

📁 Project Structure

🛒 Chrome Web Store Assets

💡 Development Workflow

🏗️ Architecture

Message Flow

Key Components

Background Service Worker

Content Script

Popup

Shared Infrastructure

🔧 Configuration

AI Models

Cache Settings

Default User Settings

📦 Build System

Build Commands

🧪 Testing

Manual Testing

Debugging

🐛 Common Issues

Extension not working

"API Key not configured" error

Segments not appearing

Build errors

📊 Performance

🤝 Contributing

Development Guidelines

💖 Support the Project

📝 License

🙏 Acknowledgments

📞 Support

🔗 Links

About

Topics

Resources

Code of conduct

Contributing

Security policy

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages