Chrome扩展Manifest V3中如何在Service Worker导入Browserify脚本？

方法1：让Browserify输出ES模块 #

默认Browserify打包产物是CommonJS模块，而你的background.js是ES模块类型，直接导入会导致导出结构不兼容。需修改打包配置输出ES模块：

• 先安装适配插件：

  npm install browserify-esm --save-dev
  

• 调整打包命令：

  browserify main.js -p browserify-esm -o bundle.js
  

• 修改background.js的导入方式，直接获取默认导出：

  import unique from './bundle.js';
  console.log(unique); // 可正常获取uniq函数
  

方法2：在ES模块中兼容CommonJS产物 #

如果不想修改打包流程，可利用Service Worker支持的createRequireAPI来加载CommonJS模块：

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

const unique = require('./bundle.js');
console.log(unique); // 正常获取目标函数

注意事项 #

• 确保bundle.js的相对路径在background.js中正确，Chrome扩展资源路径以manifest文件位置为基准。
• 确认Chrome版本足够新，Service Worker对ES模块的支持需Chrome 92及以上版本。

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