ParcelJs构建Web Extension Manifest V3时无法解析service_worker路径

方案1：添加Parcel WebExtension transformer处理规则 #

Parcel对Manifest V3的service_worker字段路径解析逻辑和script不同，需通过专用transformer修正：

1. 在项目根目录新建/修改.parcelrc文件，写入：

{
  "transformers": {
    "manifest.json": ["@parcel/transformer-json", "@parcel/transformer-webextension"]
  }
}

2. 安装依赖：

npm install @parcel/transformer-webextension --save-dev

这个transformer会专门处理Web扩展Manifest的字段解析，避免路径跳出项目根目录。

方案2：调整manifest中service_worker的路径写法 #

改用明确的相对路径开头，并添加type: "module"声明：

{
  "background": {
    "service_worker": "./src/background/service-worker.js",
    "type": "module"
  }
}

必须以./开头明确指向项目根目录下的文件，Parcel会自动映射正确的打包路径。

方案3：清理Parcel缓存后重新构建 #

旧缓存可能导致路径解析异常，执行以下命令强制重新构建：

rm -rf .parcel-cache dist
npx parcel build manifest.json

跨浏览器适配补充 #

因Firefox暂不支持Manifest V3的service worker，可通过环境变量区分构建：
在package.json中添加两个构建脚本：

{
  "scripts": {
    "build:chrome": "parcel build manifest.json --no-source-maps",
    "build:firefox": "parcel build manifest-v2.json --no-source-maps"
  }
}

其中manifest-v2.json使用background.scripts字段适配Firefox。

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