如何通过Chrome扩展调用Google Calendar API创建日程事件

问题根因 #

• 你的Content Security Policy（CSP）规则限制过严：manifest.json中script-src仅允许加载https://apis.google.com/js/api.js单个文件，但gapi sdk初始化时会自动请求https://apis.google.com/js/client.js子资源，该资源不在允许列表中，因此触发报错。
• 官方示例未触发报错是因为它运行在普通网页环境，没有Chrome扩展的强制CSP约束，只要网页本身的CSP规则允许即可正常加载。

修复当前问题的方案 #

1. 修改manifest.json中的CSP规则，放宽对googleapis域名下脚本的加载限制：

// 把原来的content_security_policy字段替换为下面的内容
"content_security_policy": "script-src 'self' https://apis.google.com; object-src 'self'"

2. 建议直接在popup.html中静态引入gapi脚本，替代动态加载的写法，避免时序问题：

<!doctype html>
<html>
<head>
  <title>GTmetrix Analyzer</title>
  <!-- 新增这行静态引入脚本 -->
  <script src="https://apis.google.com/js/api.js"></script>
  <script src="popup.js"></script>
</head>
<body>
  <button id="authorize_button" style="display: none;">Authorize</button>
  <button id="signout_button" style="display: none;">Sign Out</button>
</body>
</html>

3. 删掉popup.js末尾动态创建script加载api.js的代码，直接在DOM加载完成后调用handleClientLoad()即可。

更优的实现方案（推荐） #

当前依赖gapi sdk的方式存在两个明显缺陷：一是受CSP约束大，二是无法兼容Chrome扩展Manifest V3版本（V3已禁止加载远程脚本），推荐使用Chrome扩展原生能力实现：

• 用chrome.identity权限自带的launchWebAuthFlow方法完成OAuth2授权，无需依赖gapi的auth2模块
• 授权拿到access_token后，直接通过fetch请求Google Calendar REST接口完成事件创建等操作，无需加载整个gapi client sdk
• 该方案体积更小、加载速度更快，且完美兼容Manifest V3标准，后续不需要大改即可完成版本迁移

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