Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 21, 2021 08:16 am GMT

Unable to create webpack bundle for chrome extension

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(),  ],};

Original Link: https://dev.to/sajal_arora_bf838c9eb6a01/unable-to-create-webpack-bundle-for-chrome-extension-4a4e

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To