Add extenstion code

typelikeme · Aug 7, 2019 · e31cc8f · e31cc8f
1 parent 99b9e6d
commit e31cc8f
Show file tree

Hide file tree

Showing 11 changed files with 148 additions and 95 deletions.
diff --git a/dist/icon-gray.png b/dist/icon-gray.png
diff --git a/favicon.png → dist/icon.png b/favicon.png → dist/icon.png
diff --git a/dist/js/background.js b/dist/js/background.js
@@ -1,9 +1,8 @@
-chrome.browserAction.onClicked.addListener(function (tab) {
-    chrome.tabs.executeScript({
-        file: 'dist/js/content.js'
-    });
-    chrome.tabs.insertCSS({
-        file: 'dist/css/dropdown.min.css'
-    });
+chrome.tabs.onActivated.addListener(function(tabId, selectInfo) {
+    chrome.browserAction.setIcon({path:"dist/icon-gray.png"});
 });
+chrome.tabs.onUpdated.addListener(function(tabId, selectInfo) {
+    chrome.browserAction.setIcon({path:"dist/icon-gray.png"});
+});
+
 
diff --git a/dist/js/content.js b/dist/js/content.js
diff --git a/dist/js/options.js b/dist/js/options.js
@@ -1,18 +1,20 @@
 function refresh() {
-    chrome.storage.local.get(['active', 'attachInput', 'attachTextarea', 'key'], function (result) {
-        document.getElementById('active').checked = result.active;
+    chrome.storage.local.get(['attachInput', 'attachTextarea', 'key'], function (result) {
         document.getElementById('attach-to-input').checked = result.attachInput;
         document.getElementById('attach-to-textarea').checked = result.attachTextarea;
         document.getElementById('key').value = result.key;
     });
 }
 refresh();
 
-document.getElementById('active').addEventListener('change', function(){
-    chrome.storage.local.set({active: document.getElementById('active').checked}, function() {
-        refresh();
-    });
+
+chrome.tabs.executeScript({
+    file: 'dist/js/content.js'
 });
+chrome.tabs.insertCSS({
+    file: 'dist/css/dropdown.min.css'
+});
+
 document.getElementById('attach-to-input').addEventListener('change', function(){
     chrome.storage.local.set({attachInput: document.getElementById('attach-to-input').checked}, function() {
         refresh();
@@ -27,4 +29,6 @@ document.getElementById('key').addEventListener('blur', function(){
     chrome.storage.local.set({key: document.getElementById('key').value}, function() {
         refresh();
     });
-});
+});
+
+chrome.browserAction.setIcon({path:"icon.png"});
diff --git a/dist/popup.html b/dist/popup.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html style="font-size: 0.7em; background-color: gray;">
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    <div style="min-width: 400px;" class="p-1">
+      <form>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item list-group-item-action">
+            <div class="form-check">
+              <input
+                type="checkbox"
+                id="attach-to-input"
+                name="attach-to-input"
+                class="form-check-input"
+              />
+              <label for="attach-to-input" style="display: block;" class="form-check-label"
+                >Attach to input elements</label
+              >
+            </div>
+          </li>
+          <li class="list-group-item list-group-item-action">
+            <div class="form-check">
+              <input
+                type="checkbox"
+                id="attach-to-textarea"
+                name="attach-to-textarea"
+                class="form-check-input"
+              />
+              <label for="attach-to-textarea" style="display: block;" class="form-check-label"
+                >Attach to textarea elements</label
+              >
+            </div>
+          </li>
+          <li class="list-group-item list-group-item-action">
+            <div class="form-group">
+              <label for="key">Model Key</label>
+              <input type="text" id="key" name="key" class="form-control" />
+            </div>
+          </li>
+        </ul>
+      </form>
+    </div>
+
+    <script src="/dist/js/options.js"></script>
+  </body>
+</html>
diff --git a/manifest.json b/manifest.json
@@ -1,19 +1,20 @@
 {
   "name": "TypeLikeMe Typing Assistant",
-  "version": "0.1.0",
-  "description": "Chrome extention for leveraging text predictions based on machine learning models trained via typelike.me.",
+  "version": "0.3.0",
+  "description": "Chrome extension for leveraging text predictions based on machine learning models trained via typelike.me.",
   "manifest_version": 2,
   "permissions": ["storage", "activeTab"],
   "background": {
     "scripts": ["dist/js/background.js"],
-    "persistent": true
+    "persistent": false
   },
   "options_page": "dist/options.html",
   "browser_action": {
-    "default_icon":  "favicon.png",
+    "default_popup": "dist/popup.html",
+    "default_icon":  "dist/icon-gray.png",
     "default_title": "Enable TypeLikeMe Assistant"
   },
   "icons": {
-    "32": "favicon.png"
+    "32": "dist/icon.png"
   }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@typelikeme/chrome-extenstion",
-  "version": "1.0.0",
+  "version": "0.2.0",
   "description": "Chrome extention for leveraging text predictions based on machine learning models trained via typelike.me",
   "main": "src/js/index.ts",
   "repository": {
@@ -31,6 +31,6 @@
     "rollup-plugin-node-resolve": "^5.2.0"
   },
   "dependencies": {
-    "@typelikeme/tlmjs": "^1.0.3"
+    "@typelikeme/tlmjs": "^1.0.4"
   }
 }
diff --git a/src/js/index.ts b/src/js/index.ts
@@ -1,29 +1,24 @@
-import { Tlm } from "@typelikeme/tlmjs/src/js/tlm";
+import { predictor } from "@typelikeme/tlmjs/src/js/index.ts";
 
-let tlm = [];
+chrome.storage.local.get(["key", "attachInput", "attachTextarea"], function(
+  result
+) {
+  let tlm = predictor(result.key);
 
-chrome.storage.local.get(
-  ["active", "key", "attachInput", "attachTextarea"],
-  function(result) {
-    let isActive = result.active;
-    let key = result.key;
-    let attachToInput = result.attachInput;
-    let attachToTextarea = result.attachTextarea;
-
-    if (isActive) {
-      let tlm = new Tlm(key);
-      if (attachToTextarea) {
-        let textareaList = document.getElementsByTagName("textarea");
-        for (var i = 0; i < textareaList.length; i++) {
-          tlm.attach(textareaList[i]);
-        }
+  if (result.attachTextarea) {
+    let textareaList = document.getElementsByTagName("textarea");
+    for (var i = 0; i < textareaList.length; i++) {
+      if (!textareaList[i].hasOwnProperty("data-autosuggest_is-input")) {
+        tlm.attach(textareaList[i]);
       }
-      if (attachToInput) {
-        let inputList = document.querySelectorAll("input[type=text]");
-        for (var i = 0; i < inputList.length; i++) {
-          tlm.attach(inputList[i]);
-        }
+    }
+  }
+  if (result.attachInput) {
+    let inputList = document.querySelectorAll("input[type=text]");
+    for (var i = 0; i < inputList.length; i++) {
+      if (!inputList[i].hasOwnProperty("data-autosuggest_is-input")) {
+        tlm.attach(inputList[i]);
       }
     }
   }
-);
+});
diff --git a/tests/index.html b/tests/index.html
@@ -4,6 +4,6 @@
   </head>
   <body>
     <textarea></textarea>
-    <input />
+    <input type="text"/>
   </body>
 </html>