fix: update for manifest v3

Author: fxnoob

constants.js

@@ -9,8 +9,17 @@ const constants = {
       edge:
           "EDGE_STORE_URL",
     },
+
     // put extension key here if required which would only be used in development mode
-    key: "SSH_PUBLIC_KEY", // gather it from extension store
+    key: "-----BEGIN PUBLIC KEY-----\n" +
+        "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAp2M7a3NkVXE+hEmPzpfy\n" +
+        "L5xQKCPiGotVzC1Ep8XSfimPS5hXw0MBnkP2pxJKwHXeFQDthz6bx837aTwenw2L\n" +
+        "kmaSwzJK5cUBcAzvbx4H1WOyXaZO1G4/iIDP0A0L1KXu/gCIyYpPXXwLtbqXp78s\n" +
+        "6EpEqJOepSDdkoOKg/ejZq+/gpbVfY4k9CMprX2Jylq+orXrViH3jdVic3QXZDdp\n" +
+        "mNRTjmUmJii1DTCxYh9207YSVe3bfY1TGQjKx2GcUAGiJBhNwcgFqkdVdkArGuJs\n" +
+        "zuPO5HthTF3u6AouhuLnIWOSHiXZg8KL/g5Jv2t9XuJuth2mzcrXlFVYtCd3k5+q\n" +
+        "mQIDAQAB\n" +
+        "-----END PUBLIC KEY-----", // gather it from extension store
   },
   contentScript: {
     mountId: generateGuid(),
@@ -35,4 +44,3 @@ const constants = {
 };
 
 module.exports = constants;
-

package.json

@@ -1,18 +1,19 @@
 {
   "name": "browser-extension-boilerplate",
-  "version": "0.0.1",
+  "version": "0.0.0",
   "description": "",
   "homepage": "https://fxnoob.github.io/chrome-extension-boilerplate",
   "scripts": {
-    "build:tailwind": "tailwindcss build src/styles/style.css -o dist/style.css",
+    "build:tailwind": "tailwindcss build -i src/styles/style.css -o dist/style.css",
     "watch:tailwind": "chokidar 'src/styles/*.css' -c 'yarn build:tailwind'",
     "prestart": "yarn build:tailwind",
     "prebuild": "yarn rm && yarn build:tailwind",
     "rm": "rm -rf dist/",
-    "rm:zip": "rm dist.zip",
-    "dev:chromium": "yarn build:tailwind && webpack --stats-children --progress --config chromium.webpack.js --mode=development",
+    "rm:extZip": "rm ext.zip",
+    "dev:chromium": "concurrently --kill-others \"npm run watch:tailwind\" \"npm run webpack:chromium:dev\"",
+    "webpack:chromium:dev": "webpack --watch --progress --config chromium.webpack.js --mode=development",
     "dev:firefox": "yarn build:tailwind && webpack --watch --progress --config firefox.webpack.js --mode=development",
-    "build:chromium": "yarn build:tailwind && webpack --progress --config chromium.webpack.js --mode=production",
+    "build:chromium": "webpack --progress --config chromium.webpack.js --mode=production && yarn build:tailwind",
     "build:firefox": "yarn build:tailwind && webpack --progress --config firefox.webpack.js --mode=production",
     "jsdoc": "jsdoc src -r",
     "deploy_jsdoc": "yarn jsdoc &&  gh-pages -d out",
@@ -42,15 +43,17 @@
     "@babel/runtime": "7.20.0",
     "arg": "5.0.2",
     "babel-eslint": "10.1.0",
-    "babel-loader": "8.2.5",
+    "babel-loader": "^8.2.2",
+    "babel-minify": "^0.5.1",
     "brotli-webpack-plugin": "1.1.0",
     "chai": "4.3.6",
     "chalk": "4.1.2",
     "chokidar": "^3.5.3",
     "chokidar-cli": "2.1.0",
-    "concurrently": "5.3.0",
-    "copy-webpack-plugin": "5.1.2",
-    "css-loader": "6.7.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "concurrently": "^8.2.0",
+    "copy-webpack-plugin": "^9.0.1",
+    "css-loader": "^6.2.0",
     "dotenv": "8.6.0",
     "esbuild-loader": "2.20.0",
     "eslint": "7.32.0",
@@ -60,24 +63,33 @@
     "esm": "3.2.25",
     "exec-sh": "0.3.6",
     "execa": "6.1.0",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "html-loader": "^2.1.2",
+    "html-webpack-plugin": "^5.3.2",
     "husky": "3.1.0",
     "inquirer": "7.3.3",
     "jsdoc": "3.6.11",
     "jsonfile": "6.1.0",
     "node-google-translate-skidz": "1.1.2",
     "prettier": "1.18.2",
     "pretty-quick": "2.0.2",
-    "style-loader": "3.3.1",
+    "sass": "^1.37.5",
+    "sass-loader": "^12.1.0",
+    "source-map-loader": "^3.0.0",
+    "style-loader": "^3.2.1",
     "tailwindcss": "^3.2.4",
-    "webpack": "5.74.0",
-    "webpack-cli": "4.10.0"
+    "webpack": "^5.48.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.10.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-frame-component": "^5.2.3"
+    "react-frame-component": "^5.2.3",
+    "source-map-loader": "^4.0.1"
   }
 }

src/option-page/App.js

@@ -1,3 +1,3 @@
 export default function App() {
   return <div>Options</div>;
-}
+}

src/option-page/index.js

@@ -1,4 +1,4 @@
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
 import App from "./App";
 const root = ReactDOM.createRoot(document.getElementById('app'));
 root.render(<App />);

webpack.config.js

@@ -1,8 +1,11 @@
 const webpack = require("webpack");
-const { ESBuildPlugin, ESBuildMinifyPlugin } = require("esbuild-loader");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const dotenv = require("dotenv").config({ path: __dirname + "/.env" });
-const { manifestTransform } = require("./scripts/transform");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require("path");
+const { manifestTransform } = require('./scripts/transform');
+
+const buildDirectory = 'dist';
 
 module.exports = (env, options) => {
   return {
@@ -12,19 +15,39 @@ module.exports = (env, options) => {
       popup: "./src/popup-page/index.js",
       option: "./src/option-page/index.js"
     },
+    devtool: 'cheap-module-source-map',
     module: {
       rules: [
         {
           test: /\.(js|jsx)$/,
-          exclude: /node_modules/,
           use: [
-            'babel-loader',
-            "eslint-loader"
-          ]
+            {
+              loader: 'source-map-loader',
+            },
+            {
+              loader: 'babel-loader',
+            },
+          ],
+          exclude: /node_modules/,
         },
         {
-          test: /\.css$/,
-          use: ["style-loader", "css-loader?modules"]
+        // look for .css or .scss files
+          test: /\.(css|scss)$/,
+          // in the `src` directory
+          use: [
+            {
+              loader: 'style-loader',
+            },
+            {
+              loader: 'css-loader',
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true,
+              },
+            },
+          ],
         },
         {
           test: /\.(gif|png|jpe?g|svg)$/i,
@@ -36,39 +59,49 @@ module.exports = (env, options) => {
       extensions: ['.mjs', '*', '.js', '.jsx', '.css', '.json'],
     },
     output: {
-      path: __dirname + "/dist",
+      path: __dirname + "/" + buildDirectory,
       publicPath: "/",
       filename: "[name].bundle.js"
     },
-    optimization: {
-      minimize: true,
-      minimizer: [new ESBuildMinifyPlugin()]
-    },
     plugins: [
-      new ESBuildPlugin(),
-      new CopyWebpackPlugin(
-        [
-          { from: "./src/popup-page/popup.html", force: true },
-          { from: "./src/option-page/option.html", force: true },
-          { from: "./src/app/", force: true }
-        ],
-        {}
-      ),
+      new webpack.ProgressPlugin(),
       new webpack.DefinePlugin({
         "process.env": JSON.stringify({ ...options, ...dotenv.parsed })
       }),
-      new CopyWebpackPlugin([
-        {
-          from: "./src/app/manifest.json",
-          force: true,
-          transform(content, path) {
-            return manifestTransform(content, path, options);
-          }
-        }
-      ])
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: './src/app',
+            to: path.join(__dirname, buildDirectory),
+            force: true,
+          },
+          {
+            from: './src/app/manifest.json',
+            to: __dirname + '/' + buildDirectory,
+            force: true,
+            // eslint-disable-next-line no-unused-vars
+            transform: function (content, path) {
+            // generates the manifest file using the package.json information
+              return manifestTransform(content, path, options);
+            },
+          },
+        ],
+      }),
+      new HtmlWebpackPlugin({
+        template: './src/option-page/option.html',
+        filename: 'option.html',
+        chunks: ['options'],
+        cache: false,
+      }),
+      new HtmlWebpackPlugin({
+        template: './src/popup-page/popup.html',
+        filename: 'popup.html',
+        chunks: ['popup'],
+        cache: false,
+      })
     ],
     devServer: {
-      contentBase: "./dist",
+      contentBase: "./" + buildDirectory,
       hot: true
     },
   };