Last active
June 7, 2023 15:17
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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(); | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Very nice, works great. Like the toggle option :)