handle content script and background script desync on version update

ext/fg/css/frame.css

@@ -119,6 +119,10 @@ hr {
   height:           1px;
 }
 
+#orphan {
+    display: none;
+}
+
 /* term styles */
 
 .term-expression {

ext/fg/frame.html

@@ -10,7 +10,11 @@
             <img src="img/spinner.gif">
         </div>
 
-        <div class="content"></div>
+        <div id="content"></div>
+        <div id="orphan">
+            <h1>Yomichan Updated!</h1>
+            <p>The Yomichan extension has been updated to a new version! In order to continue viewing definitions on this page you must reload this tab or restart your browser.</p>
+        </div>
 
         <script src="../lib/jquery-3.1.1.min.js"></script>
         <script src="js/util.js"></script>

ext/fg/js/driver.js

@@ -33,11 +33,11 @@ class Driver {
         window.addEventListener('mousemove', this.onMouseMove.bind(this));
         window.addEventListener('resize', e => this.searchClear());
 
-        getOptions().then(options => {
+        Promise.all([getOptions(), isEnabled()]).then(([options, enabled]) => {
             this.options = options;
-            return isEnabled();
-        }).then(enabled => {
             this.enabled = enabled;
+        }).catch(error => {
+            this.handleError(error);
         });
     }
 
@@ -119,14 +119,14 @@ class Driver {
         this.pendingLookup = true;
         this.searchTerms(textSource).then(found => {
             if (!found) {
-                this.searchKanji(textSource).then(found => {
+                return this.searchKanji(textSource).then(found => {
                     if (!found && hideNotFound) {
                         this.searchClear();
                     }
                 });
             }
         }).catch(error => {
-            window.alert('Error: ' + error);
+            this.handleError(error, textSource);
         }).then(() => {
             this.pendingLookup = false;
         });
@@ -157,9 +157,6 @@ class Driver {
 
                 return true;
             }
-        }).catch(error => {
-            window.alert('Error: ' + error);
-            return false;
         });
     }
 
@@ -181,9 +178,6 @@ class Driver {
 
                 return true;
             }
-        }).catch(error => {
-            window.alert('Error: ' + error);
-            return false;
         });
     }
 
@@ -197,6 +191,17 @@ class Driver {
         this.lastTextSource = null;
     }
 
+    handleError(error, textSource) {
+        if (window.orphaned) {
+            if (textSource) {
+                this.popup.showNextTo(textSource.getRect());
+                this.popup.showOrphaned();
+            }
+        } else {
+            showError(error);
+        }
+    }
+
     api_setOptions(options) {
         this.options = options;
     }

ext/fg/js/frame.js

@@ -44,7 +44,7 @@ class Frame {
         window.scrollTo(0, 0);
 
         renderText(context, 'terms.html').then(content => {
-            $('.content').html(content);
+            $('#content').html(content);
             $('.action-add-note').click(this.onAddNote.bind(this));
 
             $('.kanji-link').click(e => {
@@ -59,6 +59,8 @@ class Frame {
             });
 
             this.updateAddNoteButtons(['term_kanji', 'term_kana'], sequence);
+        }).catch(error => {
+            this.handleError(error);
         });
     }
 
@@ -74,13 +76,20 @@ class Frame {
         window.scrollTo(0, 0);
 
         renderText(context, 'kanji.html').then(content => {
-            $('.content').html(content);
+            $('#content').html(content);
             $('.action-add-note').click(this.onAddNote.bind(this));
 
             this.updateAddNoteButtons(['kanji'], sequence);
+        }).catch(error => {
+            this.handleError(error);
         });
     }
 
+    api_showOrphaned() {
+        $('#content').hide();
+        $('#orphan').show();
+    }
+
     findAddNoteButton(index, mode) {
         return $(`.action-add-note[data-index="${index}"][data-mode="${mode}"]`);
     }
@@ -98,10 +107,10 @@ class Frame {
                 const button = this.findAddNoteButton(index, mode);
                 button.addClass('disabled');
             } else {
-                window.alert('Note could not be added');
+                showError('note could not be added');
             }
         }).catch(error => {
-            window.alert('Error: ' + error);
+            this.handleError(error);
         }).then(() => {
             this.showSpinner(false);
         });
@@ -129,6 +138,8 @@ class Frame {
                     button.removeClass('pending');
                 }
             });
+        }).catch(error => {
+            this.handleError(error);
         });
     }
 
@@ -155,6 +166,14 @@ class Frame {
         audio.currentTime = 0;
         audio.play();
     }
+
+    handleError(error) {
+        if (window.orphaned) {
+            this.api_showOrphaned();
+        } else {
+            showError(error);
+        }
+    }
 }
 
 window.frame = new Frame();

ext/fg/js/popup.js

@@ -76,7 +76,11 @@ class Popup {
         this.invokeApi('showKanjiDefs', {definitions, options});
     }
 
-    invokeApi(action, params) {
+    showOrphaned() {
+        this.invokeApi('showOrphaned');
+    }
+
+    invokeApi(action, params={}) {
         this.container.contentWindow.postMessage({action, params}, '*');
     }
 }

ext/fg/js/util.js

@@ -19,16 +19,25 @@
 
 function invokeBgApi(action, params) {
     return new Promise((resolve, reject) => {
-        chrome.runtime.sendMessage({action, params}, ({result, error}) => {
-            if (error) {
-                reject(error);
-            } else {
-                resolve(result);
-            }
-        });
+        try {
+            chrome.runtime.sendMessage({action, params}, ({result, error}) => {
+                if (error) {
+                    reject(error);
+                } else {
+                    resolve(result);
+                }
+            });
+        } catch (e) {
+            window.orphaned = true;
+            reject(e.message);
+        }
     });
 }
 
+function showError(error) {
+    window.alert(`Error: ${error}`);
+}
+
 function isEnabled() {
     return invokeBgApi('getEnabled', {});
 }

ext/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 2,
     "name": "Yomichan",
-    "version": "1.0.8",
+    "version": "1.0.9",
 
     "description": "Japanese dictionary with Anki integration",
     "icons": {"16": "img/icon16.png", "48": "img/icon48.png", "128": "img/icon128.png"},