Chrome扩展内联脚本遭CSP拦截，如何调整配置使其生效？

首先得明确：Chrome扩展的内容安全策略（CSP）对**内联脚本（包括内联事件处理器比如onclick）**的限制非常严格，尤其是manifest v3版本，几乎不允许直接启用内联脚本。你之前的尝试没奏效，大概率是因为没找对对应manifest版本的正确配置方式，或者用了早已废弃的manifest v1（这个版本早就被Chrome淘汰，完全不建议用）。

下面分两种情况给你解决方案，优先推荐最佳实践方案：

一、推荐：移除内联onclick，改用外部脚本绑定事件 #

这是Chrome扩展官方推荐的做法，既符合CSP要求，也更利于代码维护和安全。

步骤： #

1. 把HTML里的内联onclick属性删掉，给按钮加个唯一ID：

<input type="text" id="inputField">
<button id="addButton">+</button>

2. 创建单独的JS文件（比如script.js），在HTML末尾引入：

<script src="script.js"></script>

3. 在JS文件里用addEventListener绑定点击事件：

// 确保DOM加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  const addBtn = document.getElementById('addButton');
  addBtn.addEventListener('click', function() {
    // 这里写原来onclick事件里的逻辑，比如处理输入、添加表单项的代码
    const inputValue = document.getElementById('inputField').value;
    // 执行你的动态表单逻辑...
  });
});

这种方式不需要修改任何CSP配置，完全符合扩展的安全规范，也不会被CSP阻止。

二、如果非要保留内联onclick（不推荐） #

针对Manifest v2版本 #

如果你还在使用manifest v2，可以通过修改content_security_policy配置来允许内联脚本，但要注意格式正确：
在manifest.json里添加：

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

注意：这个配置只对扩展自身的页面（比如popup、options页面）有效，内容脚本的CSP受目标页面影响。如果之前你试过这个配置但没生效，可能是配置格式错误（比如少了分号、引号不匹配）。

针对Manifest v3版本 #

Manifest v3完全禁止使用unsafe-inline，哪怕你配置了也会被Chrome忽略。唯一的办法是给内联脚本内容计算哈希值，然后加到CSP里，但维护成本极高（只要脚本内容改一点，哈希就失效了）。

比如，如果你的内联事件是onclick="addNewItem()"，先计算这个脚本内容的SHA-256哈希，然后在manifest.json里配置：

"content_security_policy": {
  "extension_pages": "script-src 'self' 'sha256-你的哈希值'; object-src 'self'"
}

但还是强烈建议用第一种方案，避免后续的维护麻烦。

最后提醒：manifest v1已经被Chrome彻底废弃，不要尝试用它来绕过CSP限制，完全没用。

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