Basic end to end flow working.

* Can type emoji name, up/down arrow, enter to copy to keyboard
* TODO: Improve UI/UX, add more search terms for emojis to weighted index

chrome-extension/package.json

@@ -12,13 +12,15 @@
     "css-loader": "3.2.0",
     "file-loader": "4.3.0",
     "fs-extra": "8.1.0",
+    "fuse.js": "^6.4.6",
     "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",
+    "jquery": "^3.5.1",
     "style-loader": "1.0.0",
     "webpack": "4.41.2",
+    "webpack-cli": "3.3.10",
     "webpack-dev-server": "3.9.0",
     "write-file-webpack-plugin": "4.5.1",
-    "webpack-cli": "3.3.10",
     "yarn": "1.22.10"
   }
 }

chrome-extension/src/js/background.js

@@ -1,2 +1,110 @@
 import '../img/icon-128.png'
 import '../img/icon-34.png'
+import '../resources/AllEmojis.txt'
+
+const $ = require("jquery");
+import Fuse from 'fuse.js'
+
+var emojiJSON = null;
+var fuse = null;
+
+chrome.runtime.onConnect.addListener(function (port) {
+    console.log(`Connected .....`);
+    // console.log(port)
+
+    port.onMessage.addListener(function (msg) {
+        // console.log("message recieved: ");
+        console.log(msg);
+        switch (msg.command) {
+            case 'fetchEmoji':
+                getAllEmojis(emojiList => {
+                    port.postMessage(emojiList)
+                })
+            case 'emojiMatchString':
+                getMatchingEmojis(msg.data, matchingEmojiList => {
+                    port.postMessage(matchingEmojiList)
+                })
+                break;
+            default:
+                getMatchingEmojis(msg)
+                break;
+        }
+        // port.postMessage(getMatchingEmojis(msg));
+    });
+})
+chrome.runtime.onInstalled.addListener(e => {
+    console.log("emoji-insterter background started up!")
+    console.log(e)
+})
+
+function getAllEmojis(callback) {
+    if (emojiJSON != null) {
+        callback(emojiJSON)
+    } else {
+        $.getJSON(chrome.runtime.getURL("./AllEmojis.txt"), data => {
+            emojiJSON = data;
+            callback(data);
+        })
+    }
+}
+
+function getMatchingEmojis(string, callback) {
+    var results = null;
+    if (emojiJSON != null) {
+        fuse = makeSearchIndex(fuse, emojiJSON);
+        results = fuse.search(string)
+        callback(results)
+    } else {
+        $.getJSON(chrome.runtime.getURL("./AllEmojis.txt"), data => {
+            fuse = makeSearchIndex(fuse, data);
+            results = fuse.search(string)
+            callback(results)
+        })
+    }
+}
+
+
+/**
+ * 
+ * @param {Fuse} inIndexVar, a inValue fuse index, is either null or filled 
+ * @param {*} data , a textfile to be converted to a fuse search index in inIndexVar
+ */
+function makeSearchIndex(inIndexVar, data) {
+
+    if (inIndexVar == null) {
+        const fuseOptions = {
+            isCaseSensitive: false,
+            // includeScore: false,
+            // shouldSort: true,
+            includeMatches: false,
+            findAllMatches: true,
+            // minMatchCharLength: 1,
+            // location: 0,
+            threshold: 0.3,
+            distance: 10,
+            useExtendedSearch: true,
+            ignoreLocation: true,
+            // ignoreFieldNorm: false,
+            keys: [
+                "name"
+            ]
+        };
+        inIndexVar = new Fuse(data, fuseOptions)
+    }
+    return inIndexVar;
+}
+
+function getSearchIndexMatches(string) {
+    if (fuse == null) {
+        fuse = new Fuse()
+    }
+}
+
+
+// $.getJSON('../resources/AllEmojis.txt', data => {
+//     console.log(data)
+// })
+
+// $.getJSON(chrome.runtime.getURL("./AllEmojis.txt"), data => {
+//     console.log(data)
+// })

chrome-extension/src/js/popup.js

@@ -1,7 +1,10 @@
+import { isNumeric } from "jquery";
 import "../css/popup.css";
 import hello from "./popup/example";
+import fetchEmojiListPort from "./utils/utils"
 
-
+// import Fuse from 'fuse.js'
+// const $ = require("jquery");
 
 function copyTextToClipboard(text) {
     if (text) {
@@ -31,19 +34,150 @@ function copyTextToClipboard(text) {
         document.body.removeChild(copyFrom);
     }
 }
+// const fuseOptions = {
+//     isCaseSensitive: false,
+//     // includeScore: false,
+//     // shouldSort: true,
+//     includeMatches: false,
+//     findAllMatches: true,
+//     // minMatchCharLength: 1,
+//     // location: 0,
+//     threshold: 0.3,
+//     distance: 10,
+//     // useExtendedSearch: false,
+//     ignoreLocation: true,
+//     // ignoreFieldNorm: false,
+//     keys: [
+//         "name"
+//     ]
+// };
 
-// document.getElementById('test-img').addEventListener('click', copyTextToClipboard);
-// document.getElementById('input-txt').addEventListener('focus', e => {
-//     this.select()
-// })
-// console.log(document.getElementById('search-form'))
-document.getElementById('search-form').addEventListener('submit', event => {
-    // event.preventDefault()
-    // console.log(event)
-    let textNode = document.getElementById('input-txt')
-    copyTextToClipboard(textNode.value)
-    window.close(); // close the popup, we're done
+// var fuse = null;
+
+/**
+ * 
+ * @param {Map} emojiList, an map of of <emojiCode, emojiName>
+ */
+function updateEmojiList(emojiList) {
+    fuse = new Fuse(emojiList, fuseOptions);
+}
+
+const port = chrome.extension.connect({
+    name: fetchEmojiListPort
+});
+port.onMessage.addListener(updateEmojiList);
+// port.postMessage({ "command": "fetchEmoji", "data": "" });
+
+const emojiMatchPort = chrome.extension.connect({
+    name: 'emojiMatchPort'
 })
-document.getElementById('input-txt').addEventListener('keyup', event => {
-    console.log(event.target.value);
+
+// emojiMatchPort.onMessage.addListener(populateResultsInputList)
+emojiMatchPort.onMessage.addListener(populateResultsTable)
+
+document.getElementById('search-form').addEventListener('submit', copyAndClosePopup)
+
+document.getElementById('input-txt').addEventListener('onchange', copyAndClosePopup)
+
+function copyAndClosePopup(event) {
+    event.preventDefault()
+    // let textNode = document.getElementById('input-area')
+    // copyTextToClipboard(textNode.value)
+    copyTextToClipboard(copyStr)
+    window.close(); // close the popup, we're done
+}
+document.getElementById('search-form').addEventListener('keyup', event => {
+    switch (event.key) {
+        case 'ArrowUp':
+            event.preventDefault();
+            updateResultTable(resultTableIdx - 1);
+            break;
+        case 'ArrowDown':
+            event.preventDefault();
+            updateResultTable(resultTableIdx + 1);
+            break;
+
+        default:
+            emojiMatchPort.postMessage({ "command": "emojiMatchString", "data": event.target.value });
+            break;
+    }
+    // var results = fuse.search(event.target.value)
+    // populateResultsTable(results)
+    // console.log(event.target.value)
+
 })
+
+const maxResultTableLength = 15;
+var resultTableIdx = 0;
+var copyStr = "";
+
+function updateResultTable(idx) {
+    let table = document.getElementById('found-emojis');
+    let numRows = table.rows.length
+    if (numRows > 0) {
+        let numCols = table.rows[0].cells.length
+        idx = Math.max(Math.min(numRows, idx), 0);
+        resultTableIdx = idx;
+        for (var i = 0; i < numRows; ++i) {
+            table.rows[i].cells[numCols - 1].style.backgroundColor = 'white';
+        }
+        let cell = table.rows[idx].cells[numCols - 1]
+        cell.style.backgroundColor = '#00ffff69';
+        copyStr = cell.innerText
+    } else {
+        copyStr = ""
+    }
+
+
+}
+
+function populateResultsInputList(results) {
+    var currentResultIdx = 0;
+    var emojiArray = [];
+    var table = document.getElementById('input-txt');
+    table.innerHTML = "";
+    for (const result in results) {
+        currentResultIdx++;
+        if (currentResultIdx > maxResultTableLength) {
+            break;
+        }
+        if (Object.hasOwnProperty.call(results, result)) {
+            const element = results[result].item;
+            let option = document.createElement('option')
+            option.value = element.name + " " + element.emoji;
+
+            table.appendChild(option)
+        }
+    }
+}
+
+function populateResultsTable(results) {
+    resultTableIdx = -1;
+    var currentResultIdx = 0;
+    var table = document.getElementById('found-emojis');
+    table.innerHTML = "";
+    for (const result in results) {
+        currentResultIdx++;
+        if (currentResultIdx > maxResultTableLength) {
+            break;
+        }
+        if (Object.hasOwnProperty.call(results, result)) {
+            const element = results[result].item;
+            // console.log(`${element.name}: ${element.emoji}`)
+
+            let row = document.createElement('tr')
+            let col1 = document.createElement('td');
+            col1.textContent = element.name;
+
+            let col2 = document.createElement('td');
+            col2.innerText = element.emoji
+
+            row.appendChild(col1)
+            row.appendChild(col2)
+            table.appendChild(row)
+        }
+    }
+    updateResultTable(resultTableIdx);
+}
+
+

chrome-extension/src/js/utils/utils.js

@@ -0,0 +1,2 @@
+const fetchEmojiListPort = "fetchEmojiListPort";
+export default fetchEmojiListPort;

chrome-extension/src/manifest.json

@@ -21,7 +21,7 @@
     "clipboardWrite"
   ],
   "web_accessible_resources": [
-    "AllEmojis.txt"
+    "resources/*"
   ],
   "commands": {
     "_execute_browser_action": {

chrome-extension/src/popup.html

@@ -7,11 +7,16 @@
 </head>
 
 <body>
-  <h1>Hello!</h1>
-  <img src="img/icon-128.png">
+  <h1>Emoji Inserter</h1>
+  <p>Type the name of the emoji you want, navigate up and down, and hit enter. </p>
+
   <form id="search-form">
-    <input type="text" id="input-txt" autofocus="autofocus">
+    <input list="input-txt" id="input-area" autofocus="autofocus" type="text" autocomplete="off">
+    <datalist id="input-txt">
+    </datalist>
   </form>
+  <table id="found-emojis">
+  </table>
 </body>
 
 </html>

chrome-extension/webpack.config.js

@@ -12,7 +12,7 @@ var alias = {};
 
 var secretsPath = path.join(__dirname, ("secrets." + env.NODE_ENV + ".js"));
 
-var fileExtensions = ["jpg", "jpeg", "png", "gif", "eot", "otf", "svg", "ttf", "woff", "woff2"];
+var fileExtensions = ["jpg", "jpeg", "png", "gif", "eot", "otf", "svg", "ttf", "woff", "woff2", "txt"];
 
 if (fileSystem.existsSync(secretsPath)) {
   alias["secrets"] = secretsPath;