Chrome扩展Manifest V3中如何通过CDN引入JavaScript库？

我开发了一款Chrome扩展，功能是借助ChatGPT分析页面内容并创建Google日历邀请。之前为实现弹窗按钮读取页面文本的核心功能，我把jQuery下载到本地并提交到了仓库，这是不良实践，所以想改用CDN托管的jQuery资源，比如jsdelivr，但在弹窗页面引入CDN地址的jQuery脚本时一直报错。

我查了StackOverflow上的相关回答，但都解决不了我的问题：

• 有的回答针对Manifest V2，适配V3的方案完全无效
• 有的问题是问如何在活动标签页加载jQuery，不是作为扩展自身依赖使用
• 多数问题聚焦在内容脚本或后台工作线程里加载库，没人讲扩展弹窗页面的情况
• 个别相关问题表述模糊，没有有效答案，而且还是基于Manifest V2的

针对Manifest V3的Chrome扩展弹窗页面，要正确引入CDN托管的jQuery，关键要搞定内容安全策略（CSP）配置和弹窗HTML的脚本引入顺序，具体步骤如下：

1. 配置manifest.json的CSP规则 #

在manifest.json里更新content_security_policy字段，明确允许从CDN加载脚本：

{
  "manifest_version": 3,
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://cdn.jsdelivr.net; object-src 'none'"
  },
  // 其他必填配置：name、version、action（指定弹窗HTML）等
}

Manifest V3对CSP的限制比V2严格很多，extension_pages规则专门管控扩展自身的页面（包括弹窗），必须把CDN域名加入允许列表，否则浏览器会直接拦截脚本加载。

2. 在弹窗HTML中正确引入脚本 #

在弹窗的HTML文件（比如popup.html）里，先引入CDN的jQuery，再引入你的自定义脚本：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 先加载jQuery -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <!-- 弹窗样式文件 -->
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <!-- 弹窗DOM内容，比如功能触发按钮 -->
  <button id="analyzeBtn">分析页面并创建日历邀请</button>
  
  <!-- 后加载业务脚本，确保jQuery已就绪 -->
  <script src="popup.js"></script>
</body>
</html>

这样在popup.js里就能正常使用$或者jQuery对象，实现按钮点击读取页面文本的功能。

3. 常见错误排查 #

如果还是报错，按以下步骤排查：

• 打开弹窗的开发者工具（右键弹窗→检查），查看Console面板的错误信息，确认是不是CSP拦截或者CDN地址无效
• 直接在浏览器地址栏输入CDN的jQuery地址，确认脚本能正常下载
• 检查manifest.json里的action字段，确保正确指向弹窗HTML文件，比如：

  "action": {
    "default_popup": "popup.html"
  }
  

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