remove-shorts-dependency.user.js

// ==UserScript==
// @name         YouTube Custom CSS Hide Shorts and Navigation
// @namespace    https://gist.github.com/s0racat/a94c89fb8e42492da429cff61336754d
// @version      1.3
// @description  Hide YouTube shorts container overflow, navigation container elements, and remove grid-shelf-view-model tags dynamically
// @author       s0racat
// @updateURL    https://gist.githubusercontent.com/s0racat/a94c89fb8e42492da429cff61336754d/raw/remove-shorts-dependency.user.js
// @downloadURL  https://gist.githubusercontent.com/s0racat/a94c89fb8e42492da429cff61336754d/raw/remove-shorts-dependency.user.js
// @match        https://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function () {
  "use strict";

  // 1. shorts-containerのoverflow-yをhiddenにする
  const style = document.createElement("style");
  style.textContent = `
        ytd-page-manager #shorts-container {
            overflow-y: hidden !important;
        }
    `;
  document.head.appendChild(style);

  // 2. .navigation-container を非表示にする
  function removeElements() {
    const nav = document.querySelector(
      "ytd-page-manager .navigation-container"
    );
    const home = document.querySelector('ytd-browse[page-subtype="home"]');
    const sideBar = document.querySelector("#secondary");

    if (nav) {
      nav.style.display = "none";
    }
    sideBar.remove();
    home.remove();
  }

  window.addEventListener("yt-navigate-finish", removeElements);

  // 3. grid-shelf-view-model タグを監視して出現したら削除するMutationObserver
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      mutation.addedNodes.forEach((node) => {
        // 要素ノードかつタグ名が grid-shelf-view-model なら削除
        if (
          node.nodeType === 1 &&
          node.tagName.toLowerCase() === "grid-shelf-view-model"
        ) {
          node.remove();
          console.log("Removed a grid-shelf-view-model element");
        }
      });
    });
  });

  // body以下を監視対象に設定（子ノードの追加・削除を監視）
  observer.observe(document.body, { childList: true, subtree: true });

  // 最初からある場合も削除しておく
  document
    .querySelectorAll("grid-shelf-view-model")
    .forEach((el) => el.remove());
})();