如何在Manifest V3版Chrome扩展的background.js中使用jQuery

Manifest V3的background运行环境调整为Service Worker，不再支持V2版本中通过background.scripts数组按顺序加载多脚本实现全局变量共享的方案，以下是可直接落地的实现方式：

方案一：本地文件引入（推荐，稳定性最高） #

该方案不需要依赖外部网络，扩展离线状态也可正常运行：

• 下载对应版本的jQuery源文件（建议用压缩生产版jquery.min.js），存到扩展项目的本地目录，例如存放在/lib/jquery.min.js路径下。
• 确认manifest.json中的background配置符合V3规范，示例如下：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": [] // 根据你的业务需求配置对应权限即可
}

• 在background.js的最顶部，也就是所有业务逻辑之前，通过Service Worker原生支持的importScripts方法引入本地jQuery文件：

// 路径填写jQuery文件相对于background.js的相对路径
importScripts('./lib/jquery.min.js');

// 引入完成后即可直接调用$ / jQuery全局对象
console.log('当前jQuery版本：', $.fn.jquery); // 控制台正常输出版本号即代表引入成功

方案二：ES Module 方式引入 #

如果你的扩展全量采用ES模块规范开发，可以开启Service Worker的ES模块支持后引入jQuery：

• 修改manifest.json的background配置，添加type: "module"声明：

{
  "background": {
    "service_worker": "background.js",
    "type": "module"
  }
}

• 将jQuery的ES模块版本存到本地后，在background.js顶部用import语法引入：

import $ from './lib/jquery.esm.js';

关键注意事项 #

Service Worker 环境不存在window、document等DOM API，所有依赖DOM的jQuery方法（比如DOM选择器、节点操作、样式修改、动画效果等）都无法在background中运行，调用会直接抛出错误。如果需要操作页面DOM，请将相关逻辑写到content script中，不要放在background里。

常见踩坑点：

• 不要尝试用动态创建<script>标签的方式加载jQuery，Service Worker中没有document对象，该方法完全无效，这也是绝大多数V2旧方案在V3中失效的核心原因。
• 如果引入后报$ is not defined错误，优先检查importScripts/import的文件路径是否正确，是否写在了所有调用$的代码之前。
• jQuery中不依赖DOM的工具方法（比如$.ajax、$.each、$.extend、$.Deferred等）在Service Worker环境下可以正常使用，配置好扩展权限后$.ajax不会存在跨域限制。

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