Chrome扩展Manifest V3中如何在Service Worker加载NPM模块或JS文件？

1. 打包为IIFE自执行函数（推荐用于NPM模块） #

把NPM模块通过Webpack、Rollup这类工具打包成无依赖的IIFE格式，可以直接将打包后的代码嵌入Service Worker文件，或者存为独立的.js文件，用Service Worker原生的importScripts()加载：

// service-worker.js
importScripts('./third-party-bundle.js');
// 调用模块暴露的全局变量
thirdPartyModule.run();

打包时记得把目标环境设为webworker，避免生成依赖DOM的代码。

2. 直接用importScripts()加载普通JS文件 #

如果第三方代码是无ES模块语法的独立.js文件，直接用importScripts()同步加载即可，脚本中的变量会自动进入Service Worker的全局作用域：

// service-worker.js
// 加载CDN资源
importScripts('https://cdn.example.com/utils.js');
// 加载本地文件
importScripts('./libs/analytics.js');

3. 打包CommonJS格式（复杂项目适用） #

对于依赖较多的NPM模块，可配置打包工具将其转为CommonJS格式后打包成单文件，再用importScripts()加载。以Webpack为例：

// webpack.config.js
module.exports = {
  target: 'webworker',
  entry: './src/sw-entry.js',
  output: {
    filename: 'service-worker.js',
    path: './dist',
    libraryTarget: 'umd'
  }
};

在入口文件sw-entry.js中引入模块，打包后的service-worker.js就能直接在扩展中使用。

4. 借助Offscreen/Side Panel文档（处理依赖DOM的代码） #

如果第三方代码必须依赖DOM环境，可将其放在Offscreen或Side Panel文档中，通过消息传递与Service Worker交互：

<!-- offscreen.html -->
<script src="./third-party-dom-code.js"></script>
<script>
chrome.runtime.onMessage.addListener((msg, _, sendResponse) => {
  if (msg.action === 'invoke') {
    const result = thirdPartyDomMethod(msg.payload);
    sendResponse(result);
  }
});
</script>

// service-worker.js
async function callThirdPartyCode(payload) {
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: ['DOM_SCRAPING'],
    justification: '需要DOM环境运行第三方代码'
  });
  return chrome.runtime.sendMessage({
    action: 'invoke',
    payload
  });
}

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