add eslinter, remove prettier, restructure a bit

Author: fxnoob

.eslintignore

@@ -0,0 +1,3 @@
+src/services/chrome.js
+src/services/db.js
+src/services/schema.js

.eslintrc

@@ -0,0 +1,41 @@
+{
+  "plugins": [
+    "react"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "env": {
+    "es6":     true,
+    "browser": true,
+    "node":    true,
+    "mocha":   true
+  },
+  "globals": {
+    "chrome": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "rules": {
+    "semi": [2, "always"],
+    "indent": ["error", 2],
+    "object-curly-spacing": ["error", "always"],
+    "no-extra-parens": "error",
+    "max-len": ["error", { "code": 100 }],
+    "no-multi-spaces": "error",
+    "no-prototype-builtins": 0,
+    "no-console": ["error"]
+  },
+  "settings": {
+    "react": {
+      "version": "16.3"
+    }
+  }
+}

package.json

@@ -14,11 +14,12 @@
     "prettier_check_popup": "prettier --check src/**/*.{js,jsx}",
     "prettier_check_option": "prettier --check src/**/*.{js,jsx}",
     "prettier_check_content": "prettier --check src/**/*.{js,jsx}",
-    "test": "yarn prettier_check_src && yarn prettier_check_popup && yarn prettier_check_option && yarn prettier_check_content && yarn build"
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "pretty-quick --staged"
+      "pre-commit": "npm run build"
     }
   },
   "keywords": [],
@@ -34,6 +35,7 @@
     "@babel/preset-react": "^7.0.0",
     "babel-loader": "^8.0.6",
     "copy-webpack-plugin": "^5.0.4",
+    "css-loader": "^4.3.0",
     "dotenv": "^8.2.0",
     "file-loader": "^4.2.0",
     "gh-pages": "^2.1.1",
@@ -43,8 +45,14 @@
     "prettier": "1.18.2",
     "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",
+    "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": {
@@ -53,6 +61,7 @@
     "@material-ui/core": "^4.3.3",
     "@material-ui/icons": "^4.2.1",
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "react-frame-component": "^4.1.3"
   }
 }

sandbox.config.json

@@ -10,7 +10,7 @@
   "background": {
     "scripts": ["background.bundle.js"]
   },
-  "permissions": ["storage", "webNavigation", "*://*/*"],
+  "permissions": ["storage", "tabs", "*://*/*"],
   "browser_action": {
     "default_icon": {
       "19": "images/icon-19.png",

src/app/manifest.json

@@ -1,4 +1,5 @@
 import "@babel/polyfill";
+import chromeService from './services/chrome';
 
 let AppInitState = 0; // it means app is off on startup
 
@@ -8,10 +9,18 @@ let AppInitState = 0; // it means app is off on startup
  * @class Main
  */
 class Main {
-  constructor() {}
+  constructor() {
+    this.init();
+  }
+
+  init = () => {
+    this.popUpClickSetup();
+  }
+
   popUpClickSetup() {
-    chrome.browserAction.onClicked.addListener(tab => {
+    chrome.browserAction.onClicked.addListener(() => {
       if (this.toggleApp()) {
+        chromeService.openHelpPage('');
       } else {
         this.stopApp();
       }
@@ -39,3 +48,5 @@ class Main {
     AppInitState = 0;
   };
 }
+
+new Main();

src/background.js

@@ -5,6 +5,6 @@ export default class Index extends React.Component {
     super(props);
   }
   render() {
-    return <div></div>;
+    return <div>Demo</div>;
   }
 }

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

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import Index from "./components";
+import Index from "../components/Demo";
 
 const Element = document.createElement("div");
 Element.setAttribute("id", "dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf");

src/content-scripts/App.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import Index from "./components";
+import Index from "../components/Demo";
 
 const Element = document.createElement("div");
 Element.setAttribute("id", "dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf");