add global clipboard monitor that spawns popups

TODO: refactor the search page clipboard monitor and popup clipboard
monitor to use a common ClipboardMonitor class

5 files changed, 28 insertions, 0 deletions

diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json
index 7e12481d..d6207952 100644
--- a/ext/bg/data/options-schema.json
+++ b/ext/bg/data/options-schema.json
@@ -79,6 +79,7 @@
                                 "type": "object",
                                 "required": [
                                     "enable",
+                                    "enableClipboardPopups",
                                     "resultOutputMode",
                                     "debugInfo",
                                     "maxResults",
@@ -111,6 +112,10 @@
                                         "type": "boolean",
                                         "default": true
                                     },
+                                    "enableClipboardPopups": {
+                                        "type": "boolean",
+                                        "default": false
+                                    },
                                     "resultOutputMode": {
                                         "type": "string",
                                         "enum": ["group", "merge", "split"],
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 3cb9ce1d..407dc965 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -34,6 +34,9 @@ class Backend {
 
         this.clipboardPasteTarget = document.querySelector('#clipboard-paste-target');
         this.popupWindow = null;
+        this.clipboardPopupTimerId = null;
+        this.clipboardInterval = 250;
+        this.clipboardPreviousText = null;
 
         this.apiForwarder = new BackendApiForwarder();
     }
@@ -122,6 +125,20 @@ class Backend {
         } else {
             this.mecab.stopListener();
         }
+
+        window.clearInterval(this.clipboardPopupTimerId);
+        if (options.general.enableClipboardPopups) {
+            this.clipboardPopupTimerId = setInterval(() => {
+                this._onApiClipboardGet()
+                .then((result) => {
+                    if (this.clipboardPreviousText === result) {
+                        return;
+                    }
+                    this._onCommandSearch({mode: 'popup', query: result});
+                    this.clipboardPreviousText = result;
+                });
+            }, this.clipboardInterval);
+        }
     }
 
     async getOptionsSchema() {
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 78508059..97032660 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -266,6 +266,7 @@ function profileOptionsCreateDefaults() {
     return {
         general: {
             enable: true,
+            enableClipboardPopups: false,
             resultOutputMode: 'group',
             debugInfo: false,
             maxResults: 32,
diff --git a/ext/bg/js/settings/main.js b/ext/bg/js/settings/main.js
index 4492cd42..ad3459f0 100644
--- a/ext/bg/js/settings/main.js
+++ b/ext/bg/js/settings/main.js
@@ -28,6 +28,7 @@ function getOptionsFullMutable() {
 
 async function formRead(options) {
     options.general.enable = $('#enable').prop('checked');
+    options.general.enableClipboardPopups = $('#enable-clipboard-popups').prop('checked');
     options.general.showGuide = $('#show-usage-guide').prop('checked');
     options.general.compactTags = $('#compact-tags').prop('checked');
     options.general.compactGlossaries = $('#compact-glossaries').prop('checked');
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 3480b124..b0fcec2b 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -135,6 +135,10 @@
                 </div>
 
                 <div class="checkbox">
+                    <label><input type="checkbox" id="enable-clipboard-popups"> Enable native popups when copying Japanese text</label>
+                </div>
+
+                <div class="checkbox">
                     <label><input type="checkbox" id="show-usage-guide"> Show usage guide on startup</label>
                 </div>