3 files changed, 39 insertions, 3 deletions
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 391d6243..4e6c59df 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -51,9 +51,12 @@ class Backend {
 
         this.onOptionsUpdated('background');
 
-        if (chrome.commands !== null && typeof chrome.commands === 'object') {
+        if (isObject(chrome.commands) && isObject(chrome.commands.onCommand)) {
             chrome.commands.onCommand.addListener((command) => this._runCommand(command));
         }
+        if (isObject(chrome.tabs) && isObject(chrome.tabs.onZoomChange)) {
+            chrome.tabs.onZoomChange.addListener((info) => this._onZoomChange(info));
+        }
         chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
 
         const options = this.getOptionsSync(this.optionsContext);
@@ -94,6 +97,11 @@ class Backend {
         }
     }
 
+    _onZoomChange({tabId, oldZoomFactor, newZoomFactor}) {
+        const callback = () => this.checkLastError(chrome.runtime.lastError);
+        chrome.tabs.sendMessage(tabId, {action: 'zoomChanged', params: {oldZoomFactor, newZoomFactor}}, callback);
+    }
+
     applyOptions() {
         const options = this.getOptionsSync(this.optionsContext);
         if (!options.general.enable) {
@@ -527,6 +535,24 @@ class Backend {
         return await requestText(url, 'GET');
     }
 
+    _onApiGetZoom(params, sender) {
+        if (!sender || !sender.tab) {
+            return Promise.reject(new Error('Invalid tab'));
+        }
+
+        return new Promise((resolve, reject) => {
+            const tabId = sender.tab.id;
+            chrome.tabs.getZoom(tabId, (zoomFactor) => {
+                const e = chrome.runtime.lastError;
+                if (e) {
+                    reject(new Error(e.message));
+                } else {
+                    resolve({zoomFactor});
+                }
+            });
+        });
+    }
+
     // Command handlers
 
     async _onCommandSearch(params) {
@@ -741,7 +767,8 @@ Backend._messageHandlers = new Map([
     ['injectStylesheet', (self, ...args) => self._onApiInjectStylesheet(...args)],
     ['getEnvironmentInfo', (self, ...args) => self._onApiGetEnvironmentInfo(...args)],
     ['clipboardGet', (self, ...args) => self._onApiClipboardGet(...args)],
-    ['getDisplayTemplatesHtml', (self, ...args) => self._onApiGetDisplayTemplatesHtml(...args)]
+    ['getDisplayTemplatesHtml', (self, ...args) => self._onApiGetDisplayTemplatesHtml(...args)],
+    ['getZoom', (self, ...args) => self._onApiGetZoom(...args)]
 ]);
 
 Backend._commandHandlers = new Map([
diff --git a/ext/mixed/js/api.js b/ext/mixed/js/api.js
index 9f0835b0..5ec93b01 100644
--- a/ext/mixed/js/api.js
+++ b/ext/mixed/js/api.js
@@ -105,6 +105,10 @@ function apiGetDisplayTemplatesHtml() {
     return _apiInvoke('getDisplayTemplatesHtml');
 }
 
+function apiGetZoom() {
+    return _apiInvoke('getZoom');
+}
+
 function _apiInvoke(action, params={}) {
     const data = {action, params};
     return new Promise((resolve, reject) => {
diff --git a/ext/mixed/js/core.js b/ext/mixed/js/core.js
index 7fc01c94..0142d594 100644
--- a/ext/mixed/js/core.js
+++ b/ext/mixed/js/core.js
@@ -244,7 +244,8 @@ const yomichan = (() => {
 
             this._messageHandlers = new Map([
                 ['getUrl', this._onMessageGetUrl.bind(this)],
-                ['optionsUpdate', this._onMessageOptionsUpdate.bind(this)]
+                ['optionsUpdate', this._onMessageOptionsUpdate.bind(this)],
+                ['zoomChanged', this._onMessageZoomChanged.bind(this)]
             ]);
 
             chrome.runtime.onMessage.addListener(this._onMessage.bind(this));
@@ -274,6 +275,10 @@ const yomichan = (() => {
         _onMessageOptionsUpdate({source}) {
             this.trigger('optionsUpdate', {source});
         }
+
+        _onMessageZoomChanged({oldZoomFactor, newZoomFactor}) {
+            this.trigger('zoomChanged', {oldZoomFactor, newZoomFactor});
+        }
     }
 
     return new Yomichan();