add clipboard monitor to search page

Related to issue #262 about APIs

ext/bg/js/search.js

@@ -29,8 +29,13 @@ class DisplaySearch extends Display {
         this.search = document.querySelector('#search');
         this.query = document.querySelector('#query');
         this.intro = document.querySelector('#intro');
+        this.clipboardMonitorCheck = document.querySelector('#clipboard-monitor');
+
         this.introVisible = true;
         this.introAnimationTimer = null;
+
+        this.clipboardMonitorIntervalId = null;
+        this.clipboardPrevText = null;
     }
 
     static create() {
@@ -57,10 +62,20 @@ class DisplaySearch extends Display {
 
                 window.wanakana.bind(this.query);
             }
+            if (this.clipboardMonitorCheck !== null) {
+                this.clipboardMonitorCheck.addEventListener('change', (e) => {
+                    if (e.target.checked) {
+                        this.startClipboardMonitor();
+                    } else {
+                        this.stopClipboardMonitor();
+                    }
+                });
+            }
 
             window.addEventListener('popstate', (e) => this.onPopState(e));
 
             this.updateSearchButton();
+            this.initClipboardMonitor();
         } catch (e) {
             this.onError(e);
         }
@@ -93,7 +108,9 @@ class DisplaySearch extends Display {
             return;
         }
 
-        e.preventDefault();
+        if (e) {
+            e.preventDefault();
+        }
 
         const query = this.query.value;
         const queryString = query.length > 0 ? `?query=${encodeURIComponent(query)}` : '';
@@ -182,6 +199,31 @@ class DisplaySearch extends Display {
         }
     }
 
+    initClipboardMonitor() {
+        // ignore copy from search page
+        window.addEventListener('copy', (e) => {
+            this.clipboardPrevText = document.getSelection().toString().trim();
+        });
+    }
+
+    startClipboardMonitor() {
+        this.clipboardMonitorIntervalId = setInterval(async () => {
+            const curText = (await navigator.clipboard.readText()).trim();
+            if (curText && (curText !== this.clipboardPrevText)) {
+                this.query.value = curText;
+                this.onSearch();
+                this.clipboardPrevText = curText;
+            }
+        }, 100);
+    }
+
+    stopClipboardMonitor() {
+        if (this.clipboardMonitorIntervalId) {
+            clearInterval(this.clipboardMonitorIntervalId);
+            this.clipboardMonitorIntervalId = null;
+        }
+    }
+
     getOptionsContext() {
         return this.optionsContext;
     }

ext/bg/search.html

@@ -19,7 +19,14 @@
                 <p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p>
             </div>
 
-            <form class="input-group" style="padding-top: 10px;">
+            <div class="input-group" style="padding-top: 10px; font-size: 20px;">
+                <span title="Enable clipboard monitor" class="input-group-text">
+                    <label for="clipboard-monitor"><span class="glyphicon glyphicon-paste"></span></label>
+                    <input type="checkbox" id="clipboard-monitor" />
+                </span>
+            </div>
+
+            <form class="input-group">
                 <input type="text" class="form-control" placeholder="Search for..." id="query" autofocus>
                 <span class="input-group-btn">
                     <input type="submit" class="btn btn-default form-control" id="search" value="Search">

ext/manifest.json

@@ -41,6 +41,7 @@
     "permissions": [
         "<all_urls>",
         "storage",
+        "clipboardRead",
         "clipboardWrite",
         "unlimitedStorage"
     ],