Skip to content

Instantly share code, notes, and snippets.

@gpoole
Last active June 7, 2023 15:17
Show Gist options
  • Save gpoole/80bdf1161ab550f8429db31172a6e299 to your computer and use it in GitHub Desktop.
Save gpoole/80bdf1161ab550f8429db31172a6e299 to your computer and use it in GitHub Desktop.
Tampermonkey userscript to hide comments on YouTube with a toggle on/off button
// ==UserScript==
// @name Hide YouTube comments
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Hides YouTube comments
// @author gpoole
// @match https://www.youtube.com/*
// @run-at document-end
// @grant none
// ==/UserScript==
(function() {
function injectStyles(styles) {
const head = document.querySelector('head');
const style = document.createElement('style');
style.innerText = styles;
head.appendChild(style);
}
async function getComments() {
return new Promise((resolve) => {
const interval = setInterval(() => {
const comments = document.querySelector('ytd-comments');
if (comments) {
resolve(comments);
clearInterval(interval);
}
}, 100);
});
}
function template(html) {
const el = document.createElement('div');
el.innerHTML = html;
return el;
}
window.hideComments = () => {
document.documentElement.classList.add('comments-hidden');
};
window.showComments = () => {
document.documentElement.classList.remove('comments-hidden');
};
async function init() {
injectStyles(`
.comments-hidden ytd-comments {
display: none;
}
.comment-toggle {
padding: 10px;
border-radius: 3px;
border: 0;
font-weight: bold;
text-transform: uppercase;
margin: 0 auto;
display: block;
background-color: #242424;
color: white;
}
html[dark="true"] .comment-toggle {
background-color: #fafafa;
color: black;
}
.show-comments {
display: none;
}
.comments-hidden .hide-comments {
display: none;
}
.comments-hidden .show-comments {
display: block;
}
`);
window.hideComments();
const controls = template(`
<button onclick="showComments();" class="show-comments comment-toggle">Show comments</button>
<button onclick="hideComments();" class="hide-comments comment-toggle">Hide comments</button>
`);
const comments = await getComments();
comments.before(controls);
}
init();
})();
@wardboumans
Copy link

Very nice, works great. Like the toggle option :)

@sebbasim
Copy link

sebbasim commented Jun 7, 2023

Thx!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment