Project Overview
YouTube Speed Control & A-B Loop is a Chrome extension that enhances the YouTube viewing experience by adding custom speed control buttons and A-B loop functionality directly to the video player interface. Published on the Chrome Web Store, this extension provides quick access to commonly used playback speeds (60%, 70%, 75%, 80%, 90%, 100%) and allows users to loop specific sections of videos for learning and practice purposes.
Tech Stack
- JavaScript (ES6+)
- Chrome Extension API (Manifest V3)
- CSS3 for UI styling
- Chrome Storage API for persistence
- YouTube DOM manipulation
Key Challenges
- Dynamic YouTube Interface: YouTube’s constantly changing DOM structure and single-page application navigation required robust element detection and re-injection strategies
- Player Integration: Seamlessly integrating custom controls with YouTube’s existing player without breaking functionality
- Cross-Video Persistence: Maintaining speed settings and A-B loop state across video navigation without page refreshes
- Performance Optimization: Ensuring the extension doesn’t impact YouTube’s performance while monitoring for DOM changes
Solutions
Robust DOM Integration:
- Implemented a mutation observer to detect YouTube’s dynamic content changes
- Created a polling mechanism to ensure controls remain visible during navigation
- Developed smart positioning logic that adapts to different player modes (theater, fullscreen, embedded)
Persistent State Management:
- Utilized Chrome Storage API to remember user preferences across sessions
- Implemented automatic speed application to new videos based on saved preferences
- Created state synchronization between the extension popup and content script
A-B Loop Functionality:
- Built a precise timing system using keyboard shortcuts (A and B keys) to set loop points
- Implemented smooth looping with minimal audio/video interruption
- Added visual indicators to show active loop points and status
User Experience Enhancement:
- Designed controls that integrate seamlessly with YouTube’s native interface
- Added hover effects and visual feedback for better usability
- Created an informative popup with usage instructions and quick controls
Features & Innovation
- Custom Speed Controls: Six preset speeds (60%, 70%, 75%, 80%, 90%, 100%) for precise playback control
- A-B Loop Functionality: Set start (A) and end (B) points to loop specific video sections
- Persistent Settings: Automatically applies last used speed to new videos
- Keyboard Shortcuts: Quick A-B loop control using keyboard (A/B keys to set points, L to toggle loop)
- Visual Integration: Controls appear alongside YouTube’s native player controls
- Cross-Platform Support: Works on Chrome, Edge, Opera, and Brave browsers
Impact & Results
- Published on Chrome Web Store: Available to millions of Chrome users globally
- Enhanced Learning Experience: Particularly useful for educational content, music practice, and language learning
- Improved Accessibility: Provides speed options not available in YouTube’s default interface
- Zero Performance Impact: Lightweight implementation that doesn’t affect YouTube’s loading speed
Technical Implementation
Content Script Architecture:
- Modular design with separate functions for speed control and A-B loop features
- Event-driven architecture that responds to YouTube’s navigation changes
- Efficient DOM querying with fallback strategies for different YouTube layouts
Extension Popup Interface:
- Clean, intuitive design matching YouTube’s visual style
- Real-time status updates showing current speed and loop state
- Quick action buttons for common tasks (reset speed, clear loops)
Lessons Learned
- Gained expertise in Chrome Extension development with Manifest V3 migration
- Mastered complex DOM manipulation in dynamic single-page applications
- Learned to handle YouTube’s frequent interface updates and maintain compatibility
- Developed skills in creating user-friendly browser extensions with minimal permissions
- Understood the importance of thorough testing across different YouTube viewing modes
User Feedback & Adoption
- Successfully published and maintained on Chrome Web Store
- Designed for users who need precise speed control for learning and practice
- Addresses gap in YouTube’s native speed options (missing common speeds like 75% and 80%)
- Positive reception from users requiring A-B loop functionality for music practice
Attachments
Extension in Action — Speed Controls
A-B Loop Interface
Extension Popup Interface
Chrome Web Store: YouTube Speed Control & A-B Loop