Distraction Free YouTube

DistractionFreeYouTube.user.js

// ==UserScript==
// @name         Distraction Free YouTube
// @namespace    http://shotasenga.com/
// @version      1.0.0
// @description  Remove distracting elements from YouTube
// @author       shotasenga
// @match        https://youtube.com/*
// @match        https://www.youtube.com/*
// @match        https://m.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    // Create and inject CSS styles
    const style = document.createElement('style');
    style.textContent = `
        #comments,
        .ytVideoMetadataCarouselViewModelHost,
        ytd-reel-shelf-renderer,
        ytm-reel-shelf-renderer,
        ytm-rich-section-renderer,
        yt-thumbnail-view-model,
        ytm-video-preview,
        .media-item-thumbnail-container,
        .is-shorts,
        #dismissible,
        ytm-pivot-bar-item-renderer:nth-child(2) {
            display: none !important;
        }
        
        .yt-core-image,
        .ytCoreImageHost {
            opacity: 0;
        }
        
        .inline-metadata-item {
            display: none !important;
        }
    `;
    
    // Wait for head to be available and inject styles
    function injectStyles() {
        if (document.head) {
            document.head.appendChild(style);
        } else {
            setTimeout(injectStyles, 100);
        }
    }
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', injectStyles);
    } else {
        injectStyles();
    }
    
    // Reapply styles when YouTube loads new content (SPA navigation)
    let observer = new MutationObserver(function() {
        if (!document.head.contains(style)) {
            document.head.appendChild(style);
        }
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();