☰

Hide/Show YouTube Comments Button

A button to show or hide YouTube comments.

// ==UserScript==
// @name         Hide/Show YouTube Comments Button
// @namespace    http://tampermonkey.net/
// @version      1.22
// @description  A button to show or hide YouTube comments.
// @author       Thnh01
// @license      GPL-3.0
// @match        *://www.youtube.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    function injectStyles() {
        const style = document.createElement('style');
        style.textContent = `
            /* This is the key rule: Hide the #comments element when this class is on the body */
            body.yt-comments-hidden #comments {
                display: none;
            }

            /* Styling for our toggle button to match YouTube's look */
            .yt-toggle-comments-button {
                background-color: gray !important;
                color: var(--yt-spec-brand-button-text);
                border: none;
                border-radius: 18px;
                padding: 9px 16px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                margin-top: 12px;
                margin-bottom: 16px; /* A little more space at the bottom */
            }

            /* Make sure the button looks good in dark mode */
            html[dark="true"] .yt-toggle-comments-button {
                 background-color: var(--yt-spec-button-chip-background-hover);
                 color: var(--yt-spec-text-primary);
            }
        `;
        document.head.appendChild(style);
    }

    function setupCommentToggleButton() {
        const commentsSection = document.querySelector("#comments");
        if (!commentsSection || document.querySelector('.yt-toggle-comments-button')) {
            return;
        }

        const toggleButton = document.createElement('button');
        toggleButton.className = 'yt-toggle-comments-button';

        document.body.classList.add('yt-comments-hidden');
        toggleButton.textContent = 'Show Comments';

        toggleButton.addEventListener('click', () => {
            const isHidden = document.body.classList.toggle('yt-comments-hidden');

            toggleButton.textContent = isHidden ? 'Show Comments' : 'Hide Comments';
        });

        commentsSection.parentNode.insertBefore(toggleButton, commentsSection);
    }

    function observeForComments() {
        const observer = new MutationObserver((mutationsList, obs) => {
            if (document.querySelector("#comments")) {
                setupCommentToggleButton();
                obs.disconnect();
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
    }

    injectStyles();

    window.addEventListener('yt-navigate-finish', observeForComments);

    observeForComments();

})();