Chrome扩展CSP错误求助：内联事件触发遭拒绝执行问题

看起来你遇到的问题是内联事件处理函数违反了内容安全策略（CSP），和你添加的unsafe-eval无关——unsafe-eval是允许eval类的代码执行，而你现在的问题是内联的onclick="notify()"这种代码触发了CSP限制。

问题根源 #

你的index.html里直接在按钮上写了onclick="notify()"，这属于内联脚本/事件处理，而Chrome扩展的CSP默认禁止这种写法，即使你在manifest.json里配置了script-src 'self' 'unsafe-eval'，也没有包含允许内联的规则，所以这个错误会持续出现。

推荐解决方案：移除内联事件，使用事件监听（更规范） #

这种方式不需要修改CSP配置，是扩展开发的标准写法：

1. 修改index.html的按钮代码，移除内联onclick，给按钮加一个id：

<h1>Twitch Extensions</h1> 
<p id="info">Le live est actif</p> 
<button id="test-notify">测试通知</button> 
<script src="app.js"></script>

2. 在app.js末尾添加事件监听代码，绑定按钮的点击事件到notify函数：

// 原app.js代码保持不变，新增以下内容
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('test-notify').addEventListener('click', notify);
});

这样修改后，就避免了内联事件处理，符合CSP的要求，测试按钮就能正常触发通知了。

备选方案：如果一定要用内联事件（不推荐） #

如果你坚持使用内联onclick，可以在manifest.json的CSP配置里添加'unsafe-inline'：

"content_security_policy": "script-src 'self' 'unsafe-eval' 'unsafe-inline'; object-src 'self'"

不过这种方式会降低扩展的安全性，不建议在正式发布的扩展中使用。

额外小提示 #

你代码里的Twitch API使用的是旧版的Kraken接口，现在Twitch推荐使用Helix API，不过这和当前的CSP问题无关，只是个小建议~

内容的提问来源于stack exchange，提问作者Arthur