Intelligent Auto-Scroll
Uses native video event listeners to trigger smooth scroll to the next video exactly when the current one finishes.
Project Overview
YouTube Shorts Auto-Scroller is an intelligent browser extension that transforms the Shorts viewing experience. Since YouTube Shorts loop automatically, the standard HTML5 'ended' event never fires—making traditional detection methods useless. This extension implements a sophisticated timeupdate listener that calculates remaining duration and triggers smooth scrolling when the video is within 0.5 seconds of completion.
The extension also tackles YouTube's SPA architecture by intercepting history.pushState and history.replaceState, combined with a MutationObserver to ensure the script re-initializes precisely when URL or DOM changes occur. The ad-filtering system uses advanced pattern matching to identify and automatically bypass sponsored shorts.
🎯 Project Purpose
Built to solve the frustration of manually scrolling through YouTube Shorts. This extension provides a hands-free viewing experience with smart ad detection and skip functionality.
🛍️ Project Checkouts (Key Highlights)
Ad-Filtering (Skip Sponsored)
Employs advanced pattern matching to identify and automatically bypass sponsored shorts or ads.
SPA-Aware Navigation
Implements MutationObserver and History API interception to remain active during YouTube's dynamic page transitions.
Performance Optimized
Built with 'single event listener' architecture to prevent memory leaks and ensure low CPU/Memory overhead.
🧩 Technology Stack
Frontend
Popup UI (HTML/CSS/JS)
Backend
Background Service Worker, Content Scripts
Core Architecture
Modular Singleton Pattern, React Hooks integration
🧠 Challenges & Solutions
Problem: YouTube Shorts loop automatically, meaning the standard HTML5 'ended' event never fires.
Solution: Implemented a timeupdate listener that calculates remaining duration and triggers scroll when video is within 0.5 seconds of completion.
Problem: YouTube is a Single Page Application (SPA); content script can lose track when navigating from Home to Shorts.
Solution: Intercepted history.pushState and history.replaceState, combined with MutationObserver to ensure script re-initializes on URL/DOM changes.
📂 Project Structure
manifest.json - Manifest V3 configuration
background.js - Service worker for script injection
popup.html/js - Extension UI and toggle logic
src/autoScroller.js - Core business logic (Singleton)
src/contentScript.js - DOM-level interaction & ad detection
src/useAutoScroller.js - React integration hook
⭐ Why This Project Stands Out
- Manifest V3 Compliant: Built using the latest Chrome Extension standards.
- Cross-Framework Compatible: Works as standalone extension, React hook, or via programmatic control.
- Zero Memory Leaks: Single event listener architecture prevents performance degradation.
- Seamless SPA Handling: Advanced navigation detection for YouTube's dynamic routing.