Support hot reloading Chrome extension for development purposes (#566)

Author: mikedidomizio

.eslintignore

@@ -6,5 +6,6 @@ scripts
 webpack.config.js
 webpack.prod.js
 webpack.dev.js
+webpack.watch.js
 src/test
 src/models/credentials.ts

.eslintrc.js

@@ -2,7 +2,7 @@ module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
   parserOptions: {
-       "ecmaVersion": 6
+    "ecmaVersion": 6
   },
   plugins: [
     '@typescript-eslint',
@@ -14,10 +14,10 @@ module.exports = {
   ],
   env: {
     "amd": true,
-    "node": true  
+    "node": true,
   },
   rules: {
     "@typescript-eslint/no-use-before-define": "off",
-    "@typescript-eslint/explicit-function-return-type": "off"
+    "@typescript-eslint/explicit-function-return-type": "off",
   }
 };

README.md

@@ -15,4 +15,14 @@ npm install
 npm run [chrome, firefox]
 ```
 
+## Development (Chrome)
+
+``` bash
+# install development dependencies
+npm install 
+# compiles the Chrome extension to the `./test/chrome` directory
+npm run dev:chrome
+# load the unpacked extension from the `./test/chrome/ directory in Chrome
+```
+
 Note that Windows users should download a tool like [Git Bash](https://git-scm.com/download/win) or [Cygwin](http://cygwin.com/) to build.

manifests/manifest-chrome-testing.json

@@ -65,5 +65,5 @@
     ],
     "offline_enabled": true,
     "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAjo5++7m6mlJGqKOnlYehr9tjIqahMZBJUG7PLa7dSRk6bDUu2pVodO1TQWviHlrDTLP+zfoVbDBS8v8cjloK5Tn90nzC6a957dPzOfyC1WUNYNDlGM0BCmZKVP/MWB3d0ffOmTwaxh0L47aLH5nTW0AUmuwCWCBEEl4Acuyp7rwLNGlazBpaom1Qb5ckn29gCJVVVIZ6wudmcrG/FPTNJXQbg8N6wObGrgGOaxmowbkzJmIfKTyHlYOKLAjZ7aJi0W6jsy47/aV+ojvn4gO+ka6BcRhUeWgoQxqEky119f3OWiVP46SJVbAi0pkknThUjDvX11lATGjB5EvJZGyotwIDAQAB",
-    "content_security_policy": "script-src 'self' 'unsafe-eval'; font-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; connect-src https://www.google.com/ https://*.dropboxapi.com https://www.googleapis.com/ https://accounts.google.com/o/oauth2/revoke https://login.microsoftonline.com/common/oauth2/v2.0/token https://graph.microsoft.com/; default-src 'none'"
+    "content_security_policy": "script-src 'self' 'unsafe-eval'; font-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; connect-src https://www.google.com/ https://*.dropboxapi.com https://www.googleapis.com/ https://accounts.google.com/o/oauth2/revoke https://login.microsoftonline.com/common/oauth2/v2.0/token https://graph.microsoft.com/ ws://localhost:9090; default-src 'none'"
 }

package-lock.json

@@ -4,6 +4,7 @@
   "description": "Authenticator generates 2-Step Verification codes in your browser.",
   "scripts": {
     "compile": "bash scripts/build.sh firefox",
+    "dev:chrome": "npm run pretest && webpack --config ./webpack.watch.js",
     "chrome": "bash scripts/build.sh chrome",
     "firefox": "bash scripts/build.sh firefox",
     "prod": "bash scripts/build.sh prod",
@@ -55,6 +56,7 @@
     "vue-template-compiler": "^2.6.12",
     "webpack": "^4.44.2",
     "webpack-cli": "^3.3.11",
+    "webpack-extension-reloader": "^1.1.4",
     "webpack-merge": "^4.2.2"
   },
   "dependencies": {

package.json

@@ -83,8 +83,6 @@ postCompile () {
     if [[ $1 = "chrome" ]]; then
         cp manifests/schema-chrome.json $1/schema.json
     fi
-
-    
 }
 
 if [[ $PLATFORM = "prod" ]]; then

scripts/build.sh

@@ -39,6 +39,8 @@ async function runTests() {
     ignoreDefaultArgs: ["--disable-extensions"],
     args: [
       `--load-extension=${path.resolve(__dirname, "../test/chrome")}`,
+      // prevents zombie Chromium processes from not terminating during development testing
+      "--single-process",
       // for CI
       "--no-sandbox",
     ],

scripts/test-runner.ts

@@ -1,11 +1,10 @@
 const path = require("path");
 const merge = require('webpack-merge');
 const common = require('./webpack.config.js');
-const webpack = require('webpack');
 
 module.exports = merge(common, {
   entry: {
-    test: "./src/test.ts"
+    test: "./src/test.ts",
   },
   module: {
     rules: [
@@ -23,7 +22,7 @@ module.exports = merge(common, {
         enforce: "post"
       }
     ],
-    // to supress mocha warnings
+    // to suppress mocha warnings
     exprContextCritical: false,
   }
 });