refactor: migrate to webpack-ext-reloader

.nvmrc

@@ -0,0 +1 @@
+v18.18.0

README.md

@@ -78,30 +78,29 @@ curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/reac
 Ensure you have
 
 - [Node.js](https://nodejs.org) 10 or later installed
-- [Yarn](https://yarnpkg.com) v1 or v2 installed
 
 Then run the following:
 
-- `yarn install` to install dependencies.
-- `yarn run dev:chrome` to start the development server for chrome extension
-- `yarn run dev:firefox` to start the development server for firefox addon
-- `yarn run dev:opera` to start the development server for opera extension
-- `yarn run build:chrome` to build chrome extension
-- `yarn run build:firefox` to build firefox addon
-- `yarn run build:opera` to build opera extension
-- `yarn run build` builds and packs extensions all at once to extension/ directory
+- `npm install` to install dependencies.
+- `npm run dev:chrome` to start the development server for chrome extension
+- `npm run dev:firefox` to start the development server for firefox addon
+- `npm run dev:opera` to start the development server for opera extension
+- `npm run build:chrome` to build chrome extension
+- `npm run build:firefox` to build firefox addon
+- `npm run build:opera` to build opera extension
+- `npm run build` builds and packs extensions all at once to extension/ directory
 
 ### Development
 
-- `yarn install` to install dependencies.
+- `npm install` to install dependencies.
 - To watch file changes in development
 
   - Chrome
-    - `yarn run dev:chrome`
+    - `npm run dev:chrome`
   - Firefox
-    - `yarn run dev:firefox`
+    - `npm run dev:firefox`
   - Opera
-    - `yarn run dev:opera`
+    - `npm run dev:opera`
 
 - **Load extension in browser**
 
@@ -124,7 +123,7 @@ Then run the following:
 
 ### Production
 
-- `yarn run build` builds the extension for all the browsers to `extension/BROWSER` directory respectively.
+- `npm run build` builds the extension for all the browsers to `extension/BROWSER` directory respectively.
 
 Note: By default the `manifest.json` is set with version `0.0.0`. The webpack loader will update the version in the build with that of the `package.json` version. In order to release a new version, update version in `package.json` and run script.
 

package.json

@@ -26,63 +26,62 @@
     "lint:fix": "eslint . --ext .ts,.tsx --fix"
   },
   "dependencies": {
-    "@babel/runtime": "^7.14.0",
+    "@babel/runtime": "^7.23.9",
     "advanced-css-reset": "^1.2.2",
-    "emoji-log": "^1.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "webext-base-css": "^1.3.1",
-    "webextension-polyfill-ts": "^0.25.0"
+    "webext-base-css": "^1.4.4",
+    "webextension-polyfill-ts": "^0.26.0"
   },
   "devDependencies": {
-    "@abhijithvijayan/eslint-config": "2.6.3",
-    "@abhijithvijayan/eslint-config-airbnb": "^1.0.2",
+    "@abhijithvijayan/eslint-config": "^2.8.1",
+    "@abhijithvijayan/eslint-config-airbnb": "^1.1.0",
     "@abhijithvijayan/tsconfig": "^1.3.0",
-    "@babel/core": "^7.14.3",
-    "@babel/eslint-parser": "^7.12.16",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.2",
-    "@babel/plugin-transform-destructuring": "^7.13.17",
-    "@babel/plugin-transform-runtime": "^7.14.3",
-    "@babel/preset-env": "^7.14.2",
-    "@babel/preset-react": "^7.13.13",
-    "@babel/preset-typescript": "^7.13.0",
-    "@types/react": "^17.0.6",
-    "@types/react-dom": "^17.0.5",
-    "@types/webpack": "^4.41.29",
-    "@typescript-eslint/eslint-plugin": "^4.4.1",
-    "@typescript-eslint/parser": "^4.4.1",
-    "autoprefixer": "^10.2.5",
-    "babel-loader": "^8.2.2",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.4.1",
+    "@babel/core": "^7.23.9",
+    "@babel/eslint-parser": "^7.23.9",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
+    "@babel/plugin-transform-destructuring": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@types/react": "^17.0.75",
+    "@types/react-dom": "^17.0.25",
+    "@types/webpack": "^5.28.5",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
+    "autoprefixer": "^10.4.17",
+    "babel-loader": "^9.1.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.5",
-    "eslint": "^7.27.0",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-import": "^2.23.3",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "css-loader": "^6.10.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "filemanager-webpack-plugin": "^3.1.1",
-    "fork-ts-checker-webpack-plugin": "^6.2.10",
-    "html-webpack-plugin": "^4.5.2",
-    "mini-css-extract-plugin": "^1.6.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.6",
-    "postcss": "^8.3.0",
-    "postcss-loader": "^4.3.0",
-    "prettier": "^2.3.0",
-    "resolve-url-loader": "^3.1.3",
-    "sass": "^1.53.0",
-    "sass-loader": "^10.2.0",
-    "terser-webpack-plugin": "^4.2.3",
-    "typescript": "4.1.5",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^4.7.0",
-    "webpack-extension-reloader": "^1.1.4",
-    "wext-manifest-loader": "^2.3.0",
-    "wext-manifest-webpack-plugin": "^1.2.1"
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "filemanager-webpack-plugin": "^8.0.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "html-webpack-plugin": "^5.6.0",
+    "mini-css-extract-plugin": "^2.7.7",
+    "optimize-css-assets-webpack-plugin": "^6.0.1",
+    "postcss": "^8.4.33",
+    "postcss-loader": "^8.1.0",
+    "prettier": "^3.2.4",
+    "resolve-url-loader": "^5.0.0",
+    "sass": "^1.70.0",
+    "sass-loader": "^14.1.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "typescript": "4.9.5",
+    "webpack": "^5.90.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-ext-reloader": "^1.1.12",
+    "wext-manifest-loader": "^2.4.1",
+    "wext-manifest-webpack-plugin": "^1.4.0"
   }
 }

source/Background/index.ts

@@ -1,6 +1,5 @@
-import 'emoji-log';
 import {browser} from 'webextension-polyfill-ts';
 
 browser.runtime.onInstalled.addListener((): void => {
-  console.emoji('🦄', 'extension installed');
+  console.log('🦄', 'extension installed');
 });

webpack.config.js

@@ -5,7 +5,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const {CleanWebpackPlugin} = require('clean-webpack-plugin');
-const ExtensionReloader = require('webpack-extension-reloader');
+const ExtensionReloader = require('webpack-ext-reloader');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
@@ -20,8 +20,8 @@ const targetBrowser = process.env.TARGET_BROWSER;
 const extensionReloaderPlugin =
   nodeEnv === 'development'
     ? new ExtensionReloader({
-        port: 9090,
-        reloadPage: true,
+        port: 9090, // Which port use to create the server
+        reloadPage: true, // Force the reload of the page also
         entries: {
           // TODO: reload manifest on update
           contentScript: 'contentScript',