Chrome扩展Manifest V3中Service Worker导入类的调用方法及代码优化咨询

首先看你遇到的ReferenceError: Utils is not defined错误，主要有两个核心原因：

1. 类名大小写不匹配 #

你的utils/utils.js里定义的类是小写的utils，但在Service Worker里却尝试实例化大写的Utils，大小写不一致导致JS引擎找不到对应的类。

2. 未将类暴露到全局作用域 #

通过importScripts()加载的脚本，内部定义的变量默认不会自动加入全局作用域。Service Worker的全局对象是self，需要手动把类挂载到self上，才能在外部的Service Worker代码中访问。

修正传统importScripts方案 #

先修改utils/utils.js，修正类名并暴露到全局：

// utils/utils.js
class Utils {
  test() {
    console.log("foooo");
  }
}
// 将类挂载到Service Worker的全局对象self上
self.Utils = Utils;

然后你的Service Worker代码就可以正常调用了：

/*global chrome*/
try {
  importScripts("utils/utils.js");
} catch (e) {
  console.log(e);
}

async function injectPopup() {
  try {
    let b = new Utils();
    b.test(); // 此时会输出"foooo"
  } catch (e) {
    console.log(e);
  }
  // ... 其他逻辑
}

更推荐的现代实践：使用ES模块 #

Chrome Manifest V3已经支持Service Worker使用ES模块，这种方式更符合现代JS开发规范，有更好的作用域管理和代码组织能力，步骤如下：

1. 修改manifest配置 #

在manifest.json中给background的service_worker添加type: "module"：

{
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  // 其他扩展配置...
}

2. 用ES模块语法重构代码 #

修改utils/utils.js为模块导出：

// utils/utils.js
export class Utils {
  test() {
    console.log("foooo");
  }
}

然后在Service Worker（background.js）中用import语句导入：

/*global chrome*/
import { Utils } from './utils/utils.js';

async function injectPopup() {
  try {
    let b = new Utils();
    b.test();
  } catch (e) {
    console.log(e);
  }
  // ... 其他逻辑
}

优势说明 #

• 避免全局作用域污染，模块内的变量默认私有，只有导出的内容能被外部访问
• 支持树摇（Tree Shaking），打包时可以剔除未使用的代码，减少扩展体积
• 代码结构更清晰，符合现代前端工程化的组织方式

注意：这种方式要求Chrome版本在91及以上，且Manifest版本必须是V3。

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