Manifest V3 Chrome扩展使用unpkg引入ML5库的CSP配置问题咨询

解决方案 #

你遇到的两个报错分别对应Manifest V3的两个核心限制：extension_pages 域下默认禁止加载远程脚本、默认禁止eval类动态代码执行，按下面两种方案任选一种修改即可运行。

方案一：本地引入ML5库（更稳定，推荐）

1. 将ML5库的压缩版代码完整保存到扩展根目录，命名为ml5.min.js
2. 修改main.html的脚本引入部分，删除远程unpkg的script标签，只保留本地脚本引入，注意文件名和路径和实际保存的一致：

<script src="./ml5.min.js"></script>
<script src="./main.js"></script>

3. 修改manifest.json的content-security-policy配置，保留extension_pages下的unsafe-eval声明即可：

"content-security-policy": { 
    "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "sandbox": "allow-scripts; script-src 'self' 'unsafe-eval' https://unpkg.com/*"
}

该方案不需要用到沙箱配置，也可以正常调用chrome.storage等扩展API。

方案二：使用沙箱加载远程unpkg脚本

如果你坚持要直接加载unpkg的远程脚本，需要将popup页声明为沙箱页面：

1. 在manifest.json中新增沙箱页面声明：

"sandbox": {
  "pages": ["main.html"]
}

2. 你原有sandbox域的CSP配置无需修改，main.html可以保留unpkg的远程脚本引入。

注意：沙箱页面无法直接调用Chrome扩展的原生API，如果你的逻辑需要用到storage等能力，需要额外通过postMessage和扩展的后台服务 worker 通信交互。

额外注意事项 #

• 你之前通过<meta>标签设置CSP不生效是正常情况，Chrome扩展页面会优先使用manifest.json中声明的CSP规则，页面内的meta配置会被直接覆盖
• 无需切换到Manifest V2，该版本已经被Chrome停止支持，后续无法正常发布使用
• 你修改后的配置中给object-src加unsafe-eval属于冗余配置，删除不影响运行

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