Chrome扩展对接Google Calendar API时遭遇CSP阻止外部脚本加载问题

CSP报错修复方式 #

不建议将动态加载的脚本全部下载到本地：Google API客户端库的动态加载脚本路径会随版本、加载模块、签名信息动态变化，且定期更新，本地存储无法同步更新，会出现功能失效、权限过期等问题，维护成本极高。
正确修复方案为修改扩展manifest.json中的内容安全策略配置，将Google API的域名加入script-src白名单：

Manifest V3 配置示例 #

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

如果在Manifest V3的service worker中引入gapi库，需使用importScripts("https://apis.google.com/js/api.js")方式加载。

Manifest V2 配置示例 #

{
  "manifest_version": 2,
  "content_security_policy": "script-src 'self' https://apis.google.com; object-src 'none'"
}

官方示例适配Chrome扩展的注意事项 #

官方快速开始示例默认面向普通网页场景，在Chrome扩展中运行还需要调整以下配置，避免运行异常：

• OAuth重定向URI配置：需要在Google Cloud控制台的OAuth凭据配置中，将扩展专属地址chrome-extension://<你的扩展ID>/添加到授权重定向URI白名单，否则会触发重定向地址不匹配错误。
• 授权流程触发位置：不要在扩展popup页面直接触发授权弹窗，popup页面会因用户点击外部区域失焦自动关闭，导致授权流程中断，建议将授权逻辑放在后台service worker（Manifest V3）/后台页面（Manifest V2）中触发，或单独打开扩展内的标签页完成授权。
• 权限范围配置：添加日历事件仅需要https://www.googleapis.com/auth/calendar.events权限即可，不要申请多余的高权限，否则扩展上架审核会被拒绝。
• 内容脚本限制：不要在内容脚本中直接调用gapi相关逻辑，内容脚本的CSP限制更严格，无法完成授权和API调用，所有Google Calendar API请求应该由后台服务处理，内容脚本通过chrome.runtime消息传递机制和后台通信。
  如果不想引入gapi客户端库，可以自行实现Chrome扩展的OAuth2流程，直接用fetch调用Google Calendar REST接口，完全规避动态脚本加载的问题，更符合扩展安全规范。

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