Chrome扩展报Refused to execute inline event handler无法操作DOM怎么解决

你遇到的问题由两个独立的错误导致：

• 第一个是Refused to execute inline event handler报错：Chrome 扩展的默认内容安全策略（CSP）禁止执行内联 JavaScript 逻辑，包括直接写在 HTML 标签上的onclick等事件属性，以及部分场景下的内联脚本代码。
• 第二个是无法操作Youtube页面元素：扩展的popup页面和浏览器打开的Youtube页面是完全隔离的两个执行上下文，你在popup的JS里调用document.getElementById获取的是popup自身的DOM元素，根本不会访问到Youtube页面的内容，自然找不到ID为comments的元素。Chrome完全支持扩展操作网页元素，只是需要使用正确的API实现。

1. 修改popup.html代码 #

删除内联onclick属性，改用事件监听绑定点击逻辑，同时通过chrome.tabs.executeScript向当前激活的Youtube标签注入操作DOM的代码：

<!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">Terminate</button>
    <script type="text/javascript">
        // 给popup的按钮绑定点击事件
        document.getElementById('main').addEventListener('click', () => {
            // 查询当前激活的标签页
            chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
                // 向目标标签页注入脚本，操作Youtube页面DOM
                chrome.tabs.executeScript(tabs[0].id, {
                    code: `
                        const comments = document.getElementById('comments');
                        if(comments) comments.style.display = 'none';
                    `
                })
            })
        })
    </script>
</body>
</html>

2. manifest.json无需修改 #

你现有的manifest.json配置已经包含了activeTab权限，足够支持向当前激活页面注入脚本的需求。

内容的提问来源于stack exchange，提问作者Ömer Can