An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
July 21, 2021 08:16 am GMT
Original Link: https://dev.to/sajal_arora_bf838c9eb6a01/unable-to-create-webpack-bundle-for-chrome-extension-4a4e
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:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To