Chrome扩展调用Google API遇CSP限制，如何解决？

报错信息翻译 #

拒绝加载脚本 'https://apis.google.com//scs/abc-static//js/k=gapi.lb.en.dzXZWX9QTbE.O/m=client/rt=j/sv=1/d=1/ed=1/rs=AHpOoo_epIQDPHdjFr3MLkazUi2Jmy50dQ/cb=gapi.loaded_0?le=scs'，因为它违反了以下内容安全策略指令："script-src 'self' 'wasm-unsafe-eval'"。请注意，'script-src-elem' 未明确设置，因此使用 'script-src' 作为回退。

具体解决方案 #

• 正确配置扩展的内容安全策略（CSP）
  不要使用'unsafe-inline'，Chrome扩展对该值限制极严，直接将Google API域名加入信任列表即可。根据你的扩展Manifest版本修改配置：

  • Manifest V3：在manifest.json中添加或修改content_security_policy字段：

    "content_security_policy": {
      "extension_pages": "script-src 'self' https://apis.google.com; object-src 'self'"
    }
    

  • Manifest V2：直接修改content_security_policy字段：

    "content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'"
    

  该配置会允许加载https://apis.google.com域名下的所有脚本，包括gapi动态调用的依赖资源。

• 不要本地复制gapi脚本
  Google API的api.js会动态加载后续依赖脚本（即报错中的长URL资源），本地复制主脚本无法覆盖所有动态加载的内容，反而会引发更多CSP拦截问题，直接使用官方CDN地址即可。

• 规范加载gapi
  在扩展的页面（如popup、options页面）中直接引入官方脚本：

  <script src="https://apis.google.com/js/api.js"></script>
  

  之后按照官方教程初始化gapi即可，无需额外处理动态加载的脚本，CSP配置会自动允许这些请求。

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