[PS-1829] Fix Service Worker Startup in MV3 (#4000)

* Fix Service Worker Startup in MV3

* Removed unneeded plugin from shared main config
* Added plugin back behind MV2 check
* Added background entry behind MV2 check
* Added totally new config for MV3 behind check
* Target `webworker` for MV3 background
* Export array of configs

* Address PR feedback

* Remove comment

apps/browser/webpack.config.js

@@ -6,6 +6,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const { AngularWebpackPlugin } = require("@ngtools/webpack");
 const TerserPlugin = require("terser-webpack-plugin");
+const { TsconfigPathsPlugin } = require("tsconfig-paths-webpack-plugin");
 const configurator = require("./config/config");
 
 if (process.env.NODE_ENV == null) {
@@ -67,17 +68,24 @@ const moduleRules = [
   },
 ];
 
+const requiredPlugins = [
+  new webpack.DefinePlugin({
+    "process.env": {
+      ENV: JSON.stringify(ENV),
+    },
+  }),
+  new webpack.EnvironmentPlugin({
+    FLAGS: envConfig.flags,
+    DEV_FLAGS: ENV === "development" ? envConfig.devFlags : {},
+  }),
+];
+
 const plugins = [
   new HtmlWebpackPlugin({
     template: "./src/popup/index.html",
     filename: "popup/index.html",
     chunks: ["popup/polyfills", "popup/vendor-angular", "popup/vendor", "popup/main"],
   }),
-  new HtmlWebpackPlugin({
-    template: "./src/background.html",
-    filename: "background.html",
-    chunks: ["vendor", "background"],
-  }),
   new HtmlWebpackPlugin({
     template: "./src/notification/bar.html",
     filename: "notification/bar.html",
@@ -99,11 +107,6 @@ const plugins = [
     filename: "[name].css",
     chunkFilename: "chunk-[id].css",
   }),
-  new webpack.DefinePlugin({
-    "process.env": {
-      ENV: JSON.stringify(ENV),
-    },
-  }),
   new AngularWebpackPlugin({
     tsConfigPath: "tsconfig.json",
     entryModule: "src/popup/app.module#AppModule",
@@ -119,19 +122,20 @@ const plugins = [
     exclude: [/content\/.*/, /notification\/.*/],
     filename: "[file].map",
   }),
-  new webpack.EnvironmentPlugin({
+  ...requiredPlugins,
-    FLAGS: envConfig.flags,
-    DEV_FLAGS: ENV === "development" ? envConfig.devFlags : {},
-  }),
 ];
 
-const config = {
+/**
+ * @type {import("webpack").Configuration}
+ * This config compiles everything but the background
+ */
+const mainConfig = {
+  name: "main",
   mode: ENV,
   devtool: false,
   entry: {
     "popup/polyfills": "./src/popup/polyfills.ts",
     "popup/main": "./src/popup/main.ts",
-    background: "./src/background.ts",
     "content/autofill": "./src/content/autofill.js",
     "content/autofiller": "./src/content/autofiller.ts",
     "content/notificationBar": "./src/content/notificationBar.ts",
@@ -209,18 +213,72 @@ const config = {
   plugins: plugins,
 };
 
+/**
+ * @type {import("webpack").Configuration[]}
+ */
+const configs = [];
+
 if (manifestVersion == 2) {
-  // We can't use this in manifest v3
+  mainConfig.optimization.splitChunks.cacheGroups.commons2 = {
-  // Ideally we understand why this breaks it and we don't have to do this
-  config.optimization.splitChunks.cacheGroups.commons2 = {
     test: /[\\/]node_modules[\\/]/,
     name: "vendor",
     chunks: (chunk) => {
       return chunk.name === "background";
     },
   };
+
+  // Manifest V2 uses Background Pages which requires a html page.
+  mainConfig.plugins.push(
+    new HtmlWebpackPlugin({
+      template: "./src/background.html",
+      filename: "background.html",
+      chunks: ["vendor", "background"],
+    })
+  );
+
+  // Manifest V2 background pages can be run through the regular build pipeline.
+  // Since it's a standard webpage.
+  mainConfig.entry.background = "./src/background.ts";
+
+  configs.push(mainConfig);
 } else {
-  config.entry["content/misc-utils"] = "./src/content/misc-utils.ts";
+  // Manifest v3 needs an extra helper for utilities in the content script.
+  // The javascript output of this should be added to manifest.v3.json
+  mainConfig.entry["content/misc-utils"] = "./src/content/misc-utils.ts";
+
+  /**
+   * @type {import("webpack").Configuration}
+   */
+  const backgroundConfig = {
+    name: "background",
+    mode: ENV,
+    devtool: false,
+    entry: "./src/background.ts",
+    target: "webworker",
+    output: {
+      filename: "background.js",
+      path: path.resolve(__dirname, "build"),
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          loader: "ts-loader",
+        },
+      ],
+    },
+    resolve: {
+      extensions: [".ts", ".js"],
+      symlinks: false,
+      modules: [path.resolve("../../node_modules")],
+      plugins: [new TsconfigPathsPlugin()],
+    },
+    dependencies: ["main"],
+    plugins: [...requiredPlugins],
+  };
+
+  configs.push(mainConfig);
+  configs.push(backgroundConfig);
 }
 
-module.exports = config;
+module.exports = configs;