Neuralyzer complete feature

A tiny circle dot will be added to the body. Staff can neuralyze the kiosk by tapping 10 times on the dot.

.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.idea

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Le Khac Man
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,2 +1,22 @@
-# neuralyzer
-A Chrome plugin that has the ability to bring the kiosk back to its homepage from any other websites
+# Neuralyzer
+A Chrome plugin that has the ability to bring the kiosk back to its homepage from any other websites.
+
+![Neuralizer](https://duckduckgo.com/i/4b28a7b3.jpg)
+
+## How to
+
+### Setup
+1. Download [Neuralyzer](https://github.com/lekhacman/neuralyzer/archive/refs/heads/master.zip) and unzip file on the kiosk.
+2. Open Chrome browser and type [chrome://extensions](chrome://extensions) on the address bar.
+3. Turn on `Developer mode` (usually in the top right corner).
+4. Congrats! You are now a 'developer'. Now click on `Load unpacked` button and point to the neuralyzer folder 
+that contains the `manifest.json` which is `src` folder in this case.
+5. Neuralyzer has been installed, now you have to config it by clicking on the `extensions` icon
+on the right side of the address bar on Chrome and choose `Neuralyzer` to open the configuration box.
+6. Set the target URL which is the kiosk's homepage in this case.
+7. Reload the kiosk app
+
+### Usage
+After setup, a tiny dot appears at the bottom left corner. When you want to bring the kiosk back to the configured homepage, just tap on the dot 10 times continuously.
+
+Hope you find this helpful. Have fun!

package.json

@@ -0,0 +1,57 @@
+{
+  "name": "neuralyzer",
+  "version": "0.0.1",
+  "description": "A Chrome plugin that has the ability to bring the kiosk back to its homepage from any other websites",
+  "repository": "[email protected]:lekhacman/neuralyzer.git",
+  "author": "Le Khac Man <[email protected]>",
+  "private": true,
+  "scripts": {},
+  "license": "MIT",
+  "devDependencies": {
+    "@types/jest": "^28.1.3",
+    "eslint": "^8.18.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-prettier": "^4.1.0",
+    "jest": "^28.1.1",
+    "prettier": "^2.7.1"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:jest/recommended",
+      "prettier"
+    ],
+    "plugins": [
+      "jest",
+      "prettier"
+    ],
+    "env": {
+      "node": true,
+      "es6": true,
+      "jest/globals": true
+    },
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "singleQuote": true,
+          "trailingComma": "es5"
+        }
+      ]
+    },
+    "globals": {
+      "jest": true
+    },
+    "overrides": [
+      {
+        "files": [
+          "*.test.js"
+        ],
+        "rules": {
+          "no-unused-vars": "off",
+          "no-global-assign": "off"
+        }
+      }
+    ]
+  }
+}

src/main.js

@@ -0,0 +1,37 @@
+chrome.storage.sync.get(['url'], function ({ url }) {
+  console.log(`Neuralyzer URL: ${url}`);
+  const dot = document.createElement('i');
+  dot.id = 'neuralyzerBtn';
+  dot.onclick = clickerOf({
+    count: 10,
+    timeout: 1000,
+    action: function () {
+      location.href = url;
+    },
+  }).onClick;
+  document.body.appendChild(dot);
+});
+
+/**@param {{count: number, timeout: number, action: function}} config
+ * @returns {{onClick: onClick}} */
+function clickerOf(config) {
+  let count = 0;
+  let jobId;
+  function onClick() {
+    count++;
+    if (jobId) {
+      clearTimeout(jobId);
+    }
+    if (count === config.count) {
+      reset();
+      config.action();
+    } else {
+      jobId = setTimeout(reset, config.timeout);
+    }
+  }
+  function reset() {
+    count = 0;
+    jobId = null;
+  }
+  return { onClick };
+}

src/manifest.json

@@ -0,0 +1,19 @@
+{
+  "name": "Neuralyzer",
+  "description": "A Chrome plugin that has the ability to bring the kiosk back to its homepage from any other websites",
+  "version": "0.0.1",
+  "manifest_version": 3,
+  "permissions": [
+    "storage"
+  ],
+  "content_scripts": [
+    {
+      "matches": ["*://*/*"],
+      "js": ["main.js"],
+      "css": ["neuralyzer.css"]
+    }
+  ],
+  "action": {
+    "default_popup": "ui/index.html"
+  }
+}

src/neuralyzer.css

@@ -0,0 +1,13 @@
+#neuralyzerBtn {
+    border: 1px solid #00b0b2;
+    background-color: rgba(255,255,255, 0);
+    height: 8px;
+    width: 8px;
+    padding: 0 0;
+    border-radius: 50%;
+    position: fixed;
+    bottom: 0.8rem;
+    left: 0.8rem;
+    z-index: 101;
+}
+

src/ui/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Neuralyzer</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="root">
+    <main>
+        <section class="container">
+            <h2>Neuralyzer configuration</h2>
+            <div>
+                <form id="configuration">
+                    <div class="input-group">
+                        <label for="url">Homepage URL</label>
+                        <input type="text" id="url" name="url" placeholder="Enter homepage url here">
+                    </div>
+                    <div class="input-group">
+                        <button type="submit" id="submitBtn" class="btn btn--primary">Save</button>
+                        <span id="flashMsg"></span>
+                    </div>
+                </form>
+            </div>
+        </section>
+    </main>
+    <footer>Developed by Andrew Le with ❤️</footer>
+</div>
+<script src="script.js"></script>
+</body>
+</html>

src/ui/script.js

@@ -0,0 +1,25 @@
+// if (!chrome.storage) {
+//   chrome = { storage: { sync: { get: noop, set: noop } } };
+// }
+// function noop() {}
+chrome.storage.sync.get(['url'], function (config) {
+  document.getElementById('url').value = config.url || '';
+});
+
+document.getElementById('configuration').onsubmit = function (event) {
+  event.preventDefault();
+  const values = Object.values(event.target).reduce(function (
+    acc,
+    { name, value }
+  ) {
+    acc[name] = value;
+    return acc;
+  },
+  {});
+  chrome.storage.sync.set(values, function () {
+    document.getElementById('flashMsg').innerText = 'Config saved!';
+    setTimeout(function () {
+      document.getElementById('flashMsg').innerText = '';
+    }, 1500);
+  });
+};

src/ui/style.css

@@ -0,0 +1,28 @@
+html {
+    min-width: 20rem;
+    font-size: 1.2rem;
+    font-family: Roboto, Arial, sans-serif;
+}
+h2 {
+    font-size: 1.2em;
+}
+.container {
+    padding: 0 0.5rem;
+}
+label {
+    display: block;
+}
+input, select {
+    display: inline-block;
+    margin: 0.5rem 0;
+    padding: 0.5em 0.8em;
+    width: 95%;
+}
+.input-group {
+    margin: 0.5rem 0;
+}
+footer {
+    color: gray;
+    font-size: 0.8em;
+    text-align: center;
+}