upgrade to react 18

Author: fxnoob

.babelrc

@@ -1,12 +1,30 @@
 {
   "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react"
+    [ "@babel/preset-env", {
+      "modules": "auto",
+      "targets": {
+        "browsers": [
+          "last 2 Chrome versions",
+          "last 2 Firefox versions",
+          "last 2 Safari versions",
+          "last 2 iOS versions",
+          "last 1 Android version",
+          "last 1 ChromeAndroid version",
+          "ie 11"
+        ]
+      }
+    } ],
+    ["@babel/preset-react", {
+      "runtime": "automatic"
+    }]
   ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties" ,
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-runtime",
     "@babel/plugin-syntax-class-properties",
     "@babel/plugin-syntax-dynamic-import",
-    "@babel/plugin-transform-runtime"
+    ["@babel/plugin-transform-react-jsx", {
+      "runtime": "automatic"
+    }]
   ]
-}
+}

.eslintrc

@@ -24,6 +24,8 @@
     "plugin:react/recommended"
   ],
   "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
     "semi": [2, "always"],
     "indent": ["error", 2],
     "object-curly-spacing": ["error", "always"],

README.md

@@ -1,9 +1,9 @@
-# A Browser(Chrome/Edge/Firefox/Brave) extension boilerplate.
+# A Browser(Chrome/Edge/Opera/Firefox/Brave) extension boilerplate.
 
 ## Prerequisites
 
-- yarn v1.17.3
-- node v12.3.1
+- yarn 1.22.10
+- node v16.1.0
 
 ## Pre-configurations
 
@@ -76,6 +76,7 @@ yarn build:firefox
 > 8. Some (useful) services e.g. DbService, messagePassing, chromeService and helper functions(helpers).
 > 9. Some (useful) react components e.g. FrameMUI.js (To mount react mui component in iframe in content script).
 > 10. Locale translation using unofficial google translate API (Free version).
+> 11. Comes with React 18(alpha release). you can downgrade it to 17.* but not lower than that. 
 
 ## directory structure
 

constants.js

@@ -10,9 +10,7 @@ const constants = {
           "EDGE_STORE_URL",
     },
     // put extension key here if required which would only be used in development mode
-    key:
-    // eslint-disable-next-line max-len
-        "-----BEGIN PUBLIC KEY-----\nMssIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAhnjCHD79hDbWfqjnP9SW\nN0AXmXHh5eVk2D0oMILadmj/2uRQm/jNpnlvjVHY+899gdYRH/k7v4f+qF6gV3Yh\nwb/2PnW9PEo2VksgiixSesccvcwRXEJSngtxNWOARYSOTqTCCum9rjFVPZL+voh7\ndUsTN45D+RBLQORYbu5NtSM6RcGhUbYvhAosKwo+lsOAjM5niQDLJi//dZ9R32tc\n6tht4XrP59CTWBo8JCpIcHT6edN2HQ2vRiO5CHVb2jfT1hrO82WZ9LWsErzo/gCr\nXyIvnnXjg1wif7++WTi5mQl05Ohv3vKazNLeFpl/2XxvJ1xw4Pfh7m2qMaBJd7ll\n3QIDAQAB\n-----END PUBLIC KEY-----",
+    key: "SSH_PUBLIC_KEY", // gather it from extension store
   },
   contentScript: {
     mountId: generateGuid(),

package.json

@@ -1,8 +1,7 @@
 {
-  "name": "chrome-extension-boilerplate",
+  "name": "browser-extension-boilerplate",
   "version": "0.0.1",
   "description": "",
-  "main": "index.js",
   "homepage": "https://fxnoob.github.io/chrome-extension-boilerplate",
   "scripts": {
     "build:tailwind": "tailwindcss build src/styles/style.css -o dist/style.css",
@@ -11,10 +10,10 @@
     "prebuild": "yarn rm && yarn build:tailwind",
     "rm": "rm -rf dist/",
     "rm:zip": "rm dist.zip",
-    "dev:chromium": "yarn build:tailwind && webpack --watch --progress --colors --config chromium.webpack.js --mode=development",
-    "dev:firefox": "yarn build:tailwind && webpack --watch --progress --colors --config firefox.webpack.js --mode=development",
-    "build:chromium": "yarn build:tailwind && webpack --progress --colors --config chromium.webpack.js --mode=production",
-    "build:firefox": "yarn build:tailwind && webpack --progress --colors --config firefox.webpack.js --mode=production",
+    "dev:chromium": "yarn build:tailwind && webpack --stats-children --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:firefox": "yarn build:tailwind && webpack --progress --config firefox.webpack.js --mode=production",
     "jsdoc": "jsdoc src -r",
     "deploy_jsdoc": "yarn jsdoc &&  gh-pages -d out",
     "zip": "zip -r dist.zip dist/*",
@@ -31,52 +30,61 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.5.5",
+    "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.5.5",
     "@babel/plugin-syntax-class-properties": "^7.2.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-react-jsx": "^7.14.3",
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-react": "^7.9.0",
+    "@tailwindcss/ui": "^0.5.0",
+    "arg": "^5.0.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
+    "chalk": "^4.1.1",
     "chokidar": "^3.5.1",
     "chokidar-cli": "^2.1.0",
     "concurrently": "^5.3.0",
     "copy-webpack-plugin": "^5.0.4",
     "css-loader": "^4.3.0",
     "dotenv": "^8.2.0",
     "esbuild-loader": "^2.4.0",
-    "eslint": "^7.6.0",
+    "eslint": "^7.27.0",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-react": "^7.20.5",
     "eslint-watch": "^7.0.0",
+    "esm": "^3.2.25",
     "file-loader": "^4.2.0",
     "gh-pages": "^2.1.1",
     "husky": "^3.0.9",
     "image-webpack-loader": "^5.0.0",
+    "inquirer": "^8.1.0",
     "jsdoc": "^3.6.3",
+    "node-google-translate-skidz": "^1.1.2",
     "prettier": "^2.2.1",
     "pretty-quick": "^2.0.0",
     "react-hot-loader": "^4.12.10",
     "style-loader": "^1.2.1",
-    "webpack": "^4.39.1",
-    "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "^3.7.2",
-    "node-google-translate-skidz": "^1.1.2",
-    "zx": "^1.0.2",
     "tailwindcss": "^1.8.3",
-    "@tailwindcss/ui": "^0.5.0"
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.7.2",
+    "worker-loader": "^3.0.8",
+    "zx": "^1.0.2"
   },
   "dependencies": {
     "@babel/polyfill": "^7.4.4",
     "@babel/runtime": "^7.5.5",
+    "@emotion/css": "^11.1.3",
     "@material-ui/core": "^4.3.3",
     "@material-ui/icons": "^4.2.1",
+    "comlink": "^4.3.1",
     "jss": "^10.6.0",
     "jss-rtl": "^0.3.0",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^18.0.0-alpha-e6be2d531",
+    "react-content-loader": "^6.0.3",
+    "react-dom": "^18.0.0-alpha-e6be2d531",
     "react-frame-component": "5.0.0"
   }
 }

scripts/transform.js

@@ -7,12 +7,14 @@ const manifestTransform = (content, path, options) => {
     // copy-webpack-plugin passes a buffer
     const manifest = JSON.parse(buffer.toString());
     // make any modifications you like, such as
-    if (mode == "development") {
+    if (mode === "development") {
+      manifest["content_security_policy"] = "script-src 'self' 'unsafe-eval'; object-src 'self'";
       manifest.key = constants.appConfig.key;
     }
     manifest.version = pkg.version;
+    manifest.browser_action.default_title = constants.appConfig.appName;
     // if browser is firefox then put gecko id and other specific stuff
-    if (browser == "firefox") {
+    if (browser === "firefox") {
       Object.keys(constants.browser.firefox.manifest).map((key) => {
         manifest[key] = constants.browser.firefox.manifest[key];
       });

src/app/manifest.json

@@ -31,6 +31,5 @@
       "run_at": "document_end"
     }
   ],
-  "manifest_version": 2,
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
+  "manifest_version": 2
 }

src/components/Demo.js

@@ -1,10 +1,5 @@
-import React from "react";
-
-export default class Index extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-  render() {
-    return <div>Demo</div>;
-  }
-}
+export default function Demo() {
+  return (
+    <div>Demo</div>
+  );
+}

src/components/FrameMUI.js

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React from "react";
+import { useState, useRef, useCallback } from "react";
 import { create } from "jss";
 import { useTheme, jssPreset, StylesProvider } from "@material-ui/core/styles";
 import NoSsr from "@material-ui/core/NoSsr";
@@ -8,11 +8,11 @@ import IFrame from "react-frame-component";
 function FrameComponent(props) {
   const { children, ...other } = props;
   const theme = useTheme();
-  const [state, setState] = React.useState({
+  const [state, setState] = useState({
     ready: false
   });
-  const instanceRef = React.useRef();
-  const handleRef = React.useCallback(ref => {
+  const instanceRef = useRef();
+  const handleRef = useCallback(ref => {
     instanceRef.current = {
       contentDocument: ref ? ref.node.contentDocument : null,
       contentWindow: ref ? ref.node.contentWindow : null

src/content-scripts/App.js

@@ -1,4 +1,3 @@
-import React from "react";
 import Demo from "../components/Demo";
 function App() {
   return <Demo/>;

src/content-scripts/index.jsx renamed to src/content-scripts/index.js

@@ -1,9 +1,9 @@
-import React from "react";
 import ReactDOM from "react-dom";
 import App from "./App";
-import constants from "../../constants";
-const mountId = constants.contentScript.mountId;
+import Constants from "../../constants";
+const mountId = Constants.contentScript.mountId;
 const Element = document.createElement("div");
 Element.setAttribute("id", mountId);
 document.body.appendChild(Element);
-ReactDOM.render(<App />, document.getElementById(mountId));
+const root = ReactDOM.createRoot(document.getElementById(mountId));
+root.render(<App />);

src/option-page/App.js

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

src/option-page/App.jsx

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

src/option-page/index.js

@@ -1,11 +1,3 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import Index from "../components/Demo";
-
-const Element = document.createElement("div");
-Element.setAttribute("id", "dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf");
-document.body.appendChild(Element);
-ReactDOM.render(
-  <Index />,
-  document.getElementById("dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf")
-);
+export default function App() {
+  return <div>App</div>;
+}

src/popup-page/App.jsx

@@ -0,0 +1,9 @@
+// eslint-disable-next-line no-unused-vars
+import ReactDOM from "react-dom";
+import App from "./App";
+
+const Element = document.createElement("div");
+Element.setAttribute("id", "dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf");
+document.body.appendChild(Element);
+const root = ReactDOM.createRoot(document.getElementById("dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf"));
+root.render(<App />);

src/popup-page/index.js

@@ -42,17 +42,6 @@ class ChromeApi {
     chrome.tabs.sendMessage(tab.id, payload, callback);
     return true;
   };
-  takeScreenShot = () => {
-    return new Promise((resolve, reject) => {
-      try {
-        chrome.tabs.captureVisibleTab((screenshotUrl) => {
-          resolve(screenshotUrl);
-        });
-      } catch (e) {
-        reject(e);
-      }
-    });
-  };
   /**
    *Set Badge on extension icon
    * @method

src/services/chromeService.js

@@ -1,4 +1,4 @@
-
+import schema from "./schema";
 /**
  * Chrome storage abstraction class
  *
@@ -39,7 +39,7 @@ class DbService {
           if (items === undefined) {
             reject(new Error("Error"));
           } else {
-            resolve(items);
+            resolve({ ...schema.data, ...items });
           }
         });
       } catch (e) {
@@ -88,6 +88,20 @@ class DbService {
       }
     });
   }
+  /**
+   * callback for value change in db for any key
+   * @memberof Db
+   */
+  onChange = (keyToCheck, callback) => {
+    // eslint-disable-next-line no-unused-vars
+    chrome.storage.onChanged.addListener((changes, namespace) => {
+      for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
+        if (keyToCheck == key) {
+          callback(oldValue, newValue);
+        }
+      }
+    });
+  }
 }
 const db = new DbService();
 export default db;