Better output

ext/client.js

@@ -48,7 +48,15 @@ class Client {
             return;
         }
 
-        this.showPopup(range);
+        findTerm(range.toString(), ({results, length}) => {
+            if (length === 0) {
+                this.hidePopup();
+            } else {
+                range.setEnd(range.endContainer, range.startOffset + length);
+                this.popup.html(renderDefs(results.slice(0, 5)));
+                this.showPopup(range);
+            }
+        });
     }
 
     onMessage(request, sender, callback) {

ext/util.js

@@ -68,3 +68,23 @@ function getPopupPositionForRange(popup, range, offset) {
 
     return {x: posX, y: posY};
 }
+
+function renderDefs(terms) {
+    const outputs = [];
+    for (let term of terms) {
+        outputs.push(renderDef(term));
+    }
+
+    return outputs.join('');
+}
+
+function renderDef(term) {
+    return `
+<div class="yomichan-def">
+    <span class="yomichan-def-expression">${term.expression}</span>
+    <span class="yomichan-def-rules">${term.rules.join('&nbsp;&lt;&nbsp;')}</span>
+    <span class="yomichan-def-reading">${term.reading}</span>
+    <span class="yomichan-def-glossary">${term.glossary}</span>
+</div>
+`;
+}