YouTube Transcript Panel Extension v2.0

A modular Chrome extension that extracts YouTube video transcripts and seamlessly transfers them to Claude.ai with video context.

🚀 Features

YouTube Side

• 🤖 Claude - One-click transcript extraction and transfer to Claude.ai
• 📝 Show - Opens YouTube's native transcript panel
• 📋 Copy - Copies formatted transcript to clipboard
• 🖼️ Hover - Toggle thumbnail hover for enlarged previews

Claude Side

• Floating Widget - Shows video context while chatting
• Draggable Interface - Position widget anywhere on screen
• Minimize/Restore - Collapse to mini button when not needed
• Thumbnail Preview - Click to see full-size video thumbnail

🏗️ Architecture

This extension follows modular architecture with clear separation of concerns:

Core Modules

1. Configuration - Centralized settings and constants
2. Logger - Configurable logging system (DEBUG/INFO/WARN/ERROR)
3. Error Handler - Robust error handling with recovery strategies
4. Storage Manager - Type-safe Chrome storage operations
5. Transcript Extractor - YouTube transcript extraction logic
6. UI Manager - Button injection and notification system
7. Thumbnail Handler - Hover functionality and image loading
8. Claude Widget - Floating widget management

Development Guidelines Compliance

✅ Modular Code Architecture - Each module has single responsibility ✅ Configurable Logging - Multiple verbosity levels with timestamps ✅ Centralized Configuration - All settings in CONFIG object ✅ Robust Error Handling - Graceful degradation and recovery ✅ E2E Testing Ready - Clear module boundaries for testing

📦 Installation

1. Clone this repository
2. Open Chrome → chrome://extensions/
3. Enable "Developer mode"
4. Click "Load unpacked" → Select extension directory

🎯 Usage

On YouTube:

1. Navigate to any video with transcripts
2. Look for buttons in the sidebar:
   • Click 🤖 Claude to send transcript to Claude
   • Click 📝 to show transcript panel
   • Click 📋 to copy transcript
   • Click 🖼️ to toggle thumbnail hover

On Claude.ai:

• A floating widget appears with video info
• Drag to reposition, minimize, or close
• Click thumbnail for full-size preview
• Click title to return to YouTube

🛠️ Development

Enable Debug Logging

// YouTube side
window.__YT_TRANSCRIPT_DEBUG__.setLogLevel(0); // 0 = DEBUG

// Claude side
window.__CLAUDE_WIDGET_DEBUG__.setLogLevel(0);

Key Configuration

CONFIG = {
  FEATURES: {
    THUMBNAIL_HOVER: true,
    AUTO_HIDE_TRANSCRIPT: true,
    PRELOAD_THUMBNAILS: true
  },
  TIMING: {
    BUTTON_CHECK_INTERVAL: 1000,
    TRANSCRIPT_WAIT: 1000,
    NOTIFICATION_DURATION: 3000
  }
}

Module Structure

modules/
├── config.js           # Centralized configuration
├── logger.js           # Logging system
├── error-handler.js    # Error handling
├── storage-manager.js  # Chrome storage operations
├── transcript-extractor.js  # Transcript extraction
├── ui-manager.js       # UI components
├── thumbnail-handler.js # Thumbnail features
└── claude-widget.js    # Claude.ai widget

content-youtube-modular.js  # YouTube main script
content-claude-modular.js   # Claude main script

🐛 Troubleshooting

Widget not appearing on Claude

// Check video data
window.__CLAUDE_WIDGET_DEBUG__.widget.videoData

// Force show widget
window.__CLAUDE_WIDGET_DEBUG__.widget.create(true)

Transcript not extracting

1. Ensure video has transcripts available
2. Check console for errors with debug logging
3. Try manually opening transcript panel first

Buttons not appearing

1. Refresh the YouTube page
2. Verify you're on /watch URL
3. Check console for initialization errors

🔧 Advanced Features

Custom Log Level

// Set to ERROR only
window.__YT_TRANSCRIPT_DEBUG__.logger.setLevel(3)

Export Logs

// Get all logged events
window.__YT_TRANSCRIPT_DEBUG__.logger.exportLogs()

Manual Storage Check

• Open DevTools → Application → Storage → Local Storage
• Look for keys: currentVideo, widgetPosition, thumbnailHoverEnabled

📊 Performance

• Efficient DOM queries with caching
• Debounced operations to prevent overload
• Lazy thumbnail loading on demand
• Minimal background processing

🔒 Privacy

• No external API calls
• All data stored locally
• No tracking or analytics
• Thumbnails cached in browser storage

📄 License

This project is provided as-is for educational purposes.

🤝 Contributing

Follow the Development Guidelines:

1. Maintain modular architecture
2. Add comprehensive error handling
3. Use the logging system
4. Update CONFIG for new settings
5. Focus on user experience

---

Version 2.0 - Complete modular rewrite following best practices