YTShorts_Blocker

YTShorts_Blocker is a Google Chrome Extension (Manifest V3) designed to prevent endless scrolling on YouTube Shorts by strictly limiting viewing sessions to 60 seconds per visit.

---

🚀 Features

• 60-Second Session Timer: Automatically starts a 1-minute countdown timer whenever a YouTube Shorts URL (/shorts/*) is detected.
• Floating Countdown Popup: Displays a non-intrusive HUD at the bottom-right corner of the screen (⏳ Shorts Timer - Time left: X s) showing remaining seconds in real time.
• Robust SPA Navigation Detection: Patches YouTube's single-page application routing mechanisms (history.pushState, history.replaceState, popstate events, and DOM MutationObserver) to reliably track route changes without page reloads.
• Smart Visibility Handling: Pauses and clears the timer automatically when switching tabs or hiding the window, ensuring active viewing time is accurately measured.
• Motivational Blocking Screen (block.html): Once time expires, the tab automatically redirects to a custom focus enforcement screen featuring:
  • Atmospheric background video (focus.mp4).
  • Reality check prompt ("Kya karne aaya tha ! 👿👼🏻🥹").
  • Quick action buttons: Go to YouTube Home, Go to Notion, and Close Tab.
  • Integrated YouTube Search input to direct user focus toward deliberate search queries instead of algorithm-driven feeds.

---

🛠️ Technical Specifications

• Manifest Version: V3
• Target Host: https://www.youtube.com/*
• Content Script: content.js injected at YouTube pages to handle route monitoring, timer state, and floating UI overlay.
• Web Accessible Resources: block.html, block.js, and focus.mp4.

Permissions

• tabs: Managing YouTube browser tabs.
• scripting: Executing scripts within the YouTube context.
• Host permissions: https://www.youtube.com/*

---

📁 File Structure

Focus_Shorts_Blocker/
├── manifest.json       # Extension manifest (V3) setup & resource permissions
├── content.js          # SPA route observer, countdown timer logic & HUD UI
├── block.html          # Fullscreen blocking page markup with embedded video
├── block.js            # Event handlers for blocking screen buttons & search
├── focus.mp4           # Background video file for blocking screen
├── temp.py             # Utility/testing script
├── icon16.png          # 16x16 Extension icon
├── icon48.png          # 48x48 Extension icon
└── icon128.png         # 128x128 Extension icon

---

💻 Installation & Usage

1. Open Google Chrome and navigate to chrome://extensions/.
2. Enable Developer mode (toggle in the top-right corner).
3. Click Load unpacked and select the Focus_Shorts_Blocker directory.
4. Visit YouTube (https://www.youtube.com) and open any Shorts video.
5. Notice the floating Shorts Timer in the bottom-right corner counting down from 60 seconds.
6. When 60 seconds pass, you will be redirected to the FOCUS BRO! page. Choose to close the tab, jump to Notion, return to YouTube Home, or search for a specific video deliberately.