☰

Disable YouTube Live Chat Container CSS

To Disable YouTube Live Chat Container CSS

目前为 2023-07-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name        Disable YouTube Live Chat Container CSS
  3. // @namespace   UserScript
  4. // @match       https://www.youtube.com/live_chat*
  5. // @grant       none
  6. // @version     0.0.6
  7. // @license     MIT
  8. // @author      CY Fung
  9. // @description To Disable YouTube Live Chat Container CSS
  10. // @run-at      document-start
  11. // ==/UserScript==
  12.  
  13. ((__CONTEXT__) => {
  14.   const addCss = () => document.head.appendChild(document.createElement('style')).textContent = `
  15.     @supports (contain: layout paint style) {
  16.  
  17.  
  18.       #item-offset.style-scope.yt-live-chat-item-list-renderer {
  19.         height: auto !important;
  20.         min-height: unset !important;
  21.       }
  22.  
  23.       #items.style-scope.yt-live-chat-item-list-renderer {
  24.         transform: translateY(0px) !important;
  25.       }
  26.  
  27.       yt-icon[icon="down_arrow"] > *,
  28.       yt-icon-button#show-more > * {
  29.         pointer-events: none !important;
  30.       }
  31.  
  32.       #item-list.style-scope.yt-live-chat-renderer[class],
  33.       #item-list.style-scope.yt-live-chat-renderer[class] *,
  34.       yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class],
  35.       yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class] *
  36.       #item-list.style-scope.yt-live-chat-renderer[class] [class],
  37.       yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class] [class] {
  38.         will-change: unset !important;
  39.       }
  40.  
  41.       yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip,
  42.       yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer,
  43.       yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image,
  44.       yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
  45.         contain: layout style;
  46.         display: inline-flex;
  47.         vertical-align: middle;
  48.       }
  49.  
  50.       #items yt-live-chat-text-message-renderer {
  51.         contain: layout style;
  52.       }
  53.  
  54.       yt-live-chat-item-list-renderer:not([allow-scroll]) #item-scroller.yt-live-chat-item-list-renderer {
  55.         overflow-y: scroll;
  56.         padding-right: 0;
  57.       }
  58.  
  59.       body yt-live-chat-app {
  60.         contain: size layout paint style;
  61.         overflow: hidden;
  62.       }
  63.  
  64.       #items.style-scope.yt-live-chat-item-list-renderer {
  65.         contain: layout paint style;
  66.       }
  67.  
  68.       #item-offset.style-scope.yt-live-chat-item-list-renderer {
  69.         contain: style;
  70.       }
  71.  
  72.       #item-scroller.style-scope.yt-live-chat-item-list-renderer {
  73.         contain: size style;
  74.       }
  75.  
  76.       #contents.style-scope.yt-live-chat-item-list-renderer,
  77.       #chat.style-scope.yt-live-chat-renderer,
  78.       img.style-scope.yt-img-shadow[width][height] {
  79.         contain: size layout paint style;
  80.       }
  81.  
  82.       .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label],
  83.       .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label] > #container {
  84.         contain: layout paint style;
  85.       }
  86.  
  87.       yt-live-chat-text-message-renderer.style-scope.yt-live-chat-item-list-renderer,
  88.       yt-live-chat-membership-item-renderer.style-scope.yt-live-chat-item-list-renderer,
  89.       yt-live-chat-paid-message-renderer.style-scope.yt-live-chat-item-list-renderer,
  90.       yt-live-chat-banner-manager.style-scope.yt-live-chat-item-list-renderer {
  91.         contain: layout style;
  92.       }
  93.  
  94.       tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
  95.         contain: layout paint style;
  96.       }
  97.  
  98.       #item-offset.style-scope.yt-live-chat-item-list-renderer {
  99.         position: relative !important;
  100.         height: auto !important;
  101.       }
  102.  
  103.       #item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer {
  104.         position: static !important;
  105.       }
  106.  
  107.     }
  108.  
  109.   `;
  110.  
  111.   const { Promise, requestAnimationFrame } = __CONTEXT__;
  112.  
  113.   let done = 0;
  114.   let main = async () => {
  115.  
  116.     if (done) return;
  117.     let m1, m2;
  118.  
  119.     let maxN = 8;
  120.  
  121.     while (!m1 || !m2) {
  122.       if (--maxN < 0) return;
  123.       m1 = document.querySelector('#item-offset.style-scope.yt-live-chat-item-list-renderer');
  124.       m2 = document.querySelector('#items.style-scope.yt-live-chat-item-list-renderer');
  125.       if (m1 && m2) break;
  126.       await new Promise(resolve => requestAnimationFrame(resolve));
  127.     }
  128.     done = 1;
  129.  
  130.     addCss();
  131.  
  132.     const dummy = {
  133.       transform: '',
  134.       height: '',
  135.       maxHeight: ''
  136.     };
  137.  
  138.     Object.defineProperty(m1, 'style', { get() { return dummy }, set() { }, });
  139.     Object.defineProperty(m2, 'style', { get() { return dummy }, set() { }, });
  140.     m1.setAttribute("style", "");
  141.     m2.setAttribute("style", "");
  142.  
  143.     let p1 = 0;
  144.     document.addEventListener('click', (evt) => {
  145.       if (!evt.isTrusted) return;
  146.       const target = ((evt || 0).target || 0)
  147.       if (target.id === 'show-more') {
  148.         if (target.nodeName.toLowerCase() !== 'yt-icon-button') return;
  149.  
  150.         if (Date.now() - p1 < 80) return;
  151.         requestAnimationFrame(() => {
  152.           p1 = Date.now();
  153.           target.click();
  154.         })
  155.       }
  156.  
  157.     })
  158.  
  159.   };
  160.  
  161.   main();
  162.  
  163.  
  164.  
  165.   function onReady() {
  166.  
  167.     main();
  168.   }
  169.  
  170.  
  171.  
  172.   if (document.readyState != 'loading') {
  173.     onReady();
  174.   } else {
  175.     window.addEventListener("DOMContentLoaded", onReady, false);
  176.   }
  177.  
  178.  
  179. })({ Promise, requestAnimationFrame });