add messagePassing class

Author: fxnoob

constants.js

@@ -1,7 +1,16 @@
 const constants = {
   appConfig: {
     appName: "extension name",
-    key: "" // put extension key here if required which would only be used development mode
+    key:
+      "-----BEGIN PUBLIC KEY-----\n" +
+      "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA3VymTQvpTgWpVbYeveQV\n" +
+      "I2ZuyKZtHtzDqIWu4Og/ZjOEbu6eXPzvX57BmMv0sX79Y0EDRHkbQAgtWjgilCTE\n" +
+      "uWqxCOLpLpkYs9Dz/iXymqbIaM6IbLZEp513uKMSTknU9V5eWFuNeOU8Ps/6rr35\n" +
+      "chBpbVxeWawy5jLak03n5jFRCnOtkzoU9gkbbTQRykV2dfp+KP0UYn7Vox/17fCH\n" +
+      "CHPG5oA/DvH60iokIhoUXe+5SCIFcdsJE/a7gvH7YGbDkC6+ENpmUK0dEIEJSHAh\n" +
+      "vyLwCl4pmiIC/crpbLxlV5SPfAN+P3tiAUlS0M5U2f0Nf6AFayvazJslHKTarU3K\n" +
+      "qQIDAQAB\n" +
+      "-----END PUBLIC KEY-----\n"
   }
 };
 

package.json

@@ -5,21 +5,21 @@
   "main": "index.js",
   "homepage": "https://fxnoob.github.io/chrome-extension-boilerplate",
   "scripts": {
-    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
-    "dev": "webpack --watch --progress --colors --config webpack.config.js --mode=development",
-    "build": "webpack --progress --colors --config webpack.config.js --mode=production",
+    "build:css": "tailwindcss build src/styles/style.css -o dist/style.css",
+    "watch:css": "yarn build:css && chokidar 'src/styles/*.css' -c 'yarn build:css'",
+    "watch:js": "webpack --watch --config webpack.config.js --mode=development",
+    "build:js": "webpack  --config webpack.config.js --mode=production",
+    "rm": "rm -rf dist/",
+    "start": "yarn dev",
+    "dev": "concurrently --kill-others 'yarn watch:css' 'yarn watch:js'",
+    "build": "yarn rm && concurrently 'yarn build:css' 'yarn build:js'",
     "jsdoc": "jsdoc src -r",
     "deploy_jsdoc": "yarn jsdoc &&  gh-pages -d out",
-    "prettier_check_src": "prettier --check src/**/*.{js,jsx}",
-    "prettier_check_popup": "prettier --check src/**/*.{js,jsx}",
-    "prettier_check_option": "prettier --check src/**/*.{js,jsx}",
-    "prettier_check_content": "prettier --check src/**/*.{js,jsx}",
-    "lint": "eslint",
-    "lint:fix": "eslint --fix"
+    "test": "yarn build"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run build"
+      "pre-commit": "yarn build"
     }
   },
   "keywords": [],
@@ -33,10 +33,19 @@
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
+    "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-loader": "^4.0.2",
+    "eslint-plugin-react": "^7.20.5",
+    "eslint-watch": "^7.0.0",
     "file-loader": "^4.2.0",
     "gh-pages": "^2.1.1",
     "husky": "^3.0.9",
@@ -48,20 +57,17 @@
     "style-loader": "^1.2.1",
     "webpack": "^4.39.1",
     "webpack-cli": "^3.3.6",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^7.6.0",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-react": "^7.20.5",
-    "eslint-watch": "^7.0.0",
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
     "@babel/polyfill": "^7.4.4",
     "@babel/runtime": "^7.5.5",
     "@material-ui/core": "^4.3.3",
     "@material-ui/icons": "^4.2.1",
+    "@tailwindcss/ui": "^0.5.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-frame-component": "^4.1.3"
+    "react-frame-component": "^4.1.3",
+    "tailwindcss": "^1.8.3"
   }
 }

scripts/transform.js

@@ -1,4 +1,5 @@
 const constants = require("../constants");
+const pkg = require("../package.json");
 // options: webpack configs
 const manifestTransform = (content, path, options) => {
   const { mode } = options;
@@ -9,6 +10,7 @@ const manifestTransform = (content, path, options) => {
     if (mode == "development") {
       manifest.key = constants.appConfig.key;
     }
+    manifest.version = pkg.version;
     // pretty print to JSON with two spaces
     return JSON.stringify(manifest, null, 2);
   };

src/app/manifest.json

@@ -1,23 +1,35 @@
 {
-  "name": "chrome-extension-boilerplate",
-  "version": "0.0.1",
-  "manifest_version": 2,
-  "description": "description",
-  "icons": {
-    "16": "images/icon-16.png",
-    "128": "images/icon-128.png"
-  },
+  "name": "__MSG_appName__",
+  "description": "__MSG_appDescription__",
+  "version": "0.0.0",
+  "permissions": [
+    "storage",
+    "activeTab",
+    "<all_urls>"
+  ],
   "background": {
     "scripts": ["background.bundle.js"]
   },
-  "permissions": ["storage", "tabs", "*://*/*"],
   "browser_action": {
-    "default_icon": {
-      "19": "images/icon-19.png",
-      "38": "images/icon-38.png"
-    },
-    "default_title": "default title",
+    "default_title": "Chrome extension",
+    "default_icon": "images/icon-128.png",
     "default_popup": "popup.html"
   },
+  "icons": {
+    "16": "images/icon-16.png",
+    "19": "images/icon-19.png",
+    "38": "images/icon-38.png",
+    "128": "images/icon-128.png"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "match_about_blank": true,
+      "all_frames": true,
+      "js": ["content_script.bundle.js"],
+      "run_at": "document_end"
+    }
+  ],
+  "manifest_version": 2,
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
 }

src/background.js

@@ -1,5 +1,6 @@
 import "@babel/polyfill";
-import chromeService from './services/chrome';
+import chromeService, { message } from "./services/chromeService";
+import Routes from "./routes";
 
 let AppInitState = 0; // it means app is off on startup
 
@@ -13,14 +14,15 @@ class Main {
     this.init();
   }
 
-  init = () => {
+  init = async () => {
     this.popUpClickSetup();
-  }
+    await Routes(message);
+  };
 
   popUpClickSetup() {
     chrome.browserAction.onClicked.addListener(() => {
       if (this.toggleApp()) {
-        chromeService.openHelpPage('');
+        chromeService.openHelpPage("");
       } else {
         this.stopApp();
       }

src/content-scripts/App.jsx

@@ -1,7 +1,12 @@
+/* eslint-disable no-console */
 import React from "react";
 import ReactDOM from "react-dom";
 import Index from "../components/Demo";
+import { message } from "../services/chromeService";
 
+message.sendMessage("/echo", {}, response => {
+  console.log(" message from /echo", response);
+});
 const Element = document.createElement("div");
 Element.setAttribute("id", "dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf");
 document.body.appendChild(Element);

src/popup-page/popup.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <style></style>
+    <link rel="stylesheet" href="/style.css" />
   </head>
   <body>
     <div id="app"></div>

src/routes.js

@@ -0,0 +1,14 @@
+/* eslint-disable no-unused-vars */
+/**
+ *
+ * Message object is the Messaging Passing Class Object
+ * which contains methods suitable for message passing apis.
+ *
+ * */
+export default message => {
+  message.on("/echo", async (req, res, actions) => {
+    // eslint-disable-next-line no-console
+    console.log("message logged");
+    res({ response: "hello world" });
+  });
+};