4 files changed, 49 insertions, 14 deletions
diff --git a/ext/bg/js/options-form.js b/ext/bg/js/options-form.js
index af9c743d..adde147c 100644
--- a/ext/bg/js/options-form.js
+++ b/ext/bg/js/options-form.js
@@ -1,17 +1,17 @@
 /*
  * Copyright (C) 2016  Alex Yatskov <alex@foosoft.net>
  * Author: Alex Yatskov <alex@foosoft.net>
- * 
+ *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License as published by
  * the Free Software Foundation, either version 3 of the License, or
  * (at your option) any later version.
- * 
+ *
  * This program is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  * GNU General Public License for more details.
- * 
+ *
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
@@ -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)));
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 1db3be5e..4c1135d2 100644
--- a/ext/bg/js/options.js
+++ b/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];
     }
 
diff --git a/ext/bg/js/yomichan.js b/ext/bg/js/yomichan.js
index 2e4552a1..5f330e24 100644
--- a/ext/bg/js/yomichan.js
+++ b/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);
             }
         });
     }
diff --git a/ext/js/client.js b/ext/js/client.js
index 2d9a470f..2c513187 100644
--- a/ext/js/client.js
+++ b/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();