0
342
ViewsI can't effect DOM cause of "Refused to execute inline event handler" error. -Chrome Extensions
I oftenly waste my time by reading youtube comments while studying. So i came with an idea, decided to make an extension which was gonna hide the comments section. I found the ID of element, made a simple extension but it didn't work cause of the following error:
My extension's html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Comminator | Youtube Comment Terminator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button id="main" onclick="hide()">Terminate</button>
<script type="text/javascript">
var comments = document.getElementById("comments"); //"comments" is the ID of comments section in youtube
function hide() {
comments.style.display = "none";
}
</script>
</body>
</html>{
"manifest_version": 2,
"name": "Comminator",
"description": "Youtube Comment Hider",
"version": "1.0",
"icons": {"128": "icon_128.png"},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": ["activeTab"]
}
Are we not able to interference with the elements ? Doesn't chrome allow it ?
·
Juan Pablo Isaza
1 answers
Answer question0
- It seems to not like the inline code
onclick="hide()", so use eventListener instead - there are multiple comments with id=comment. They cannot be accessed by getElementById
const comments = document.querySelectorAll("[id=comment]"); //"comment" is the ID of each comment in youtube
document.getElementById("main").addEventListener("click", function(e) {
e.preventDefault(); // in case the button ends up in a form
comments.forEach(comment => comment.style.display = "none"))
})
Alternatively just have a bookmarklet:
javascript:(() => document.querySelectorAll("[id=comment]").forEach(comment => comment.style.display = "none"))()
Make a bookmark and change the URL to the above and it will hide when you click it
·
Juan Pablo Isaza
Report
Answer question