Safari扩展Manifest V3中CSP配置致图片加载失败求助

你的问题核心是Safari对Manifest V3的CSP解析逻辑和Chrome存在差异，并非你的CSP定义不规范，而是Safari的严格执行（以及对Manifest V3的兼容细节）导致的。

可能的原因及解决方案 #

1. 调整域名匹配规则为带通配符形式 #

Safari的CSP解析对域名匹配的要求更严格，即使指定了https://images.unsplash.com，它可能需要通配符来覆盖带查询参数的请求。修改CSP如下：

"content_security_policy": {
  "extension_pages": "img-src https://*.images.unsplash.com data:; script-src 'self'; object-src 'self';"
}

2. 合并规则到default-src兜底 #

部分版本的Safari在Manifest V3中处理extension_pages的CSP时，可能优先遵循default-src的规则，单独定义img-src可能被忽略。尝试调整为：

"content_security_policy": {
  "extension_pages": "default-src 'self'; img-src https://images.unsplash.com data:;"
}

3. 检查Safari版本兼容性 #

Safari从15.4版本才开始支持Manifest V3，旧版本存在CSP解析的已知bug。建议升级到最新稳定版后再测试。

4. 注意：CSP不支持匹配带查询参数的完整URL #

CSP的img-src规则仅基于域名、协议或端口匹配，查询参数不属于匹配范围，这也是你添加完整URL仍报错的原因，无需尝试这种方式。

验证方法 #

修改CSP后重新打包加载扩展，打开Safari开发者工具（开发>显示Web检查器），查看控制台是否还有CSP报错，同时确认图片请求的请求头和加载状态是否正常。

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