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 });