Browse Source
* feat: create separate bit licensed browser * feat: refactor webpack config * fix: mv2 build not working * feat: add bit versions of all commands * feat: add bit CI builds * fix: scss missing from buildpull/16278/head
Andreas Coroiu
3 months ago
committed by
GitHub
20 changed files with 738 additions and 461 deletions
@ -0,0 +1,20 @@
@@ -0,0 +1,20 @@
|
||||
@if (showSdkWarning | async) { |
||||
<div class="tw-h-screen tw-flex tw-justify-center tw-items-center tw-p-4"> |
||||
<bit-callout type="danger"> |
||||
{{ "wasmNotSupported" | i18n }} |
||||
<a |
||||
bitLink |
||||
href="https://bitwarden.com/help/wasm-not-supported/" |
||||
target="_blank" |
||||
rel="noreferrer" |
||||
> |
||||
{{ "learnMore" | i18n }} |
||||
</a> |
||||
</bit-callout> |
||||
</div> |
||||
} @else { |
||||
<div [@routerTransition]="getRouteElevation(outlet)"> |
||||
<router-outlet #outlet="outlet"></router-outlet> |
||||
</div> |
||||
<bit-toast-container></bit-toast-container> |
||||
} |
||||
@ -0,0 +1,4 @@
@@ -0,0 +1,4 @@
|
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
||||
require("./popup.scss"); |
||||
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
||||
require("./tailwind.css"); |
||||
@ -0,0 +1,443 @@
@@ -0,0 +1,443 @@
|
||||
const path = require("path"); |
||||
const webpack = require("webpack"); |
||||
const HtmlWebpackPlugin = require("html-webpack-plugin"); |
||||
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"); |
||||
const manifest = require("./webpack/manifest"); |
||||
const AngularCheckPlugin = require("./webpack/angular-check"); |
||||
|
||||
module.exports.getEnv = function getEnv() { |
||||
const ENV = (process.env.ENV = process.env.NODE_ENV); |
||||
const manifestVersion = process.env.MANIFEST_VERSION == 3 ? 3 : 2; |
||||
const browser = process.env.BROWSER ?? "chrome"; |
||||
|
||||
return { ENV, manifestVersion, browser }; |
||||
}; |
||||
|
||||
/** |
||||
* @param {{ |
||||
* configName: string; |
||||
* popup: { |
||||
* entry: string; |
||||
* entryModule: string; |
||||
* }; |
||||
* background: { |
||||
* entry: string; |
||||
* }; |
||||
* tsConfig: string; |
||||
* additionalEntries?: { [outputPath: string]: string } |
||||
* }} params - The input parameters for building the config. |
||||
*/ |
||||
module.exports.buildConfig = function buildConfig(params) { |
||||
if (process.env.NODE_ENV == null) { |
||||
process.env.NODE_ENV = "development"; |
||||
} |
||||
|
||||
const { ENV, manifestVersion, browser } = module.exports.getEnv(); |
||||
|
||||
console.log(`Building Manifest Version ${manifestVersion} app - ${params.configName} version`); |
||||
|
||||
const envConfig = configurator.load(ENV); |
||||
configurator.log(envConfig); |
||||
|
||||
const moduleRules = [ |
||||
{ |
||||
test: /\.(html)$/, |
||||
loader: "html-loader", |
||||
}, |
||||
{ |
||||
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, |
||||
exclude: /loading.svg/, |
||||
generator: { |
||||
filename: "popup/fonts/[name].[contenthash][ext]", |
||||
}, |
||||
type: "asset/resource", |
||||
}, |
||||
{ |
||||
test: /\.(jpe?g|png|gif|svg)$/i, |
||||
exclude: /.*(bwi-font|glyphicons-halflings-regular)\.svg/, |
||||
generator: { |
||||
filename: "popup/images/[name][ext]", |
||||
}, |
||||
type: "asset/resource", |
||||
}, |
||||
{ |
||||
test: /\.css$/, |
||||
use: [ |
||||
{ |
||||
loader: MiniCssExtractPlugin.loader, |
||||
}, |
||||
"css-loader", |
||||
"resolve-url-loader", |
||||
{ |
||||
loader: "postcss-loader", |
||||
options: { |
||||
sourceMap: true, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
test: /\.scss$/, |
||||
use: [ |
||||
{ |
||||
loader: MiniCssExtractPlugin.loader, |
||||
}, |
||||
"css-loader", |
||||
"resolve-url-loader", |
||||
{ |
||||
loader: "sass-loader", |
||||
options: { |
||||
sourceMap: true, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
test: /\.[cm]?js$/, |
||||
use: [ |
||||
{ |
||||
loader: "babel-loader", |
||||
options: { |
||||
configFile: "../../babel.config.json", |
||||
cacheDirectory: ENV === "development", |
||||
compact: ENV !== "development", |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
test: /\.[jt]sx?$/, |
||||
loader: "@ngtools/webpack", |
||||
}, |
||||
]; |
||||
|
||||
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.ejs", |
||||
filename: "popup/index.html", |
||||
chunks: ["popup/polyfills", "popup/vendor-angular", "popup/vendor", "popup/main"], |
||||
browser: browser, |
||||
}), |
||||
new HtmlWebpackPlugin({ |
||||
template: "./src/autofill/notification/bar.html", |
||||
filename: "notification/bar.html", |
||||
chunks: ["notification/bar"], |
||||
}), |
||||
new HtmlWebpackPlugin({ |
||||
template: "./src/autofill/overlay/inline-menu/pages/button/button.html", |
||||
filename: "overlay/menu-button.html", |
||||
chunks: ["overlay/menu-button"], |
||||
}), |
||||
new HtmlWebpackPlugin({ |
||||
template: "./src/autofill/overlay/inline-menu/pages/list/list.html", |
||||
filename: "overlay/menu-list.html", |
||||
chunks: ["overlay/menu-list"], |
||||
}), |
||||
new HtmlWebpackPlugin({ |
||||
template: "./src/autofill/overlay/inline-menu/pages/menu-container/menu-container.html", |
||||
filename: "overlay/menu.html", |
||||
chunks: ["overlay/menu"], |
||||
}), |
||||
new CopyWebpackPlugin({ |
||||
patterns: [ |
||||
{ |
||||
from: manifestVersion == 3 ? "./src/manifest.v3.json" : "./src/manifest.json", |
||||
to: "manifest.json", |
||||
transform: manifest.transform(browser), |
||||
}, |
||||
{ from: "./src/managed_schema.json", to: "managed_schema.json" }, |
||||
{ from: "./src/_locales", to: "_locales" }, |
||||
{ from: "./src/images", to: "images" }, |
||||
{ from: "./src/popup/images", to: "popup/images" }, |
||||
{ from: "./src/autofill/content/autofill.css", to: "content" }, |
||||
], |
||||
}), |
||||
new MiniCssExtractPlugin({ |
||||
filename: "[name].css", |
||||
chunkFilename: "chunk-[id].css", |
||||
}), |
||||
new AngularWebpackPlugin({ |
||||
tsconfig: params.tsConfig, |
||||
entryModule: params.popup.entryModule, |
||||
sourceMap: true, |
||||
}), |
||||
new webpack.ProvidePlugin({ |
||||
process: "process/browser.js", |
||||
}), |
||||
new webpack.SourceMapDevToolPlugin({ |
||||
exclude: [/content\/.*/, /notification\/.*/, /overlay\/.*/], |
||||
filename: "[file].map", |
||||
}), |
||||
...requiredPlugins, |
||||
]; |
||||
|
||||
/** |
||||
* @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": params.popup.entry, |
||||
"content/trigger-autofill-script-injection": |
||||
"./src/autofill/content/trigger-autofill-script-injection.ts", |
||||
"content/bootstrap-autofill": "./src/autofill/content/bootstrap-autofill.ts", |
||||
"content/bootstrap-autofill-overlay": "./src/autofill/content/bootstrap-autofill-overlay.ts", |
||||
"content/bootstrap-autofill-overlay-menu": |
||||
"./src/autofill/content/bootstrap-autofill-overlay-menu.ts", |
||||
"content/bootstrap-autofill-overlay-notifications": |
||||
"./src/autofill/content/bootstrap-autofill-overlay-notifications.ts", |
||||
"content/autofiller": "./src/autofill/content/autofiller.ts", |
||||
"content/auto-submit-login": "./src/autofill/content/auto-submit-login.ts", |
||||
"content/contextMenuHandler": "./src/autofill/content/context-menu-handler.ts", |
||||
"content/content-message-handler": "./src/autofill/content/content-message-handler.ts", |
||||
"content/fido2-content-script": "./src/autofill/fido2/content/fido2-content-script.ts", |
||||
"content/fido2-page-script": "./src/autofill/fido2/content/fido2-page-script.ts", |
||||
"content/ipc-content-script": "./src/platform/ipc/content/ipc-content-script.ts", |
||||
"notification/bar": "./src/autofill/notification/bar.ts", |
||||
"overlay/menu-button": |
||||
"./src/autofill/overlay/inline-menu/pages/button/bootstrap-autofill-inline-menu-button.ts", |
||||
"overlay/menu-list": |
||||
"./src/autofill/overlay/inline-menu/pages/list/bootstrap-autofill-inline-menu-list.ts", |
||||
"overlay/menu": |
||||
"./src/autofill/overlay/inline-menu/pages/menu-container/bootstrap-autofill-inline-menu-container.ts", |
||||
"content/send-on-installed-message": "./src/vault/content/send-on-installed-message.ts", |
||||
"content/send-popup-open-message": "./src/vault/content/send-popup-open-message.ts", |
||||
...params.additionalEntries, |
||||
}, |
||||
cache: |
||||
ENV !== "development" |
||||
? false |
||||
: { |
||||
type: "filesystem", |
||||
name: "main-cache", |
||||
cacheDirectory: path.resolve( |
||||
__dirname, |
||||
"../../node_modules/.cache/webpack-browser-main", |
||||
), |
||||
buildDependencies: { |
||||
config: [__filename], |
||||
}, |
||||
}, |
||||
snapshot: { |
||||
unmanagedPaths: [path.resolve(__dirname, "../../node_modules/@bitwarden/")], |
||||
}, |
||||
optimization: { |
||||
minimize: ENV !== "development", |
||||
minimizer: [ |
||||
new TerserPlugin({ |
||||
exclude: [/content\/.*/, /notification\/.*/, /overlay\/.*/], |
||||
terserOptions: { |
||||
// Replicate Angular CLI behaviour
|
||||
compress: { |
||||
global_defs: { |
||||
ngDevMode: false, |
||||
ngI18nClosureMode: false, |
||||
}, |
||||
}, |
||||
}, |
||||
}), |
||||
], |
||||
splitChunks: { |
||||
cacheGroups: { |
||||
commons: { |
||||
test(module, chunks) { |
||||
return ( |
||||
module.resource != null && |
||||
module.resource.includes(`${path.sep}node_modules${path.sep}`) && |
||||
!module.resource.includes(`${path.sep}node_modules${path.sep}@angular${path.sep}`) |
||||
); |
||||
}, |
||||
name: "popup/vendor", |
||||
chunks: (chunk) => { |
||||
return chunk.name === "popup/main"; |
||||
}, |
||||
}, |
||||
angular: { |
||||
test(module, chunks) { |
||||
return ( |
||||
module.resource != null && |
||||
module.resource.includes(`${path.sep}node_modules${path.sep}@angular${path.sep}`) |
||||
); |
||||
}, |
||||
name: "popup/vendor-angular", |
||||
chunks: (chunk) => { |
||||
return chunk.name === "popup/main"; |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
resolve: { |
||||
extensions: [".ts", ".js"], |
||||
symlinks: false, |
||||
modules: [path.resolve("../../node_modules")], |
||||
fallback: { |
||||
assert: false, |
||||
buffer: require.resolve("buffer/"), |
||||
util: require.resolve("util/"), |
||||
url: require.resolve("url/"), |
||||
fs: false, |
||||
path: require.resolve("path-browserify"), |
||||
}, |
||||
cache: true, |
||||
}, |
||||
output: { |
||||
filename: "[name].js", |
||||
chunkFilename: "assets/[name].js", |
||||
webassemblyModuleFilename: "assets/[modulehash].wasm", |
||||
path: path.resolve(__dirname, "build"), |
||||
clean: true, |
||||
}, |
||||
module: { |
||||
rules: moduleRules, |
||||
}, |
||||
experiments: { |
||||
asyncWebAssembly: true, |
||||
}, |
||||
plugins: plugins, |
||||
}; |
||||
|
||||
/** |
||||
* @type {import("webpack").Configuration[]} |
||||
*/ |
||||
const configs = []; |
||||
|
||||
if (manifestVersion == 2) { |
||||
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/platform/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 = params.background.entry; |
||||
mainConfig.entry["content/fido2-page-script-delay-append-mv2"] = |
||||
"./src/autofill/fido2/content/fido2-page-script-delay-append.mv2.ts"; |
||||
|
||||
configs.push(mainConfig); |
||||
} else { |
||||
// Firefox does not use the offscreen API
|
||||
if (browser !== "firefox") { |
||||
mainConfig.entry["offscreen-document/offscreen-document"] = |
||||
"./src/platform/offscreen-document/offscreen-document.ts"; |
||||
|
||||
mainConfig.plugins.push( |
||||
new HtmlWebpackPlugin({ |
||||
template: "./src/platform/offscreen-document/index.html", |
||||
filename: "offscreen-document/index.html", |
||||
chunks: ["offscreen-document/offscreen-document"], |
||||
}), |
||||
); |
||||
} |
||||
|
||||
const target = browser === "firefox" ? "web" : "webworker"; |
||||
|
||||
/** |
||||
* @type {import("webpack").Configuration} |
||||
*/ |
||||
const backgroundConfig = { |
||||
name: "background", |
||||
mode: ENV, |
||||
devtool: false, |
||||
entry: params.background.entry, |
||||
target: target, |
||||
output: { |
||||
filename: "background.js", |
||||
path: path.resolve(__dirname, "build"), |
||||
}, |
||||
module: { |
||||
rules: [ |
||||
{ |
||||
test: /\.tsx?$/, |
||||
loader: "ts-loader", |
||||
}, |
||||
], |
||||
}, |
||||
cache: |
||||
ENV !== "development" |
||||
? false |
||||
: { |
||||
type: "filesystem", |
||||
name: "background-cache", |
||||
cacheDirectory: path.resolve( |
||||
__dirname, |
||||
"../../node_modules/.cache/webpack-browser-background", |
||||
), |
||||
buildDependencies: { |
||||
config: [__filename], |
||||
}, |
||||
}, |
||||
snapshot: { |
||||
unmanagedPaths: [path.resolve(__dirname, "../../node_modules/@bitwarden/")], |
||||
}, |
||||
experiments: { |
||||
asyncWebAssembly: true, |
||||
}, |
||||
resolve: { |
||||
extensions: [".ts", ".js"], |
||||
symlinks: false, |
||||
modules: [path.resolve("../../node_modules")], |
||||
plugins: [new TsconfigPathsPlugin()], |
||||
fallback: { |
||||
fs: false, |
||||
path: require.resolve("path-browserify"), |
||||
}, |
||||
cache: true, |
||||
}, |
||||
dependencies: ["main"], |
||||
plugins: [...requiredPlugins, new AngularCheckPlugin()], |
||||
}; |
||||
|
||||
// Safari's desktop build process requires a background.html and vendor.js file to exist
|
||||
// within the root of the extension. This is a workaround to allow us to build Safari
|
||||
// for manifest v2 and v3 without modifying the desktop project structure.
|
||||
if (browser === "safari") { |
||||
backgroundConfig.plugins.push( |
||||
new CopyWebpackPlugin({ |
||||
patterns: [ |
||||
{ from: "./src/safari/mv3/fake-background.html", to: "background.html" }, |
||||
{ from: "./src/safari/mv3/fake-vendor.js", to: "vendor.js" }, |
||||
], |
||||
}), |
||||
); |
||||
} |
||||
|
||||
configs.push(mainConfig); |
||||
configs.push(backgroundConfig); |
||||
} |
||||
|
||||
return configs; |
||||
}; |
||||
@ -1,416 +1,13 @@
@@ -1,416 +1,13 @@
|
||||
const path = require("path"); |
||||
const webpack = require("webpack"); |
||||
const HtmlWebpackPlugin = require("html-webpack-plugin"); |
||||
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"); |
||||
const manifest = require("./webpack/manifest"); |
||||
const AngularCheckPlugin = require("./webpack/angular-check"); |
||||
const { buildConfig } = require("./webpack.base"); |
||||
|
||||
if (process.env.NODE_ENV == null) { |
||||
process.env.NODE_ENV = "development"; |
||||
} |
||||
const ENV = (process.env.ENV = process.env.NODE_ENV); |
||||
const manifestVersion = process.env.MANIFEST_VERSION == 3 ? 3 : 2; |
||||
const browser = process.env.BROWSER ?? "chrome"; |
||||
|
||||
console.log(`Building Manifest Version ${manifestVersion} app`); |
||||
|
||||
const envConfig = configurator.load(ENV); |
||||
configurator.log(envConfig); |
||||
|
||||
const moduleRules = [ |
||||
{ |
||||
test: /\.(html)$/, |
||||
loader: "html-loader", |
||||
}, |
||||
{ |
||||
test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, |
||||
exclude: /loading.svg/, |
||||
generator: { |
||||
filename: "popup/fonts/[name].[contenthash][ext]", |
||||
}, |
||||
type: "asset/resource", |
||||
}, |
||||
{ |
||||
test: /\.(jpe?g|png|gif|svg)$/i, |
||||
exclude: /.*(bwi-font|glyphicons-halflings-regular)\.svg/, |
||||
generator: { |
||||
filename: "popup/images/[name][ext]", |
||||
}, |
||||
type: "asset/resource", |
||||
}, |
||||
{ |
||||
test: /\.css$/, |
||||
use: [ |
||||
{ |
||||
loader: MiniCssExtractPlugin.loader, |
||||
}, |
||||
"css-loader", |
||||
"resolve-url-loader", |
||||
{ |
||||
loader: "postcss-loader", |
||||
options: { |
||||
sourceMap: true, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
test: /\.scss$/, |
||||
use: [ |
||||
{ |
||||
loader: MiniCssExtractPlugin.loader, |
||||
}, |
||||
"css-loader", |
||||
"resolve-url-loader", |
||||
{ |
||||
loader: "sass-loader", |
||||
options: { |
||||
sourceMap: true, |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
test: /\.[cm]?js$/, |
||||
use: [ |
||||
{ |
||||
loader: "babel-loader", |
||||
options: { |
||||
configFile: "../../babel.config.json", |
||||
cacheDirectory: ENV === "development", |
||||
compact: ENV !== "development", |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
test: /\.[jt]sx?$/, |
||||
loader: "@ngtools/webpack", |
||||
}, |
||||
]; |
||||
|
||||
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.ejs", |
||||
filename: "popup/index.html", |
||||
chunks: ["popup/polyfills", "popup/vendor-angular", "popup/vendor", "popup/main"], |
||||
browser: browser, |
||||
}), |
||||
new HtmlWebpackPlugin({ |
||||
template: "./src/autofill/notification/bar.html", |
||||
filename: "notification/bar.html", |
||||
chunks: ["notification/bar"], |
||||
}), |
||||
new HtmlWebpackPlugin({ |
||||
template: "./src/autofill/overlay/inline-menu/pages/button/button.html", |
||||
filename: "overlay/menu-button.html", |
||||
chunks: ["overlay/menu-button"], |
||||
}), |
||||
new HtmlWebpackPlugin({ |
||||
template: "./src/autofill/overlay/inline-menu/pages/list/list.html", |
||||
filename: "overlay/menu-list.html", |
||||
chunks: ["overlay/menu-list"], |
||||
}), |
||||
new HtmlWebpackPlugin({ |
||||
template: "./src/autofill/overlay/inline-menu/pages/menu-container/menu-container.html", |
||||
filename: "overlay/menu.html", |
||||
chunks: ["overlay/menu"], |
||||
}), |
||||
new CopyWebpackPlugin({ |
||||
patterns: [ |
||||
{ |
||||
from: manifestVersion == 3 ? "./src/manifest.v3.json" : "./src/manifest.json", |
||||
to: "manifest.json", |
||||
transform: manifest.transform(browser), |
||||
}, |
||||
{ from: "./src/managed_schema.json", to: "managed_schema.json" }, |
||||
{ from: "./src/_locales", to: "_locales" }, |
||||
{ from: "./src/images", to: "images" }, |
||||
{ from: "./src/popup/images", to: "popup/images" }, |
||||
{ from: "./src/autofill/content/autofill.css", to: "content" }, |
||||
], |
||||
}), |
||||
new MiniCssExtractPlugin({ |
||||
filename: "[name].css", |
||||
chunkFilename: "chunk-[id].css", |
||||
}), |
||||
new AngularWebpackPlugin({ |
||||
tsConfigPath: "tsconfig.json", |
||||
module.exports = buildConfig({ |
||||
configName: "OSS", |
||||
popup: { |
||||
entry: "./src/popup/main.ts", |
||||
entryModule: "src/popup/app.module#AppModule", |
||||
sourceMap: true, |
||||
}), |
||||
new webpack.ProvidePlugin({ |
||||
process: "process/browser.js", |
||||
}), |
||||
new webpack.SourceMapDevToolPlugin({ |
||||
exclude: [/content\/.*/, /notification\/.*/, /overlay\/.*/], |
||||
filename: "[file].map", |
||||
}), |
||||
...requiredPlugins, |
||||
]; |
||||
|
||||
/** |
||||
* @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", |
||||
"content/trigger-autofill-script-injection": |
||||
"./src/autofill/content/trigger-autofill-script-injection.ts", |
||||
"content/bootstrap-autofill": "./src/autofill/content/bootstrap-autofill.ts", |
||||
"content/bootstrap-autofill-overlay": "./src/autofill/content/bootstrap-autofill-overlay.ts", |
||||
"content/bootstrap-autofill-overlay-menu": |
||||
"./src/autofill/content/bootstrap-autofill-overlay-menu.ts", |
||||
"content/bootstrap-autofill-overlay-notifications": |
||||
"./src/autofill/content/bootstrap-autofill-overlay-notifications.ts", |
||||
"content/autofiller": "./src/autofill/content/autofiller.ts", |
||||
"content/auto-submit-login": "./src/autofill/content/auto-submit-login.ts", |
||||
"content/contextMenuHandler": "./src/autofill/content/context-menu-handler.ts", |
||||
"content/content-message-handler": "./src/autofill/content/content-message-handler.ts", |
||||
"content/fido2-content-script": "./src/autofill/fido2/content/fido2-content-script.ts", |
||||
"content/fido2-page-script": "./src/autofill/fido2/content/fido2-page-script.ts", |
||||
"content/ipc-content-script": "./src/platform/ipc/content/ipc-content-script.ts", |
||||
"notification/bar": "./src/autofill/notification/bar.ts", |
||||
"overlay/menu-button": |
||||
"./src/autofill/overlay/inline-menu/pages/button/bootstrap-autofill-inline-menu-button.ts", |
||||
"overlay/menu-list": |
||||
"./src/autofill/overlay/inline-menu/pages/list/bootstrap-autofill-inline-menu-list.ts", |
||||
"overlay/menu": |
||||
"./src/autofill/overlay/inline-menu/pages/menu-container/bootstrap-autofill-inline-menu-container.ts", |
||||
"content/send-on-installed-message": "./src/vault/content/send-on-installed-message.ts", |
||||
"content/send-popup-open-message": "./src/vault/content/send-popup-open-message.ts", |
||||
}, |
||||
cache: |
||||
ENV !== "development" |
||||
? false |
||||
: { |
||||
type: "filesystem", |
||||
name: "main-cache", |
||||
cacheDirectory: path.resolve(__dirname, "../../node_modules/.cache/webpack-browser-main"), |
||||
buildDependencies: { |
||||
config: [__filename], |
||||
}, |
||||
}, |
||||
snapshot: { |
||||
unmanagedPaths: [path.resolve(__dirname, "../../node_modules/@bitwarden/")], |
||||
}, |
||||
optimization: { |
||||
minimize: ENV !== "development", |
||||
minimizer: [ |
||||
new TerserPlugin({ |
||||
exclude: [/content\/.*/, /notification\/.*/, /overlay\/.*/], |
||||
terserOptions: { |
||||
// Replicate Angular CLI behaviour
|
||||
compress: { |
||||
global_defs: { |
||||
ngDevMode: false, |
||||
ngI18nClosureMode: false, |
||||
}, |
||||
}, |
||||
}, |
||||
}), |
||||
], |
||||
splitChunks: { |
||||
cacheGroups: { |
||||
commons: { |
||||
test(module, chunks) { |
||||
return ( |
||||
module.resource != null && |
||||
module.resource.includes(`${path.sep}node_modules${path.sep}`) && |
||||
!module.resource.includes(`${path.sep}node_modules${path.sep}@angular${path.sep}`) |
||||
); |
||||
}, |
||||
name: "popup/vendor", |
||||
chunks: (chunk) => { |
||||
return chunk.name === "popup/main"; |
||||
}, |
||||
}, |
||||
angular: { |
||||
test(module, chunks) { |
||||
return ( |
||||
module.resource != null && |
||||
module.resource.includes(`${path.sep}node_modules${path.sep}@angular${path.sep}`) |
||||
); |
||||
}, |
||||
name: "popup/vendor-angular", |
||||
chunks: (chunk) => { |
||||
return chunk.name === "popup/main"; |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
}, |
||||
resolve: { |
||||
extensions: [".ts", ".js"], |
||||
symlinks: false, |
||||
modules: [path.resolve("../../node_modules")], |
||||
fallback: { |
||||
assert: false, |
||||
buffer: require.resolve("buffer/"), |
||||
util: require.resolve("util/"), |
||||
url: require.resolve("url/"), |
||||
fs: false, |
||||
path: require.resolve("path-browserify"), |
||||
}, |
||||
cache: true, |
||||
}, |
||||
output: { |
||||
filename: "[name].js", |
||||
chunkFilename: "assets/[name].js", |
||||
webassemblyModuleFilename: "assets/[modulehash].wasm", |
||||
path: path.resolve(__dirname, "build"), |
||||
clean: true, |
||||
}, |
||||
module: { |
||||
rules: moduleRules, |
||||
}, |
||||
experiments: { |
||||
asyncWebAssembly: true, |
||||
}, |
||||
plugins: plugins, |
||||
}; |
||||
|
||||
/** |
||||
* @type {import("webpack").Configuration[]} |
||||
*/ |
||||
const configs = []; |
||||
|
||||
if (manifestVersion == 2) { |
||||
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/platform/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/platform/background.ts"; |
||||
mainConfig.entry["content/fido2-page-script-delay-append-mv2"] = |
||||
"./src/autofill/fido2/content/fido2-page-script-delay-append.mv2.ts"; |
||||
|
||||
configs.push(mainConfig); |
||||
} else { |
||||
// Firefox does not use the offscreen API
|
||||
if (browser !== "firefox") { |
||||
mainConfig.entry["offscreen-document/offscreen-document"] = |
||||
"./src/platform/offscreen-document/offscreen-document.ts"; |
||||
|
||||
mainConfig.plugins.push( |
||||
new HtmlWebpackPlugin({ |
||||
template: "./src/platform/offscreen-document/index.html", |
||||
filename: "offscreen-document/index.html", |
||||
chunks: ["offscreen-document/offscreen-document"], |
||||
}), |
||||
); |
||||
} |
||||
|
||||
const target = browser === "firefox" ? "web" : "webworker"; |
||||
|
||||
/** |
||||
* @type {import("webpack").Configuration} |
||||
*/ |
||||
const backgroundConfig = { |
||||
name: "background", |
||||
mode: ENV, |
||||
devtool: false, |
||||
background: { |
||||
entry: "./src/platform/background.ts", |
||||
target: target, |
||||
output: { |
||||
filename: "background.js", |
||||
path: path.resolve(__dirname, "build"), |
||||
}, |
||||
module: { |
||||
rules: [ |
||||
{ |
||||
test: /\.tsx?$/, |
||||
loader: "ts-loader", |
||||
}, |
||||
], |
||||
}, |
||||
cache: |
||||
ENV !== "development" |
||||
? false |
||||
: { |
||||
type: "filesystem", |
||||
name: "background-cache", |
||||
cacheDirectory: path.resolve( |
||||
__dirname, |
||||
"../../node_modules/.cache/webpack-browser-background", |
||||
), |
||||
buildDependencies: { |
||||
config: [__filename], |
||||
}, |
||||
}, |
||||
snapshot: { |
||||
unmanagedPaths: [path.resolve(__dirname, "../../node_modules/@bitwarden/")], |
||||
}, |
||||
experiments: { |
||||
asyncWebAssembly: true, |
||||
}, |
||||
resolve: { |
||||
extensions: [".ts", ".js"], |
||||
symlinks: false, |
||||
modules: [path.resolve("../../node_modules")], |
||||
plugins: [new TsconfigPathsPlugin()], |
||||
fallback: { |
||||
fs: false, |
||||
path: require.resolve("path-browserify"), |
||||
}, |
||||
cache: true, |
||||
}, |
||||
dependencies: ["main"], |
||||
plugins: [...requiredPlugins, new AngularCheckPlugin()], |
||||
}; |
||||
|
||||
// Safari's desktop build process requires a background.html and vendor.js file to exist
|
||||
// within the root of the extension. This is a workaround to allow us to build Safari
|
||||
// for manifest v2 and v3 without modifying the desktop project structure.
|
||||
if (browser === "safari") { |
||||
backgroundConfig.plugins.push( |
||||
new CopyWebpackPlugin({ |
||||
patterns: [ |
||||
{ from: "./src/safari/mv3/fake-background.html", to: "background.html" }, |
||||
{ from: "./src/safari/mv3/fake-vendor.js", to: "vendor.js" }, |
||||
], |
||||
}), |
||||
); |
||||
} |
||||
|
||||
configs.push(mainConfig); |
||||
configs.push(backgroundConfig); |
||||
} |
||||
|
||||
module.exports = configs; |
||||
}, |
||||
tsConfig: "tsconfig.json", |
||||
}); |
||||
|
||||
@ -0,0 +1,22 @@
@@ -0,0 +1,22 @@
|
||||
const { pathsToModuleNameMapper } = require("ts-jest"); |
||||
|
||||
const { compilerOptions } = require("../../tsconfig.base"); |
||||
|
||||
const sharedConfig = require("../../libs/shared/jest.config.angular"); |
||||
|
||||
/** @type {import('jest').Config} */ |
||||
module.exports = { |
||||
...sharedConfig, |
||||
setupFilesAfterEnv: ["../../apps/browser/test.setup.ts"], |
||||
moduleNameMapper: pathsToModuleNameMapper( |
||||
{ |
||||
"@bitwarden/common/spec": ["libs/common/spec"], |
||||
"@bitwarden/common": ["libs/common/src/*"], |
||||
"@bitwarden/admin-console/common": ["libs/admin-console/src/common"], |
||||
...(compilerOptions?.paths ?? {}), |
||||
}, |
||||
{ |
||||
prefix: "<rootDir>/../../", |
||||
}, |
||||
), |
||||
}; |
||||
@ -0,0 +1,9 @@
@@ -0,0 +1,9 @@
|
||||
import OssMainBackground from "@bitwarden/browser/background/main.background"; |
||||
|
||||
export default class MainBackground { |
||||
private ossMain = new OssMainBackground(); |
||||
|
||||
async bootstrap() { |
||||
await this.ossMain.bootstrap(); |
||||
} |
||||
} |
||||
@ -0,0 +1,7 @@
@@ -0,0 +1,7 @@
|
||||
import { ConsoleLogService } from "@bitwarden/common/platform/services/console-log.service"; |
||||
|
||||
import MainBackground from "../background/main.background"; |
||||
|
||||
const logService = new ConsoleLogService(false); |
||||
const bitwardenMain = ((self as any).bitwardenMain = new MainBackground()); |
||||
bitwardenMain.bootstrap().catch((error) => logService.error(error)); |
||||
@ -0,0 +1,10 @@
@@ -0,0 +1,10 @@
|
||||
import { NgModule } from "@angular/core"; |
||||
import { RouterModule, Routes } from "@angular/router"; |
||||
|
||||
const routes: Routes = []; |
||||
|
||||
@NgModule({ |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule], |
||||
}) |
||||
export class AppRoutingModule {} |
||||
@ -0,0 +1,14 @@
@@ -0,0 +1,14 @@
|
||||
import { Component, OnInit } from "@angular/core"; |
||||
|
||||
import { AppComponent as BaseAppComponent } from "@bitwarden/browser/popup/app.component"; |
||||
|
||||
@Component({ |
||||
selector: "app-root", |
||||
templateUrl: "../../../../apps/browser/src/popup/app.component.html", |
||||
standalone: false, |
||||
}) |
||||
export class AppComponent extends BaseAppComponent implements OnInit { |
||||
ngOnInit() { |
||||
return super.ngOnInit(); |
||||
} |
||||
} |
||||
@ -0,0 +1,39 @@
@@ -0,0 +1,39 @@
|
||||
import { OverlayModule } from "@angular/cdk/overlay"; |
||||
import { CommonModule } from "@angular/common"; |
||||
import { NgModule } from "@angular/core"; |
||||
import { RouterModule } from "@angular/router"; |
||||
|
||||
import { JslibModule } from "@bitwarden/angular/jslib.module"; |
||||
// import { AppRoutingAnimationsModule } from "@bitwarden/browser/popup/app-routing-animations";
|
||||
import { AppRoutingModule as OssRoutingModule } from "@bitwarden/browser/popup/app-routing.module"; |
||||
import { AppModule as OssModule } from "@bitwarden/browser/popup/app.module"; |
||||
// import { WildcardRoutingModule } from "@bitwarden/browser/popup/wildcard-routing.module";
|
||||
|
||||
import { AppRoutingModule } from "./app-routing.module"; |
||||
import { AppComponent } from "./app.component"; |
||||
/** |
||||
* This is the AppModule for the commercial version of Bitwarden. |
||||
* `apps/browser/app.module.ts` contains the OSS version. |
||||
* |
||||
* You probably do not want to modify this file. Consider editing `oss.module.ts` instead. |
||||
*/ |
||||
@NgModule({ |
||||
imports: [ |
||||
CommonModule, |
||||
OverlayModule, |
||||
OssModule, |
||||
JslibModule, |
||||
// BrowserAnimationsModule,
|
||||
// FormsModule,
|
||||
// ReactiveFormsModule,
|
||||
// CoreModule,
|
||||
// DragDropModule,
|
||||
AppRoutingModule, |
||||
OssRoutingModule, |
||||
RouterModule, |
||||
// WildcardRoutingModule, // Needs to be last to catch all non-existing routes
|
||||
], |
||||
declarations: [AppComponent], |
||||
bootstrap: [AppComponent], |
||||
}) |
||||
export class AppModule {} |
||||
@ -0,0 +1,26 @@
@@ -0,0 +1,26 @@
|
||||
import { enableProdMode } from "@angular/core"; |
||||
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; |
||||
|
||||
import { PopupSizeService } from "@bitwarden/browser/platform/popup/layout/popup-size.service"; |
||||
import { BrowserPlatformUtilsService } from "@bitwarden/browser/platform/services/platform-utils/browser-platform-utils.service"; |
||||
|
||||
import { AppModule } from "./app.module"; |
||||
|
||||
import "@bitwarden/browser/popup/scss"; |
||||
|
||||
// We put these first to minimize the delay in window changing.
|
||||
PopupSizeService.initBodyWidthFromLocalStorage(); |
||||
// Should be removed once we deprecate support for Safari 16.0 and older. See Jira ticket [PM-1861]
|
||||
if (BrowserPlatformUtilsService.shouldApplySafariHeightFix(window)) { |
||||
document.documentElement.classList.add("safari_height_fix"); |
||||
} |
||||
|
||||
if (process.env.ENV === "production") { |
||||
enableProdMode(); |
||||
} |
||||
|
||||
function init() { |
||||
void platformBrowserDynamic().bootstrapModule(AppModule); |
||||
} |
||||
|
||||
init(); |
||||
@ -0,0 +1,20 @@
@@ -0,0 +1,20 @@
|
||||
{ |
||||
"extends": "../../apps/browser/tsconfig", |
||||
"include": [ |
||||
"src", |
||||
|
||||
"../../apps/browser/src/**/*.d.ts", |
||||
|
||||
"../../apps/browser/src/autofill/content/*.ts", |
||||
"../../apps/browser/src/autofill/fido2/content/*.ts", |
||||
"../../apps/browser/src/autofill/notification/bar.ts", |
||||
"../../apps/browser/src/autofill/overlay/inline-menu/**/*.ts", |
||||
"../../apps/browser/src/platform/ipc/content/*.ts", |
||||
"../../apps/browser/src/platform/offscreen-document/offscreen-document.ts", |
||||
"../../apps/browser/src/popup/polyfills.ts", |
||||
"../../apps/browser/src/vault/content/*.ts", |
||||
|
||||
"../../libs/common/src/autofill/constants", |
||||
"../../libs/common/custom-matchers.d.ts" |
||||
] |
||||
} |
||||
@ -0,0 +1,8 @@
@@ -0,0 +1,8 @@
|
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"isolatedModules": true, |
||||
"emitDecoratorMetadata": false |
||||
}, |
||||
"files": ["../../apps/browser/test.setup.ts"] |
||||
} |
||||
@ -0,0 +1,13 @@
@@ -0,0 +1,13 @@
|
||||
const { buildConfig } = require("../../apps/browser/webpack.base"); |
||||
|
||||
module.exports = buildConfig({ |
||||
configName: "Commercial", |
||||
popup: { |
||||
entry: "../../bitwarden_license/bit-browser/src/popup/main.ts", |
||||
entryModule: "../../bitwarden_license/bit-browser/src/popup/app.module#AppModule", |
||||
}, |
||||
background: { |
||||
entry: "../../bitwarden_license/bit-browser/src/platform/background.ts", |
||||
}, |
||||
tsConfig: "../../bitwarden_license/bit-browser/tsconfig.json", |
||||
}); |
||||
Loading…
Reference in new issue