我无法影响 DOM 导致 "Refused to execute inline event handler" 错误。 -Chrome 扩展

Question

我经常在学习时阅读 youtube 评论来浪费我的时间。所以我想出了一个主意，决定进行扩展以隐藏评论部分。我找到了元素的 ID，做了一个简单的扩展，但它没有工作，因为出现以下错误：

我的分机的 html 文件：

<!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>

Json 文件：

{
    "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"]
}

我们不能干扰元素吗？ chrome 不允许吗？

Answer 1

似乎不喜欢内联代码onclick="hide()"，所以改用eventListener
有多个 id=comment 的评论。 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"))
})

或者只是有一个小书签：

javascript:(() => document.querySelectorAll("[id=comment]").forEach(comment => comment.style.display = "none"))()

做个书签，把URL改成上面的，点进去就隐藏了

我无法影响 DOM 导致 "Refused to execute inline event handler" 错误。 -Chrome 扩展

I can't effect DOM cause of "Refused to execute inline event handler" error. -Chrome Extensions

html

javascript

dom

google-chrome-extension