Initial extension version which works on Chrome, Firefox, Opera, Edge

AuthentiqID · Sep 4, 2018 · d2073e7 · d2073e7
1 parent d42bb8c
commit d2073e7
Show file tree

Hide file tree

Showing 13 changed files with 249 additions and 0 deletions.
diff --git a/background.js b/background.js
@@ -0,0 +1,57 @@
+// Copyright 2018 Authentiq BV. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+'use strict';
+
+const endpoint = 'https://20-dot-authentiqio.appspot.com/totp_display/';
+let pushHandle = '';
+
+window.browser = (function() {
+  return window.msBrowser || window.browser || window.chrome;
+})();
+
+browser.storage.sync.get('handle', function(data) {
+  if (data) {
+    pushHandle = data.handle;
+  }
+});
+
+browser.storage.onChanged.addListener(function(changes, area) {
+  if (changes.hasOwnProperty('handle') && changes.handle.newValue) {
+    pushHandle = changes.handle.newValue;
+  }
+});
+
+browser.browserAction.onClicked.addListener(function(tab) {
+  console.info('AQ: Handling tab for:', tab.url);
+  console.info('AQ: handle set to:', pushHandle);
+
+  if (!pushHandle) {
+    browser.runtime.openOptionsPage();
+    return;
+  }
+
+  const url = new URL(tab.url);
+  let hint = { issuer: url.hostname, account: pushHandle };
+
+  for (let s of url.hostname.split('.')) {
+    // get the last item that's over 3 chars
+    if (s.length > 3) {
+      hint.issuer = s;
+    }
+  }
+
+  console.info('AQ: Payload:', JSON.stringify(hint));
+
+  let xhr = new XMLHttpRequest();
+  xhr.open('POST', endpoint + pushHandle, true);
+  xhr.onreadystatechange = function() {
+    if (xhr.readyState == 4) {
+      let resp = JSON.parse(xhr.responseText);
+      console.info('AQ: Response:', pushHandle, resp.status);
+    }
+  };
+  xhr.setRequestHeader('Content-Type', 'application/json');
+  xhr.send(JSON.stringify(hint));
+});
diff --git a/images/authentiq-128.png b/images/authentiq-128.png
diff --git a/images/authentiq-16.png b/images/authentiq-16.png
diff --git a/images/authentiq-19.png b/images/authentiq-19.png
diff --git a/images/authentiq-20.png b/images/authentiq-20.png
diff --git a/images/authentiq-32.png b/images/authentiq-32.png
diff --git a/images/authentiq-38.png b/images/authentiq-38.png
diff --git a/images/authentiq-48.png b/images/authentiq-48.png
diff --git a/images/authentiq-96.png b/images/authentiq-96.png
diff --git a/images/logo.svg b/images/logo.svg
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,35 @@
+{
+  "name": "Authentiq TOTP",
+  "description": "Nudge your Authentiq ID app to display the TOTP for this site",
+  "version": "0.1",
+  "author": "The Authentiq team",
+
+  "options_ui": {
+    "page": "options.html"
+  },
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "browser_action": {
+    "default_icon": {
+      "16": "images/authentiq-16.png",
+      "19": "images/authentiq-19.png",
+      "32": "images/authentiq-32.png",
+      "38": "images/authentiq-38.png"
+    }
+  },
+  "icons": {
+    "16": "images/authentiq-16.png",
+    "32": "images/authentiq-32.png",
+    "48": "images/authentiq-48.png",
+    "96": "images/authentiq-96.png",
+    "128": "images/authentiq-128.png"
+  },
+  "permissions": [
+    "activeTab",
+    "storage",
+    "https://20-dot-authentiqio.appspot.com/*"
+  ],
+  "manifest_version": 2
+}
diff --git a/options.html b/options.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Authentiq 2FA extension options</title>
+    <meta charset="utf-8"/>
+
+    <style>
+      body {
+        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+        font-size: 1.06rem;
+        /* max-width: 300px; */
+        margin: 20px;
+        color: #262626;
+      }
+
+      h1 {
+        font-size: 1.6rem;
+        font-weight: 500;
+      }
+
+      .logo {
+        /* display: block; */
+        margin-bottom: 20px;
+      }
+
+      input,
+      button {
+        float: left;
+        margin: 0 0 10px;
+        padding: 6px 2%;
+        font-family: inherit;
+        font-size: inherit;
+        line-height: inherit;
+      }
+
+      input {
+        width: 76%;
+      }
+
+      button {
+        width: 14%;
+        margin-left: 2%;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        color: #fff;
+        background-color: #895fc0;
+        border: 1px solid #895fc0;
+        text-align: center;
+      }
+
+      button:hover {
+        color: #fff;
+        background-color: #6f43a9;
+        border-color: #6a40a2;
+      }
+
+      hr {
+        clear: both;
+      }
+
+      .note, .note img {
+        vertical-align: top;
+        font-size: 0.9em;
+      }
+
+      #success-message {
+        color: green;
+        font-size: .8rem;
+      }
+
+      .hidden {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <img src="images/logo.svg" width="209" height="50" class="logo" />
+
+    <h1>Extension settings</h1>
+    <p>Enter an e-mail address or phone number registered to your Authentiq ID</p>
+
+    <div>
+      <input type="text" id="handle" placeholder="enter your handle" />
+      <button id="save">Save</button>
+    </div>
+
+    <hr />
+
+    <p class="note">
+      Whenever you click on the <img src="images/authentiq-16.png" width="16" height="16" /> icon in the browser bar, the appropriate 2FA codes will show on your Authentiq ID app.
+    </p>
+
+    <p id="success-message" class="hidden">Your new handle has been saved!</p>
+  </body>
+  <script src="options.js"></script>
+</html>
diff --git a/options.js b/options.js
@@ -0,0 +1,37 @@
+// Copyright 2018 Authentiq BV. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+'use strict';
+
+window.browser = (function() {
+  return window.msBrowser || window.browser || window.chrome;
+})();
+
+const background = browser.extension.getBackgroundPage();
+
+function constructOptions() {
+  const field = document.getElementById('handle');
+  const button = document.getElementById('save');
+
+  browser.storage.sync.get('handle', function(data) {
+    field.value = data.handle || '';
+  });
+
+  button.addEventListener('click', function(evt) {
+    let newHandle = field.value;
+    browser.storage.sync.set({ handle: newHandle }, function() {
+      console.info('AQ: New handle is:', newHandle);
+      background.pushHandle = newHandle;
+
+      const successMessage = document.getElementById('success-message');
+      successMessage.classList.remove('hidden');
+
+      setTimeout(() => {
+        successMessage.classList.add('hidden');
+      }, 7000);
+    });
+  });
+}
+
+constructOptions();