Generalized frame connections (#654)

* Create FrameClient and FrameEndpoint

* Use new Frame* classes for Popup=>frame connection

* Update api.sendMessageToFrame and api.broadcastTab to include the sender's frameId

* Update FrameClient to store the frame's frameId

3 files changed, 21 insertions, 158 deletions

diff --git a/ext/fg/float.html b/ext/fg/float.html
index a13244ee..9e0e9ff4 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -54,6 +54,7 @@
         <script src="/mixed/js/display.js"></script>
         <script src="/mixed/js/display-generator.js"></script>
         <script src="/mixed/js/dynamic-loader.js"></script>
+        <script src="/mixed/js/frame-endpoint.js"></script>
         <script src="/mixed/js/media-loader.js"></script>
         <script src="/mixed/js/scroll.js"></script>
         <script src="/mixed/js/template-handler.js"></script>
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index 2837f748..17af03d3 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -17,6 +17,7 @@
 
 /* global
  * Display
+ * FrameEndpoint
  * Frontend
  * PopupFactory
  * api
@@ -27,12 +28,10 @@ class DisplayFloat extends Display {
     constructor() {
         super(document.querySelector('#spinner'), document.querySelector('#definitions'));
         this._autoPlayAudioTimer = null;
-        this._secret = yomichan.generateId(16);
-        this._token = null;
         this._nestedPopupsPrepared = false;
         this._ownerFrameId = null;
+        this._frameEndpoint = new FrameEndpoint();
         this._windowMessageHandlers = new Map([
-            ['initialize',         {handler: this._onMessageInitialize.bind(this), authenticate: false}],
             ['configure',          {handler: this._onMessageConfigure.bind(this)}],
             ['setOptionsContext',  {handler: this._onMessageSetOptionsContext.bind(this)}],
             ['setContent',         {handler: this._onMessageSetContent.bind(this)}],
@@ -57,7 +56,7 @@ class DisplayFloat extends Display {
 
         window.addEventListener('message', this._onMessage.bind(this), false);
 
-        api.broadcastTab('popupPrepared', {secret: this._secret});
+        this._frameEndpoint.signal();
     }
 
     onEscape() {
@@ -104,7 +103,10 @@ class DisplayFloat extends Display {
     // Message handling
 
     _onMessage(e) {
-        const data = e.data;
+        let data = e.data;
+        if (!this._frameEndpoint.authenticate(data)) { return; }
+        data = data.data;
+
         if (typeof data !== 'object' || data === null) {
             this._logMessageError(e, 'Invalid data');
             return;
@@ -122,19 +124,10 @@ class DisplayFloat extends Display {
             return;
         }
 
-        if (handlerInfo.authenticate !== false && !this._isMessageAuthenticated(data)) {
-            this._logMessageError(e, 'Invalid authentication');
-            return;
-        }
-
         const handler = handlerInfo.handler;
         handler(data.params);
     }
 
-    _onMessageInitialize(params) {
-        this._initialize(params);
-    }
-
     async _onMessageConfigure({messageId, frameId, ownerFrameId, popupId, optionsContext, childrenSupported, scale}) {
         this._ownerFrameId = ownerFrameId;
         this.setOptionsContext(optionsContext);
@@ -195,27 +188,6 @@ class DisplayFloat extends Display {
         yomichan.logWarning(new Error(`Popup received invalid message from origin ${JSON.stringify(event.origin)}: ${type}`));
     }
 
-    _initialize(params) {
-        if (this._token !== null) { return; } // Already initialized
-        if (!isObject(params)) { return; } // Invalid data
-
-        const secret = params.secret;
-        if (secret !== this._secret) { return; } // Invalid authentication
-
-        const {token, frameId} = params;
-        this._token = token;
-
-        api.sendMessageToFrame(frameId, 'popupInitialized', {secret, token});
-    }
-
-    _isMessageAuthenticated(message) {
-        return (
-            this._token !== null &&
-            this._token === message.token &&
-            this._secret === message.secret
-        );
-    }
-
     async _prepareNestedPopups(id, depth, parentFrameId, url) {
         let complete = false;
 
@@ -243,6 +215,7 @@ class DisplayFloat extends Display {
     async _setupNestedPopups(id, depth, parentFrameId, url) {
         await dynamicLoader.loadScripts([
             '/mixed/js/text-scanner.js',
+            '/mixed/js/frame-client.js',
             '/fg/js/popup.js',
             '/fg/js/popup-proxy.js',
             '/fg/js/popup-factory.js',
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index a856d773..78561de3 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -17,6 +17,7 @@
 
 /* global
  * DOM
+ * FrameClient
  * api
  * dynamicLoader
  */
@@ -41,8 +42,7 @@ class Popup {
         this._previousOptionsContextSource = null;
 
         this._frameSizeContentScale = null;
-        this._frameSecret = null;
-        this._frameToken = null;
+        this._frameClient = null;
         this._frame = document.createElement('iframe');
         this._frame.className = 'yomichan-float';
         this._frame.style.width = '0';
@@ -230,117 +230,6 @@ class Popup {
         return injectPromise;
     }
 
-    _initializeFrame(frame, targetOrigin, frameId, setupFrame, timeout=10000) {
-        return new Promise((resolve, reject) => {
-            const tokenMap = new Map();
-            let timer = null;
-            let {
-                promise: frameLoadedPromise,
-                resolve: frameLoadedResolve,
-                reject: frameLoadedReject
-            } = deferPromise();
-
-            const postMessage = (action, params) => {
-                const contentWindow = frame.contentWindow;
-                if (contentWindow === null) { throw new Error('Frame missing content window'); }
-
-                let validOrigin = true;
-                try {
-                    validOrigin = (contentWindow.location.origin === targetOrigin);
-                } catch (e) {
-                    // NOP
-                }
-                if (!validOrigin) { throw new Error('Unexpected frame origin'); }
-
-                contentWindow.postMessage({action, params}, targetOrigin);
-            };
-
-            const onMessage = (message) => {
-                onMessageInner(message);
-                return false;
-            };
-
-            const onMessageInner = async (message) => {
-                try {
-                    if (!isObject(message)) { return; }
-                    const {action, params} = message;
-                    if (!isObject(params)) { return; }
-                    await frameLoadedPromise;
-                    if (timer === null) { return; } // Done
-
-                    switch (action) {
-                        case 'popupPrepared':
-                            {
-                                const {secret} = params;
-                                const token = yomichan.generateId(16);
-                                tokenMap.set(secret, token);
-                                postMessage('initialize', {secret, token, frameId});
-                            }
-                            break;
-                        case 'popupInitialized':
-                            {
-                                const {secret, token} = params;
-                                const token2 = tokenMap.get(secret);
-                                if (typeof token2 !== 'undefined' && token === token2) {
-                                    cleanup();
-                                    resolve({secret, token});
-                                }
-                            }
-                            break;
-                    }
-                } catch (e) {
-                    cleanup();
-                    reject(e);
-                }
-            };
-
-            const onLoad = () => {
-                if (frameLoadedResolve === null) {
-                    cleanup();
-                    reject(new Error('Unexpected load event'));
-                    return;
-                }
-
-                if (Popup.isFrameAboutBlank(frame)) {
-                    return;
-                }
-
-                frameLoadedResolve();
-                frameLoadedResolve = null;
-                frameLoadedReject = null;
-            };
-
-            const cleanup = () => {
-                if (timer === null) { return; } // Done
-                clearTimeout(timer);
-                timer = null;
-
-                frameLoadedResolve = null;
-                if (frameLoadedReject !== null) {
-                    frameLoadedReject(new Error('Terminated'));
-                    frameLoadedReject = null;
-                }
-
-                chrome.runtime.onMessage.removeListener(onMessage);
-                frame.removeEventListener('load', onLoad);
-            };
-
-            // Start
-            timer = setTimeout(() => {
-                cleanup();
-                reject(new Error('Timeout'));
-            }, timeout);
-
-            chrome.runtime.onMessage.addListener(onMessage);
-            frame.addEventListener('load', onLoad);
-
-            // Prevent unhandled rejections
-            frameLoadedPromise.catch(() => {}); // NOP
-
-            setupFrame(frame);
-        });
-    }
-
     async _createInjectPromise() {
         if (this._options === null) {
             throw new Error('Options not initialized');
@@ -350,7 +239,7 @@ class Popup {
 
         await this._setUpContainer(usePopupShadowDom);
 
-        const {secret, token} = await this._initializeFrame(this._frame, this._targetOrigin, this._frameId, (frame) => {
+        const setupFrame = (frame) => {
             frame.removeAttribute('src');
             frame.removeAttribute('srcdoc');
             this._observeFullscreen(true);
@@ -361,9 +250,11 @@ class Popup {
             } else {
                 frame.setAttribute('src', url);
             }
-        });
-        this._frameSecret = secret;
-        this._frameToken = token;
+        };
+
+        const frameClient = new FrameClient();
+        this._frameClient = frameClient;
+        await frameClient.connect(this._frame, this._targetOrigin, this._frameId, setupFrame);
 
         // Configure
         const messageId = yomichan.generateId(16);
@@ -406,8 +297,7 @@ class Popup {
         this._frame.removeAttribute('src');
         this._frame.removeAttribute('srcdoc');
 
-        this._frameSecret = null;
-        this._frameToken = null;
+        this._frameClient = null;
         this._injectPromise = null;
         this._injectPromiseComplete = false;
     }
@@ -567,12 +457,11 @@ class Popup {
     }
 
     _invokeApi(action, params={}) {
-        const secret = this._frameSecret;
-        const token = this._frameToken;
         const contentWindow = this._frame.contentWindow;
-        if (secret === null || token === null || contentWindow === null) { return; }
+        if (this._frameClient === null || !this._frameClient.isConnected() || contentWindow === null) { return; }
 
-        contentWindow.postMessage({action, params, secret, token}, this._targetOrigin);
+        const message = this._frameClient.createMessage({action, params});
+        contentWindow.postMessage(message, this._targetOrigin);
     }
 
     _getFrameParentElement() {