YoutubeShortsRemover for desktop front page

user.script.js

// ==UserScript==
// @name     YoutubeShortsRemover
// @match https://youtube.com/*
// @match https://www.youtube.com/*
// @match https://*.youtube.com/*
// @version  0.1
// @author Daniel Dusek (github: dusekdan)
// @grant    none
// ==/UserScript==

(function() {
    'use strict';

  
  	// Known limitations:
  	// (a) If various elements become available for hiding at different times, the interval of checking for elements will stop after first item successfully found and hidden
 	//  Rationale: I don't want to be firing an infinite intervals of setting the style in the browser.
  	//  Possible solution: Have a re-try logic for finding all the elements with a maximum amount of attempts before giving up.	

    function hideElementsWhenTheyLoad() {

      	// It is likely that across various versions, shorts are gonna come up with different selectors
  	const shortsSideBarMarch2024Selector = "ytd-guide-section-renderer.style-scope:nth-child(1) > div:nth-child(2) > ytd-guide-entry-renderer:nth-child(2)"


	// Put all the selectors to hide into this field
        const selectorsToHide = [shortsSideBarMarch2024Selector]
      	
        let hidingComplete = false;
      	let intervalId = setInterval( () => {
          console.log("Running hideElements() function");
          selectorsToHide.forEach(selector => {
              const elementToHide = document.querySelector(selector);
              if (elementToHide) {
                  elementToHide.style.display = 'none';
                  console.log("YoutubeShortsRemover, set display=none for " + selector); 
              		hidingComplete = true;
              }
          });
          
          
          if (hidingComplete) {
          	clearInterval(intervalId);
          }
          
        }, 2000);
      
    }

    // Run the function when the page loads
    window.addEventListener('load', hideElementsWhenTheyLoad);
})();