1
0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-22 16:29:09 +01:00

[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
This commit is contained in:
Justin Baur 2022-11-17 15:15:34 -05:00 committed by GitHub
parent 3c0beef3a5
commit a57424df75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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({
FLAGS: envConfig.flags,
DEV_FLAGS: ENV === "development" ? envConfig.devFlags : {},
}),
...requiredPlugins,
];
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
// Ideally we understand why this breaks it and we don't have to do this
config.optimization.splitChunks.cacheGroups.commons2 = {
mainConfig.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;