4 files changed, 27 insertions, 15 deletions
diff --git a/ext/bg/background.html b/ext/bg/background.html
index 6e917561..9f07ef6e 100644
--- a/ext/bg/background.html
+++ b/ext/bg/background.html
@@ -7,6 +7,7 @@
     <script src="js/dictionary.js"></script>
     <script src="js/deinflector.js"></script>
     <script src="js/translator.js"></script>
+    <script src="js/options.js"></script>
     <script src="js/yomichan.js"></script>
 </body>
 </html>
diff --git a/ext/bg/js/yomichan.js b/ext/bg/js/yomichan.js
index 5f330e24..fe7007eb 100644
--- a/ext/bg/js/yomichan.js
+++ b/ext/bg/js/yomichan.js
@@ -23,24 +23,26 @@ 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);
 
-        loadOptions((opts) => this.updateOptions(opts));
+            chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
+            chrome.browserAction.onClicked.addListener(this.onBrowserAction.bind(this));
+        });
     }
 
     onMessage(request, sender, callback) {
         const {action, data} = request;
-        const handler = {
-            findKanji:      ({text}) => this.translator.onFindKanji(text),
-            findTerm:       ({text}) => this.translator.findTerm(text),
-            getState:       () => this.state,
-            renderTemplate: ({data, template}) => Handlebars.templates[template](data)
-        }[action];
+        const handlers = {
+            findKanji:  ({text}) => this.translator.onFindKanji(text),
+            findTerm:   ({text}) => this.translator.findTerm(text),
+            getState:   () => this.state,
+            getOptions: () => this.options,
+            renderText: ({data, template}) => Handlebars.templates[template](data)
+        };
 
-        const result = handler.call(this, data);
+        const result = handlers[action].call(this, data);
         if (callback !== null) {
             callback(result);
         }
diff --git a/ext/js/api.js b/ext/js/api.js
index 7f552a1e..c65b1702 100644
--- a/ext/js/api.js
+++ b/ext/js/api.js
@@ -29,8 +29,12 @@ function findKanji(text, callback) {
     sendMessage('findKanji', {text: text}, callback);
 }
 
-function renderTemplate(data, template, callback) {
-    sendMessage('renderTemplate', {data: data, template: template}, callback);
+function renderText(data, template, callback) {
+    sendMessage('renderText', {data: data, template: template}, callback);
+}
+
+function getOptions(callback) {
+    sendMessage('getOptions', null, callback);
 }
 
 function getState(callback) {
diff --git a/ext/js/client.js b/ext/js/client.js
index 2c513187..3c75068c 100644
--- a/ext/js/client.js
+++ b/ext/js/client.js
@@ -37,7 +37,12 @@ class Client {
         window.addEventListener('scroll', (e) => this.hidePopup());
         window.addEventListener('resize', (e) => this.hidePopup());
 
-        getState((state) => this.setEnabled(state === 'enabled'));
+        getOptions((opts) => {
+            this.setOptions(opts);
+            getState((state) => {
+                this.setEnabled(state === 'enabled');
+            });
+        });
     }
 
     onKeyDown(e) {
@@ -93,7 +98,7 @@ class Client {
                 this.hidePopup();
             } else {
                 range.setEnd(range.endContainer, range.startOffset + length);
-                renderTemplate({defs: results}, 'defs.html', (html) => {
+                renderText({defs: results}, 'defs.html', (html) => {
                     this.popup.innerHTML = html;
                     this.showPopup(range);
                 });