Disable YouTube Live Chat Container CSS

To Disable YouTube Live Chat Container CSS
目前為 2023-07-01 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name        Disable YouTube Live Chat Container CSS
// @namespace   UserScript
// @match       https://www.youtube.com/live_chat*
// @grant       none
// @version     0.0.3
// @license     MIT
// @author      CY Fung
// @description To Disable YouTube Live Chat Container CSS
// @run-at      document-start
// ==/UserScript==

((__CONTEXT__) => {
  const addCss = () => document.head.appendChild(document.createElement('style')).textContent = `
    @supports (contain: layout paint style) {


      #item-offset.style-scope.yt-live-chat-item-list-renderer {
        height: auto !important;
        min-height: unset !important;
      }

      #items.style-scope.yt-live-chat-item-list-renderer {
        transform: translateY(0px) !important;
      }

      yt-icon[icon="down_arrow"] > *,
      yt-icon-button#show-more > * {
        pointer-events: none !important;
      }

      yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip,
      yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer,
      yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image,
      yt-live-chat-author-chip #chat-badges.yt-live-chat-author-chip yt-live-chat-author-badge-renderer #image img {
        contain: layout style;
        display: inline-flex;
        vertical-align: middle;
      }

      #items yt-live-chat-text-message-renderer {
        contain: layout style;
      }

      yt-live-chat-item-list-renderer:not([allow-scroll]) #item-scroller.yt-live-chat-item-list-renderer {
        overflow-y: scroll;
        padding-right: 0;
      }

      body yt-live-chat-app {
        contain: size layout paint style;
        content-visibility: auto;
        transform: translate3d(0, 0, 0);
        overflow: hidden;
      }

      #items.style-scope.yt-live-chat-item-list-renderer {
        contain: layout paint style;
      }

      #item-offset.style-scope.yt-live-chat-item-list-renderer {
        contain: style;
      }

      #item-scroller.style-scope.yt-live-chat-item-list-renderer {
        contain: size style;
      }

      #contents.style-scope.yt-live-chat-item-list-renderer,
      #chat.style-scope.yt-live-chat-renderer,
      img.style-scope.yt-img-shadow[width][height] {
        contain: size layout paint style;
      }

      .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label],
      .style-scope.yt-live-chat-ticker-renderer[role="button"][aria-label] > #container {
        contain: layout paint style;
      }

      yt-live-chat-text-message-renderer.style-scope.yt-live-chat-item-list-renderer,
      yt-live-chat-membership-item-renderer.style-scope.yt-live-chat-item-list-renderer,
      yt-live-chat-paid-message-renderer.style-scope.yt-live-chat-item-list-renderer,
      yt-live-chat-banner-manager.style-scope.yt-live-chat-item-list-renderer {
        contain: layout style;
      }

      tp-yt-paper-tooltip[style*="inset"][role="tooltip"] {
        contain: layout paint style;
      }

      #item-offset.style-scope.yt-live-chat-item-list-renderer {
        position: relative !important;
        height: auto !important;
      }

      #item-offset.style-scope.yt-live-chat-item-list-renderer > #items.style-scope.yt-live-chat-item-list-renderer {
        position: static !important;
      }

    }

  `;

  const { Promise, requestAnimationFrame } = __CONTEXT__;

  let done = 0;
  let main = async () => {

    if (done) return;
    let m1, m2;

    let maxN = 8;

    while (!m1 || !m2) {
      if (--maxN < 0) return;
      m1 = document.querySelector('#item-offset.style-scope.yt-live-chat-item-list-renderer');
      m2 = document.querySelector('#items.style-scope.yt-live-chat-item-list-renderer');
      if (m1 && m2) break;
      await new Promise(resolve => requestAnimationFrame(resolve));
    }
    done = 1;

    addCss();

    const dummy = {};

    Object.defineProperty(m1, 'style', { get() { return dummy }, set() { }, });
    Object.defineProperty(m2, 'style', { get() { return dummy }, set() { }, });
    m1.setAttribute("style", "");
    m2.setAttribute("style", "");

    let p1 = 0;
    document.addEventListener('click', (evt) => {
      const target = ((evt || 0).target || 0)
      if (target.id === 'show-more') {
        if (target.nodeName.toLowerCase() !== 'yt-icon-button') return;

        if (Date.now() - p1 < 80) return;
        requestAnimationFrame(() => {
          p1 = Date.now();
          target.click();
        })
      }

    })

  };

  main();



  function onReady() {

    main();
  }



  if (document.readyState != 'loading') {
    onReady();
  } else {
    window.addEventListener("DOMContentLoaded", onReady, false);
  }


})({ Promise, requestAnimationFrame });