YouTube Distraction-Free Mode

WHAT IT DOES

YouTube Distraction-Free Mode is a browser extension that automatically scans the current YouTube page for video player, recommendations, comments, sidebar, and other UI elements. It detects video elements and UI components by examining class names, IDs, and data attributes. The extension adds a floating focus button (🎯) next to the video player, providing quick access to distraction-free controls. Clicking the button opens a panel where you can toggle distraction-free mode and customize which UI elements to hide: recommendations (related videos, watch-next panel), comments (comment sections and headers), sidebar (guide and panels), end cards (video suggestions at the end), and merchandise (merchandise shelves and cards). Each setting can be toggled independently, and your preferences are saved locally. The extension also provides "Toggle All ON" and "Toggle All OFF" buttons for quick mode switching. The extension maintains a distraction-free preferences database with settings history, notes, and tags for each video. The main panel displays video information, toggle controls for each distraction type, and saved preferences for the current and recent videos. All data is stored locally in your browser using GM_setValue, ensuring your preferences persist across page reloads and browser sessions. This helps students, professionals, and anyone who wants to focus on video content without being distracted by recommendations, comments, or other UI elements.

WHERE IT RUNS

This extension runs on any YouTube page that displays video player, recommendations, comments, sidebar, or other UI elements – including YouTube watch pages and any page with YouTube video content. The extension intelligently adapts to different page structures and supports a wide range of common YouTube display patterns. No manual configuration is required per site; the extension automatically detects video and UI elements using a flexible pattern matching system. This makes it ideal for users who want to minimize distractions while watching YouTube videos.

HOW TO USE

Simply install the extension and navigate to any YouTube video page. The extension automatically detects the video and shows a focus button (🎯) next to the video player. Click the button to open the distraction-free panel. The panel shows the video title and a list of toggles for each distraction type: Hide Recommendations, Hide Comments, Hide Sidebar, Hide End Cards, and Hide Merchandise. Toggle each option on or off to customize your viewing experience – the changes apply immediately. Click "Toggle All ON" to hide all distractions at once, or "Toggle All OFF" to show everything again. A floating button (🧘) appears in the bottom-right corner of the page – click this to open the panel from anywhere. Use the notes section to add notes about your focus goals or productivity context. The panel also shows saved preferences for the current video and recent videos. Use the "Clear All Preferences" button to remove all tracking data when needed.

ONE TECHNICAL SECTION – WHY IT WORKS

The extension uses DOM manipulation to hide UI elements without disrupting the page layout. When a toggle is activated, the extension applies display:none to the corresponding elements using CSS selectors targeting YouTube's class patterns and IDs. The extension uses a data attribute (data-df-hidden) to track which elements have been hidden, allowing for reliable show/hide operations. The selectors are carefully chosen to target specific UI components without affecting the video player or other essential elements. The extension uses a comprehensive set of selectors for each component: recommendations (#related, #secondary, .watch-sidebar), comments (#comments, #comment-section), sidebar (#guide, #sidebar), end cards (.ytp-ce-element), and merchandise (.ytd-merchandise-shelf-renderer). When hiding elements, the extension stores the original display value to restore it properly. A MutationObserver detects dynamic content updates and re-scans only when the video player changes, balancing real-time accuracy with system performance.

THE PANEL – DRAG / PER-SITE POSITION / SNAP / COLLAPSE / RESIZE / ESCAPE

The distraction-free panel includes a draggable title bar, allowing you to position it anywhere on screen for convenient access during video watching. The extension remembers your preferred position per website, so the panel opens in the same location each time you return to that domain. The panel supports snap-to-edge behavior – when dragged near screen edges, it gently snaps into place for a tidy workspace layout. You can collapse the panel down to just its title bar by clicking the collapse button, keeping it accessible without taking up screen space. The toggles and settings are contained within a scrollable body, ensuring all content remains accessible even on smaller screens. Pressing the Escape key closes the panel instantly, returning you to your video viewing workflow.

PLEASE NOTE

This extension requires the free BotGentz extension to be installed and enabled, as it relies on BotGentz's userscript injection and GM_* API shims for cross-browser compatibility. Websites frequently update their HTML structures and class names, which may cause UI detection to break temporarily – we actively maintain the matching patterns and release updates regularly. The extension stores all preference data, notes, and history exclusively in your local browser storage (GM_setValue); no data is ever transmitted to any external server or third party. The extension does not read, modify, or interfere with any YouTube content, videos, or functionality beyond the UI display – it operates on the page content and stores only metadata (video IDs, titles, preference settings, and notes) that you explicitly create. You are responsible for backing up your preference data if you switch browsers or clear your storage. Use this tool responsibly and in accordance with YouTube's Terms of Service.