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

ext/bg/js/backend.js

@@ -538,14 +538,15 @@ class Backend {
         });
     }
 
-    _onApiSendMessageToFrame({frameId, action, params}, sender) {
+    _onApiSendMessageToFrame({frameId: targetFrameId, action, params}, sender) {
         if (!(sender && sender.tab)) {
             return false;
         }
 
         const tabId = sender.tab.id;
+        const frameId = sender.frameId;
         const callback = () => this._checkLastError(chrome.runtime.lastError);
-        chrome.tabs.sendMessage(tabId, {action, params}, {frameId}, callback);
+        chrome.tabs.sendMessage(tabId, {action, params, frameId}, {frameId: targetFrameId}, callback);
         return true;
     }
 
@@ -555,8 +556,9 @@ class Backend {
         }
 
         const tabId = sender.tab.id;
+        const frameId = sender.frameId;
         const callback = () => this._checkLastError(chrome.runtime.lastError);
-        chrome.tabs.sendMessage(tabId, {action, params}, callback);
+        chrome.tabs.sendMessage(tabId, {action, params, frameId}, callback);
         return true;
     }
 

ext/bg/js/search.js

@@ -424,6 +424,7 @@ class DisplaySearch extends Display {
     async _setupNestedPopups() {
         await dynamicLoader.loadScripts([
             '/mixed/js/text-scanner.js',
+            '/mixed/js/frame-client.js',
             '/fg/js/frame-offset-forwarder.js',
             '/fg/js/popup.js',
             '/fg/js/popup-factory.js',

ext/bg/settings-popup-preview.html

@@ -124,6 +124,7 @@
         <script src="/mixed/js/dom.js"></script>
         <script src="/mixed/js/api.js"></script>
         <script src="/mixed/js/dynamic-loader.js"></script>
+        <script src="/mixed/js/frame-client.js"></script>
         <script src="/mixed/js/text-scanner.js"></script>
 
         <script src="/fg/js/document.js"></script>

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>

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',

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._frameClient = null;
-        this._frameToken = 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._frameClient = null;
-        this._frameToken = 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() {

ext/manifest.json

@@ -41,6 +41,7 @@
             "mixed/js/dom.js",
             "mixed/js/api.js",
             "mixed/js/dynamic-loader.js",
+            "mixed/js/frame-client.js",
             "mixed/js/text-scanner.js",
             "fg/js/document.js",
             "fg/js/dom-text-scanner.js",

ext/mixed/js/frame-client.js

@@ -0,0 +1,173 @@
+/*
+ * Copyright (C) 2020  Yomichan Authors
+ *
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+class FrameClient {
+    constructor() {
+        this._secret = null;
+        this._token = null;
+        this._frameId = null;
+    }
+
+    get frameId() {
+        return this._frameId;
+    }
+
+    async connect(frame, targetOrigin, hostFrameId, setupFrame, timeout=10000) {
+        const {secret, token, frameId} = await this._connectIternal(frame, targetOrigin, hostFrameId, setupFrame, timeout);
+        this._secret = secret;
+        this._token = token;
+        this._frameId = frameId;
+    }
+
+    isConnected() {
+        return (this._secret !== null);
+    }
+
+    createMessage(data) {
+        if (!this.isConnected()) {
+            throw new Error('Not connected');
+        }
+        return {
+            token: this._token,
+            secret: this._secret,
+            data
+        };
+    }
+
+    _connectIternal(frame, targetOrigin, hostFrameId, setupFrame, timeout) {
+        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 'frameEndpointReady':
+                            {
+                                const {secret} = params;
+                                const token = yomichan.generateId(16);
+                                tokenMap.set(secret, token);
+                                postMessage('frameEndpointConnect', {secret, token, hostFrameId});
+                            }
+                            break;
+                        case 'frameEndpointConnected':
+                            {
+                                const {secret, token} = params;
+                                const frameId = message.frameId;
+                                const token2 = tokenMap.get(secret);
+                                if (typeof token2 !== 'undefined' && token === token2) {
+                                    cleanup();
+                                    resolve({secret, token, frameId});
+                                }
+                            }
+                            break;
+                    }
+                } catch (e) {
+                    cleanup();
+                    reject(e);
+                }
+            };
+
+            const onLoad = () => {
+                if (frameLoadedResolve === null) {
+                    cleanup();
+                    reject(new Error('Unexpected load event'));
+                    return;
+                }
+
+                if (FrameClient.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);
+        });
+    }
+
+    static isFrameAboutBlank(frame) {
+        try {
+            const contentDocument = frame.contentDocument;
+            if (contentDocument === null) { return false; }
+            const url = contentDocument.location.href;
+            return /^about:blank(?:[#?]|$)/.test(url);
+        } catch (e) {
+            return false;
+        }
+    }
+}

ext/mixed/js/frame-endpoint.js

@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2020  Yomichan Authors
+ *
+ * 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 <https://www.gnu.org/licenses/>.
+ */
+
+/* global
+ * api
+ */
+
+class FrameEndpoint {
+    constructor() {
+        this._secret = yomichan.generateId(16);
+        this._token = null;
+        this._eventListeners = new EventListenerCollection();
+        this._eventListenersSetup = false;
+    }
+
+    signal() {
+        if (!this._eventListenersSetup) {
+            this._eventListeners.addEventListener(window, 'message', this._onMessage.bind(this), false);
+            this._eventListenersSetup = true;
+        }
+        api.broadcastTab('frameEndpointReady', {secret: this._secret});
+    }
+
+    authenticate(message) {
+        return (
+            this._token !== null &&
+            isObject(message) &&
+            this._token === message.token &&
+            this._secret === message.secret
+        );
+    }
+
+    _onMessage(e) {
+        if (this._token !== null) { return; } // Already initialized
+
+        const data = e.data;
+        if (!isObject(data) || data.action !== 'frameEndpointConnect') { return; } // Invalid message
+
+        const params = data.params;
+        if (!isObject(params)) { return; } // Invalid data
+
+        const secret = params.secret;
+        if (secret !== this._secret) { return; } // Invalid authentication
+
+        const {token, hostFrameId} = params;
+        this._token = token;
+
+        this._eventListeners.removeAllEventListeners();
+        api.sendMessageToFrame(hostFrameId, 'frameEndpointConnected', {secret, token});
+    }
+}