WIP

ext/bg/js/options-form.js

@@ -27,11 +27,16 @@ function formToOptions() {
     });
 }
 
-$(document).ready(() => loadOptions((opts) => optionsToForm(opts)));
+$('#saveOptions').click(() => {
+    const opt = formToOptions();
+    const yomichan = chrome.extension.getBackgroundPage().yomichan;
+    saveOptions(() => yomichan.updateOptions(opts));
+});
 
-$('#saveOptions').click(() => saveOptions(formToOptions()));
 $('#resetOptions').click(() => {
-    if (confirm('Reset options to defaults?')) {
+    if (confirm('Reset options to default values?')) {
         optionsToForm(sanitizeOptions({}));
     }
 });
+
+$(document).ready(() => loadOptions((opts) => optionsToForm(opts)));

ext/bg/js/options.js

@@ -23,6 +23,9 @@ function sanitizeOptions(options) {
     };
 
     for (const key in defaults) {
+        if (!options.hasOwnProperty(key)) {
+            options[key] = defaults[key];
+        }
         options[key] = options[key] || defaults[key];
     }
 

ext/bg/js/yomichan.js

@@ -23,9 +23,12 @@ class Yomichan {
 
         this.translator = new Translator();
         this.updateState('disabled');
+        this.updateOptions({});
 
         chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
         chrome.browserAction.onClicked.addListener(this.onBrowserAction.bind(this));
+
+        loadOptions((opts) => this.updateOptions(opts));
     }
 
     onMessage(request, sender, callback) {
@@ -37,11 +40,9 @@ class Yomichan {
             renderTemplate: ({data, template}) => Handlebars.templates[template](data)
         }[action];
 
-        if (handler !== null) {
-            const result = handler.call(this, data);
-            if (callback !== null) {
-                callback(result);
-            }
+        const result = handler.call(this, data);
+        if (callback !== null) {
+            callback(result);
         }
     }
 
@@ -57,6 +58,10 @@ class Yomichan {
     }
 
     updateState(state) {
+        if (this.state === state) {
+            return;
+        }
+
         this.state = state;
 
         switch (state) {
@@ -72,9 +77,18 @@ class Yomichan {
                 break;
         }
 
+        Yomichan.notifyChange('state', this.state);
+    }
+
+    updateOptions(options) {
+        this.options = sanitizeOptions(options);
+        Yomichan.notifyChange('options', this.options);
+    }
+
+    static notifyChange(name, value) {
         chrome.tabs.query({}, (tabs) => {
             for (const tab of tabs) {
-                chrome.tabs.sendMessage(tab.id, this.state, () => null);
+                chrome.tabs.sendMessage(tab.id, {name: name, value: value}, () => null);
             }
         });
     }

ext/js/client.js

@@ -22,6 +22,7 @@ class Client {
         this.popupOffset = 10;
         this.lastMosePos = null;
         this.enabled     = false;
+        this.options     = null;
 
         this.popup = document.createElement('div');
         this.popup.classList.add('yomichan-popup');
@@ -61,8 +62,16 @@ class Client {
         }
     }
 
-    onMessage(request, sender, callback) {
-        this.setEnabled(request === 'enabled');
+    onMessage({name, value}, sender, callback) {
+        switch (name) {
+            case 'state':
+                this.setEnabled(value === 'enabled');
+                break;
+            case 'options':
+                this.setOptions(value);
+                break;
+        }
+
         callback();
     }
 
@@ -117,6 +126,10 @@ class Client {
             this.hidePopup();
         }
     }
+
+    setOptions(opts) {
+        this.options = opts;
+    }
 }
 
 window.yomiClient = new Client();