Chrome扩展Manifest V3中Webpack导入npm模块报错解决方案咨询

问题根源 #

当前Webpack配置仅针对前端页面的index.js打包，service-worker.js是直接被Chrome加载的原生ES模块。Chrome扩展的Service Worker环境无法直接解析node_modules中的第三方模块（比如webextension-polyfill），必须通过Webpack将依赖打包进Service Worker的bundle文件中。

解决步骤 #

1. 修改Webpack配置，添加Service Worker入口 #

更新webpack.config.js，将service-worker.js设为单独入口，并调整输出配置以区分多个bundle：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development",
    // 新增service-worker入口
    entry: {
        main: "./src/index.js",
        "service-worker": "./src/ui/backend/service-worker.js" // 路径需匹配你的实际文件位置
    },
    output: { 
        path: path.resolve(__dirname, "build"), 
        filename: "[name].js" // 用[name]占位符自动生成main.js和service-worker.js
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"],
                    },
                },
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
        }),
    ],
    devtool: "cheap-module-source-map",
    // 可选：设置target为webworker，适配Service Worker环境
    target: "webworker"
};

2. 更新Manifest.json中的Service Worker路径 #

确保manifest.json里的service_worker指向Webpack打包后的文件：

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

3. 验证Service Worker代码导入 #

保持service-worker.js中的导入逻辑不变，Webpack会自动将webextension-polyfill打包进最终的bundle：

import { initTracker } from "./tracker.js";
import Browser from "webextension-polyfill";

initTracker();

4. 重新打包并加载扩展 #

执行Webpack重新打包：

npx webpack

然后在Chrome扩展管理页面重新加载扩展，检查错误是否消失。

额外注意事项 #

• 确保已安装webextension-polyfill：未安装则执行npm install webextension-polyfill
• Service Worker环境不支持DOM API，不要在service-worker.js或其依赖中使用DOM相关代码
• 若开发模式下加载异常，可暂时将devtool改为inline-source-map测试

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