开发Chrome扩展遇内联监听器错误，无内联监听器却报错求解决

Chrome扩展的内容安全政策（CSP）默认严格禁止内联脚本/事件处理，哪怕你把监听器逻辑写在外部app.js里，只要存在以下情况就会触发错误：

1. 清理HTML中的内联事件属性 #

检查你的HTML文件，是否还保留着onclick、onload这类内联事件属性，比如：

<!-- 错误示例 -->
<button onclick="handleBtnClick()">提交</button>

把这类代码改成在app.js中通过事件绑定实现：

// app.js 正确写法
document.querySelector('button').addEventListener('click', handleBtnClick);

function handleBtnClick() {
  // 你的业务逻辑
}

2. 修正manifest.json的CSP配置 #

如果确认没有内联事件属性，检查扩展根目录的manifest.json，确保CSP配置符合规则：

• 推荐的严格配置（避免安全风险）：

"content_security_policy": "script-src 'self'; object-src 'self'"

• 若临时调试需要（不建议上线用），可添加unsafe-inline放宽限制：

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

3. 排查动态脚本问题 #

如果app.js中使用了eval()、new Function()或者动态创建<script>标签插入内联代码，也会触发CSP错误。比如：

// 错误示例
eval('alert("test")');

改成直接编写逻辑代码，或者把动态逻辑放到单独的JS文件中引用。

4. 检查所有扩展页面 #

确认popup、options页面、content script等所有扩展资源中，都没有内联脚本或事件属性，所有页面都必须遵循CSP规则。

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