☰

YouTube Sidebar Buttons to Bottom

Move YouTube sidebar buttons to the bottom of the homepage

  1. // ==UserScript==
  2. // @name         YouTube Sidebar Buttons to Bottom
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Move YouTube sidebar buttons to the bottom of the homepage
  6. // @author       You
  7. // @match        *://www.youtube.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     function moveSidebarButtons() {
  15.         // Wait until the page is fully loaded
  16.         if (document.readyState === 'complete' || document.readyState === 'interactive') {
  17.             // Check if we are on the YouTube homepage
  18.             if (window.location.pathname === '/' || window.location.pathname === '/feed/subscriptions') {
  19.                 const sidebar = document.querySelector('#end');
  20.                 const mainContent = document.querySelector('#primary');
  21.  
  22.                 if (sidebar && mainContent) {
  23.                     // Create a container for the sidebar buttons at the bottom
  24.                     let sidebarBottomContainer = document.createElement('div');
  25.                     sidebarBottomContainer.style.position = 'fixed';
  26.                     sidebarBottomContainer.style.bottom = '0';
  27.                     sidebarBottomContainer.style.left = '0';
  28.                     sidebarBottomContainer.style.width = '100%';
  29.                     sidebarBottomContainer.style.backgroundColor = '#fff'; // Match the background color
  30.                     sidebarBottomContainer.style.borderTop = '1px solid #e0e0e0'; // Optional: add a border
  31.                     sidebarBottomContainer.style.zIndex = '1000'; // Ensure it appears above other content
  32.                     sidebarBottomContainer.style.display = 'flex';
  33.                     sidebarBottomContainer.style.justifyContent = 'space-around';
  34.                     sidebarBottomContainer.style.padding = '10px 0';
  35.  
  36.                     // Move sidebar buttons to the new container
  37.                     Array.from(sidebar.children).forEach(child => {
  38.                         sidebarBottomContainer.appendChild(child);
  39.                     });
  40.  
  41.                     // Add the new container to the bottom of the page
  42.                     document.body.appendChild(sidebarBottomContainer);
  43.                 }
  44.             }
  45.         }
  46.     }
  47.  
  48.     // Run the function periodically as YouTube's content is dynamically loaded
  49.     setInterval(moveSidebarButtons, 3000);
  50. })();