Updates

ext/bg/yomichan.js

@@ -53,7 +53,6 @@ class Yomichan {
         switch (this.state) {
             case 'disabled':
                 this.updateState('loading');
-                this.translator.loadData(this.res, () => this.updateState('enabled'));
                 break;
             case 'enabled':
                 this.updateState('disabled');
@@ -62,9 +61,26 @@ class Yomichan {
     }
 
     updateState(state) {
-        const text = {'disabled': '', 'enabled': 'on', 'loading': '...'}[state];
-        chrome.browserAction.setBadgeText({text: text});
         this.state = state;
+
+        switch (state) {
+            case 'disabled':
+                chrome.browserAction.setBadgeText({text: ''});
+                break;
+            case 'enabled':
+                chrome.browserAction.setBadgeText({text: 'on'});
+                break;
+            case 'loading':
+                chrome.browserAction.setBadgeText({text: '...'});
+                this.translator.loadData(this.res, () => this.updateState('enabled'));
+                break;
+        }
+
+        chrome.tabs.query({}, (tabs) => {
+            for (const tab of tabs) {
+                chrome.tabs.sendMessage(tab.id, this.state, () => null);
+            }
+        });
     }
 }
 

ext/client.js

@@ -19,15 +19,23 @@
 
 class Client {
     constructor() {
-        $('body').append('<div class="yomichan-popup"/>');
+        this.popup       = $('<div class="yomichan-popup"/>');
-
-        this.popup       = $('.yomichan-popup');
         this.popupOffset = 10;
+        this.enabled     = false;
 
-        window.addEventListener('mousemove', whenEnabled(this.onMouseMove.bind(this)));
+        $('body').append(this.popup);
+
+        chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
+        window.addEventListener('mousemove', this.onMouseMove.bind(this));
+
+        getState((state) => this.setEnabled(state === 'enabled'));
     }
 
     onMouseMove(e) {
+        if (!this.enabled) {
+            return;
+        }
+
         const range = getRangeAtCursor(e, 10);
         if (range === null) {
             this.hidePopup();
@@ -43,6 +51,11 @@ class Client {
         this.showPopup(range);
     }
 
+    onMessage(request, sender, callback) {
+        this.setEnabled(request === 'enabled');
+        callback();
+    }
+
     showPopup(range) {
         const selection = window.getSelection();
         selection.removeAllRanges();
@@ -58,6 +71,12 @@ class Client {
 
         this.popup.css({visibility: 'hidden'});
     }
+
+    setEnabled(enabled) {
+        if (!(this.enabled = enabled)) {
+            this.hidePopup();
+        }
+    }
 }
 
 window.yomiClient = new Client();

ext/util.js

@@ -68,13 +68,3 @@ function getPopupPositionForRange(popup, range, offset) {
 
     return {x: posX, y: posY};
 }
-
-function whenEnabled(callback) {
-    return (...args) => {
-        getState((state) => {
-            if (state === 'enabled') {
-                callback(...args);
-            }
-        });
-    };
-}