Firefox扩展内容脚本中如何导入npm包？

错误原因分析 #

1. 第一个静态import错误：Firefox内容脚本默认以普通脚本模式运行，而非ES模块。静态import语句仅能在ES模块环境中使用，因此触发语法错误。
2. 第二个裸规范符错误：浏览器（包括Firefox扩展的内容脚本环境）不支持直接引用is-even这类npm包名（即「裸规范符」）。它无法识别这类名称对应的文件路径，必须使用相对路径（.//../）或绝对路径指定模块位置。

解决方案 #

方案一：手动处理（无需打包工具） #

步骤1：准备依赖文件

从is-even包的源代码中提取核心逻辑，或直接下载该包的index.js文件，放到你的扩展目录中（比如新建libs文件夹存放，路径为./libs/is-even.js）。

步骤2：使用静态import（推荐）

修改manifest.json，将内容脚本标记为ES模块：

"content_scripts": [
  {
    "matches": ["<all_urls>"], // 根据你的需求调整匹配规则
    "js": ["content-script.js"],
    "type": "module"
  }
]

然后在content-script.js中用相对路径导入：

import isEven from './libs/is-even.js';

// 示例使用
console.log(isEven(4)); // 输出true

步骤3：使用动态import

如果不想修改manifest的模块配置，可继续用动态import，但需替换为相对路径，同时注意解构模块的默认导出：

async function main() {
  // 解构获取默认导出
  const { default: isEven } = await import('./libs/is-even.js');
  console.log(isEven(3)); // 输出false
}
main();

方案二：使用打包工具（适合复杂项目） #

对于依赖较多的扩展，推荐用Webpack、Vite或Rollup等工具打包：

1. 初始化项目并安装依赖：npm install is-even
2. 配置打包工具，将内容脚本和is-even等依赖打包为单个文件（比如dist/content-script.js）
3. 在manifest.json中引用打包后的文件，无需设置type: module：

"content_scripts": [
  {
    "matches": ["<all_urls>"],
    "js": ["dist/content-script.js"]
  }
]

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