☰

Show YouTube comments while watching 2025 (MacOS)

Moves comments to the right side and adds a button to toggle between comments and recommended videos

  1. // ==UserScript==
  2. // @name            Show YouTube comments while watching 2025 (MacOS)
  3. // @description     Moves comments to the right side and adds a button to toggle between comments and recommended videos
  4. // @version         3.6
  5. // @author          barn852 & Eloren1
  6. // @license         MIT
  7. // @match           *://*.youtube.com/*
  8. // @include         *://*.youtube.com/watch*
  9. // @grant           none
  10. // @require         https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
  11. // @run-at          document-end
  12. // @noframes
  13. // @namespace https://greasyfork.org/users/572660
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     'use strict';
  18.  
  19.     let showComments = true; // Show comments by default
  20.  
  21.     const moveComments = () => {
  22.         let comments = document.getElementById('comments');
  23.         let sidebar = document.querySelector('#secondary-inner');
  24.  
  25.         if (comments && sidebar && !sidebar.contains(comments)) {
  26.             // Create a new container for the scrollable comments
  27.             let commentsContainer = document.createElement('div');
  28.             commentsContainer.id = 'comments-container';
  29.             commentsContainer.style.overflowY = 'auto';
  30.             commentsContainer.style.maxHeight = 'calc(100vh - 60px)';
  31.             commentsContainer.style.width = '100%';
  32.             commentsContainer.appendChild(comments);
  33.  
  34.             // Append the new container to the sidebar
  35.             sidebar.appendChild(commentsContainer);
  36.             console.log('Moved comments to the right side');
  37.         }
  38.     };
  39.  
  40.     const updateView = () => {
  41.         let comments = document.getElementById('comments');
  42.         let related = document.getElementById('related');
  43.  
  44.         if (comments && related) {
  45.             comments.style.display = showComments ? 'block' : 'none';
  46.             related.style.display = showComments ? 'none' : 'block';
  47.         }
  48.     };
  49.  
  50.     const toggleView = () => {
  51.         showComments = !showComments;
  52.         updateView();
  53.     };
  54.  
  55.     const observer = new MutationObserver(() => {
  56.         moveComments();
  57.         updateView();
  58.     });
  59.  
  60.     observer.observe(document.body, { childList: true, subtree: true });
  61.  
  62.     let button = document.createElement('button');
  63.     button.innerHTML = '<svg width="24" height="24" viewBox="0 0 22 22"><g fill="currentColor"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"/></g></svg>';
  64.     button.style = 'background: transparent; border: 0; color: rgb(96,96,96); outline: 0; cursor: pointer; padding: 5px 10px;';
  65.  
  66.     button.onclick = toggleView;
  67.  
  68.     let waitButton = setInterval(() => {
  69.         let menu = document.getElementById('end');
  70.         if (menu) {
  71.             clearInterval(waitButton);
  72.             menu.insertBefore(button, menu.lastElementChild);
  73.             updateView();
  74.         }
  75.     }, 500);
  76.  
  77.     // Prevent YouTube from showing comments on hover
  78.     document.addEventListener('mouseover', (event) => {
  79.         if (!showComments && event.target.closest('#related')) {
  80.             let comments = document.getElementById('comments');
  81.             if (comments) {
  82.                 comments.style.display = 'none';
  83.             }
  84.         }
  85.     });
  86.  
  87. })();