Chrome扩展MV3引入jQuery CDN触发CSP指令错误如何修复

问题根因 #

Chrome Manifest V3 对扩展的内容安全策略做了强约束，默认script-src规则仅允许加载扩展安装包内的本地脚本，完全禁止直接从第三方CDN拉取可执行脚本资源，直接引入cdnjs域名下jQuery远程资源的写法，正好触发了这条默认策略限制，才会抛出对应的拦截错误。
需要注意：MV3不再支持MV2时代通过在CSP中添加第三方域名白名单加载远程脚本的写法，哪怕手动修改manifest配置添加CDN域名，Chrome也会直接忽略该规则，不存在通过放宽CSP加载远程jQuery脚本的可行路径。

可行修复方案 #

方案1：全量依赖本地化（官方推荐，100%兼容） #

• 把需要用到的jQuery、jQuery Terminal所有关联的JS、CSS、字体资源全部下载到扩展项目的本地目录，比如存放在项目下的/vendor/路径中
• 替换所有远程资源引用地址为扩展本地相对路径，比如原CDN地址https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js替换为./vendor/jquery.min.js
• 该方案完全符合MV3默认CSP要求，不需要额外修改安全策略配置，不会触发任何安全拦截，也是Chrome扩展官方推荐的依赖引入方式，扩展上架应用商店时不会因为资源加载问题被拒。

方案2：针对jQuery Terminal的特殊配置 #

如果本地化依赖后仍然出现wasm执行相关的CSP报错，可以在manifest.json中补充如下CSP配置，适配jQuery Terminal的wasm运行需求：

{
  "manifest_version": 3,
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; style-src 'self' 'unsafe-inline';"
  }
}

配置里的wasm-unsafe-eval用于支持终端相关的wasm模块执行，style-src的unsafe-inline用于兼容jQuery Terminal动态插入内联样式的逻辑，不会引入额外的远程加载安全风险。

避坑提示 #

• 不要尝试通过动态script标签、chrome.scripting.executeScript接口注入远程拉取的脚本代码，这类操作同样会被CSP拦截
• 不要为了绕过CSP限制使用远程脚本代理、eval拼接执行远程代码的方案，这类操作会直接导致扩展审核不通过
• 所有终端相关的业务逻辑代码全部打包在扩展本地包内，不要依赖远程下发的可执行逻辑。

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