您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
To Disable YouTube Live Chat Container CSS
当前为
- // ==UserScript==
- // @name Disable YouTube Live Chat Container CSS
- // @namespace UserScript
- // @match https://www.youtube.com/live_chat*
- // @grant none
- // @version 0.0.4
- // @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;
- }
- #item-list.style-scope.yt-live-chat-renderer[class],
- #item-list.style-scope.yt-live-chat-renderer[class] *,
- yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class],
- yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class] *
- #item-list.style-scope.yt-live-chat-renderer[class] [class],
- yt-live-chat-item-list-renderer.style-scope.yt-live-chat-renderer[class] [class] {
- will-change: unset !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;
- 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 });