Unable to create webpack bundle for chrome extension

Sajal Arora — Wed, 21 Jul 2021 08:16:23 +0000

I am fairly new to chrome extension development. I am trying to use webpack for bundling since I am using node modules. The entry file in my case is service-worker.js since that's where the modules and packages are being imported. I end up with the following error on build.

ReferenceError: window is not defined
    at shouldUseActiveX (service-worker.js:870)
    at createHTMLParser (service-worker.js:843)
    at Object../node_modules/turndown/lib/turndown.browser.es.js (service-worker.js:877)
    at __webpack_require__ (service-worker.js:1594)
    at Object../src/service/save-url-section.js (service-worker.js:1372)
    at __webpack_require__ (service-worker.js:1594)
    at service-worker.js:1658
    at service-worker.js:1887
    at service-worker.js:1890

Yes, I know that this question had been asked several times before for different scenarios. The window object in background is not allowed. But in my situation I have

       chrome.scripting
          .executeScript({
            target: { tabId: tabId },
            files: ["./foreground/saveUrl.js"],
          })

in my service-worker.js. Now I am assuming that the path mentioned in the files array is getting resolved and bringing all the window into the bundled file which is why I am ending up the above error. I really need help here.

BTW this is my webpack config

var options = {
  mode: process.env.NODE_ENV || "development",
  entry: {
    // popup: path.join(__dirname, "src", "popup", "popup.js"),
    "service-worker": path.join(__dirname, "src", "service-worker.js"),
  },
  output: {
    globalObject: "this",
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
        exclude: /node_modules/,
      },
      {
        test: new RegExp(".(" + fileExtensions.join("|") + ")$"),
        use: [
          {
            loader: "file-loader",
          },
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.html$/,
        loader: "html-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js"],
    // alias: alias,
  },
  plugins: [
    // clean the build folder
    new CleanWebpackPlugin({
      cleanStaleWebpackAssets: false,
    }),
    // expose and write the allowed env vars on the compiled bundle
    new webpack.EnvironmentPlugin(["NODE_ENV"]),
    new CopyWebpackPlugin({
      patterns: [
        { from: "./src/logo", to: "./src/logo" },
        { from: "./src/foreground", to: "./src/foreground" },
        { from: "./src/settings", to: "./src/settings" },
        { from: "./src/popup", to: "./src/popup" },
        { from: "./src/utils", to: "./src/utils" },
        {
          from: "./manifest.json",
          transform: function (content, path) {
            // generates the manifest file using the package.json informations
            return Buffer.from(
              JSON.stringify({
                description:
                  process.env.npm_package_description || "Notion Pro Clipper",
                version: process.env.npm_package_version || 3,
                background: {
                  "service-worker": "./service-worker.js",
                },
                ...JSON.parse(content.toString()),
              })
            );
          },
        },
      ],
    }),
    // new HtmlWebpackPlugin({
    //   template: path.join(__dirname, "src", "popup", "index.html"),
    //   filename: "popup.html",
    //   chunks: ["popup"],
    // }),
    // new HtmlWebpackPlugin({
    //   template: path.join(__dirname, "src", "settings/settings.html"),
    //   filename: "settings.html",
    //   chunks: ["options"],
    // }),
    // new HtmlWebpackPlugin({
    //   template: path.join(__dirname, "src", "background.html"),
    //   filename: "background.html",
    //   chunks: ["background"]
    // }),
    new WriteFilePlugin(),
  ],
};

DEV Community: Sajal Arora

Unable to create webpack bundle for chrome extension