如何在Chrome扩展中模仿Node.js的node_modules加载机制

你可以根据你的扩展Manifest版本和Chrome兼容要求选择以下两种方案：

方案1：使用Import Maps（推荐，Chrome 89+ / Manifest V3适用） #

Chrome原生支持ES模块的Import Maps特性，完全可以实现和Node.js一致的短路径引入效果：

1. 在扩展的入口HTML文件中插入importmap配置：

<script type="importmap">
{
  "imports": {
    "lodash": "./node_modules/lodash/lodash.min.js",
    "axios": "./node_modules/axios/dist/axios.min.js"
    // 按需添加你用到的所有第三方库映射
  }
}
</script>

2. 在manifest.json的web_accessible_resources字段中声明所有node_modules下需要用到的资源路径，避免Chrome的安全策略拦截加载：

{
  "web_accessible_resources": [
    {
      "resources": ["node_modules/**/*.min.js"],
      "matches": ["<all_urls>"]
    }
  ]
}

3. 之后在你的业务代码中就可以直接用短路径引入，不需要补全node_modules路径：

import _ from 'lodash'
import axios from 'axios'

方案2：自定义全局加载函数（兼容Manifest V2/低版本Chrome） #

如果需要兼容更低版本的Chrome或者用的是Manifest V2，可以自己实现一个极简的模块加载器：

1. 先在全局公共脚本中定义映射表和加载函数：

// 维护第三方库的路径映射
const MODULE_MAP = {
  'lodash': './node_modules/lodash/lodash.min.js',
  'axios': './node_modules/axios/dist/axios.min.js'
}
// 全局加载函数
window.require = async (moduleName) => {
  if (window[moduleName]) return window[moduleName]
  const modulePath = MODULE_MAP[moduleName]
  if (!modulePath) throw new Error(`模块${moduleName}未配置映射`)
  // 动态加载脚本
  await new Promise((resolve, reject) => {
    const script = document.createElement('script')
    script.src = chrome.runtime.getURL(modulePath)
    script.onload = resolve
    script.onerror = reject
    document.head.appendChild(script)
  })
  // UMD格式的库会挂载到window上，直接返回
  return window[moduleName]
}

2. 业务代码中直接调用即可：

const _ = await window.require('lodash')

注意：如果第三方库是纯ES模块格式，需要把动态加载逻辑换成import(chrome.runtime.getURL(modulePath))的写法即可。

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