Move mixed/js (#1383)

* Move mixed/js/core.js to js/core.js

* Move mixed/js/yomichan.js to js/yomichan.js

* Move mixed/js/timer.js to js/debug/timer.js

* Move mixed/js/hotkey-handler.js to js/input/hotkey-handler.js

* Move mixed/js/hotkey-help-controller.js to js/input/hotkey-help-controller.js

* Move mixed/js/hotkey-util.js to js/input/hotkey-util.js

* Move mixed/js/audio-system.js to js/input/audio-system.js

* Move mixed/js/media-loader.js to js/input/media-loader.js

* Move mixed/js/text-to-speech-audio.js to js/input/text-to-speech-audio.js

* Move mixed/js/comm.js to js/comm/cross-frame-api.js

* Move mixed/js/api.js to js/comm/api.js

* Move mixed/js/frame-client.js to js/comm/frame-client.js

* Move mixed/js/frame-endpoint.js to js/comm/frame-endpoint.js

* Move mixed/js/display.js to js/display/display.js

* Move mixed/js/display-audio.js to js/display/display-audio.js

* Move mixed/js/display-generator.js to js/display/display-generator.js

* Move mixed/js/display-history.js to js/display/display-history.js

* Move mixed/js/display-notification.js to js/display/display-notification.js

* Move mixed/js/display-profile-selection.js to js/display/display-profile-selection.js

* Move mixed/js/japanese.js to js/language/japanese-util.js

* Move mixed/js/dictionary-data-util.js to js/language/dictionary-data-util.js

* Move mixed/js/document-focus-controller.js to js/dom/document-focus-controller.js

* Move mixed/js/document-util.js to js/dom/document-util.js

* Move mixed/js/dom-data-binder.js to js/dom/dom-data-binder.js

* Move mixed/js/html-template-collection.js to js/dom/html-template-collection.js

* Move mixed/js/panel-element.js to js/dom/panel-element.js

* Move mixed/js/popup-menu.js to js/dom/popup-menu.js

* Move mixed/js/selector-observer.js to js/dom/selector-observer.js

* Move mixed/js/scroll.js to js/dom/window-scroll.js

* Move mixed/js/text-scanner.js to js/language/text-scanner.js

* Move mixed/js/cache-map.js to js/general/cache-map.js

* Move mixed/js/object-property-accessor.js to js/general/object-property-accessor.js

* Move mixed/js/task-accumulator.js to js/general/task-accumulator.js

* Move mixed/js/environment.js to js/background/environment.js

* Move mixed/js/dynamic-loader.js to js/scripting/dynamic-loader.js

* Move mixed/js/dynamic-loader-sentinel.js to js/scripting/dynamic-loader-sentinel.js

4 files changed, 899 insertions, 0 deletions

diff --git a/ext/js/comm/api.js b/ext/js/comm/api.js
new file mode 100644
index 00000000..d37b091a
--- /dev/null
+++ b/ext/js/comm/api.js
@@ -0,0 +1,340 @@
+/*
+ * Copyright (C) 2016-2021  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
+ * CrossFrameAPI
+ */
+
+const api = (() => {
+    class API {
+        constructor() {
+            this._forwardLogsToBackendEnabled = false;
+            this._crossFrame = new CrossFrameAPI();
+        }
+
+        get crossFrame() {
+            return this._crossFrame;
+        }
+
+        prepare() {
+            this._crossFrame.prepare();
+        }
+
+        forwardLogsToBackend() {
+            if (this._forwardLogsToBackendEnabled) { return; }
+            this._forwardLogsToBackendEnabled = true;
+
+            yomichan.on('log', async ({error, level, context}) => {
+                try {
+                    await this.log(serializeError(error), level, context);
+                } catch (e) {
+                    // NOP
+                }
+            });
+        }
+
+        // Invoke functions
+
+        optionsGet(optionsContext) {
+            return this._invoke('optionsGet', {optionsContext});
+        }
+
+        optionsGetFull() {
+            return this._invoke('optionsGetFull');
+        }
+
+        termsFind(text, details, optionsContext) {
+            return this._invoke('termsFind', {text, details, optionsContext});
+        }
+
+        textParse(text, optionsContext) {
+            return this._invoke('textParse', {text, optionsContext});
+        }
+
+        kanjiFind(text, optionsContext) {
+            return this._invoke('kanjiFind', {text, optionsContext});
+        }
+
+        isAnkiConnected() {
+            return this._invoke('isAnkiConnected');
+        }
+
+        getAnkiConnectVersion() {
+            return this._invoke('getAnkiConnectVersion');
+        }
+
+        addAnkiNote(note) {
+            return this._invoke('addAnkiNote', {note});
+        }
+
+        getAnkiNoteInfo(notes) {
+            return this._invoke('getAnkiNoteInfo', {notes});
+        }
+
+        injectAnkiNoteMedia(timestamp, definitionDetails, audioDetails, screenshotDetails, clipboardDetails) {
+            return this._invoke('injectAnkiNoteMedia', {timestamp, definitionDetails, audioDetails, screenshotDetails, clipboardDetails});
+        }
+
+        noteView(noteId) {
+            return this._invoke('noteView', {noteId});
+        }
+
+        suspendAnkiCardsForNote(noteId) {
+            return this._invoke('suspendAnkiCardsForNote', {noteId});
+        }
+
+        getExpressionAudioInfoList(source, expression, reading, details) {
+            return this._invoke('getExpressionAudioInfoList', {source, expression, reading, details});
+        }
+
+        commandExec(command, params) {
+            return this._invoke('commandExec', {command, params});
+        }
+
+        sendMessageToFrame(frameId, action, params) {
+            return this._invoke('sendMessageToFrame', {frameId, action, params});
+        }
+
+        broadcastTab(action, params) {
+            return this._invoke('broadcastTab', {action, params});
+        }
+
+        frameInformationGet() {
+            return this._invoke('frameInformationGet');
+        }
+
+        injectStylesheet(type, value) {
+            return this._invoke('injectStylesheet', {type, value});
+        }
+
+        getStylesheetContent(url) {
+            return this._invoke('getStylesheetContent', {url});
+        }
+
+        getEnvironmentInfo() {
+            return this._invoke('getEnvironmentInfo');
+        }
+
+        clipboardGet() {
+            return this._invoke('clipboardGet');
+        }
+
+        getDisplayTemplatesHtml() {
+            return this._invoke('getDisplayTemplatesHtml');
+        }
+
+        getZoom() {
+            return this._invoke('getZoom');
+        }
+
+        getDefaultAnkiFieldTemplates() {
+            return this._invoke('getDefaultAnkiFieldTemplates');
+        }
+
+        getDictionaryInfo() {
+            return this._invoke('getDictionaryInfo');
+        }
+
+        getDictionaryCounts(dictionaryNames, getTotal) {
+            return this._invoke('getDictionaryCounts', {dictionaryNames, getTotal});
+        }
+
+        purgeDatabase() {
+            return this._invoke('purgeDatabase');
+        }
+
+        getMedia(targets) {
+            return this._invoke('getMedia', {targets});
+        }
+
+        log(error, level, context) {
+            return this._invoke('log', {error, level, context});
+        }
+
+        logIndicatorClear() {
+            return this._invoke('logIndicatorClear');
+        }
+
+        modifySettings(targets, source) {
+            return this._invoke('modifySettings', {targets, source});
+        }
+
+        getSettings(targets) {
+            return this._invoke('getSettings', {targets});
+        }
+
+        setAllSettings(value, source) {
+            return this._invoke('setAllSettings', {value, source});
+        }
+
+        getOrCreateSearchPopup(details) {
+            return this._invoke('getOrCreateSearchPopup', isObject(details) ? details : {});
+        }
+
+        isTabSearchPopup(tabId) {
+            return this._invoke('isTabSearchPopup', {tabId});
+        }
+
+        triggerDatabaseUpdated(type, cause) {
+            return this._invoke('triggerDatabaseUpdated', {type, cause});
+        }
+
+        testMecab() {
+            return this._invoke('testMecab', {});
+        }
+
+        // Utilities
+
+        _createActionPort(timeout=5000) {
+            return new Promise((resolve, reject) => {
+                let timer = null;
+                const portDetails = deferPromise();
+
+                const onConnect = async (port) => {
+                    try {
+                        const {name: expectedName, id: expectedId} = await portDetails.promise;
+                        const {name, id} = JSON.parse(port.name);
+                        if (name !== expectedName || id !== expectedId || timer === null) { return; }
+                    } catch (e) {
+                        return;
+                    }
+
+                    clearTimeout(timer);
+                    timer = null;
+
+                    chrome.runtime.onConnect.removeListener(onConnect);
+                    resolve(port);
+                };
+
+                const onError = (e) => {
+                    if (timer !== null) {
+                        clearTimeout(timer);
+                        timer = null;
+                    }
+                    chrome.runtime.onConnect.removeListener(onConnect);
+                    portDetails.reject(e);
+                    reject(e);
+                };
+
+                timer = setTimeout(() => onError(new Error('Timeout')), timeout);
+
+                chrome.runtime.onConnect.addListener(onConnect);
+                this._invoke('createActionPort').then(portDetails.resolve, onError);
+            });
+        }
+
+        _invokeWithProgress(action, params, onProgress, timeout=5000) {
+            return new Promise((resolve, reject) => {
+                let port = null;
+
+                if (typeof onProgress !== 'function') {
+                    onProgress = () => {};
+                }
+
+                const onMessage = (message) => {
+                    switch (message.type) {
+                        case 'progress':
+                            try {
+                                onProgress(...message.data);
+                            } catch (e) {
+                                // NOP
+                            }
+                            break;
+                        case 'complete':
+                            cleanup();
+                            resolve(message.data);
+                            break;
+                        case 'error':
+                            cleanup();
+                            reject(deserializeError(message.data));
+                            break;
+                    }
+                };
+
+                const onDisconnect = () => {
+                    cleanup();
+                    reject(new Error('Disconnected'));
+                };
+
+                const cleanup = () => {
+                    if (port !== null) {
+                        port.onMessage.removeListener(onMessage);
+                        port.onDisconnect.removeListener(onDisconnect);
+                        port.disconnect();
+                        port = null;
+                    }
+                    onProgress = null;
+                };
+
+                (async () => {
+                    try {
+                        port = await this._createActionPort(timeout);
+                        port.onMessage.addListener(onMessage);
+                        port.onDisconnect.addListener(onDisconnect);
+
+                        // Chrome has a maximum message size that can be sent, so longer messages must be fragmented.
+                        const messageString = JSON.stringify({action, params});
+                        const fragmentSize = 1e7; // 10 MB
+                        for (let i = 0, ii = messageString.length; i < ii; i += fragmentSize) {
+                            const data = messageString.substring(i, i + fragmentSize);
+                            port.postMessage({action: 'fragment', data});
+                        }
+                        port.postMessage({action: 'invoke'});
+                    } catch (e) {
+                        cleanup();
+                        reject(e);
+                    } finally {
+                        action = null;
+                        params = null;
+                    }
+                })();
+            });
+        }
+
+        _invoke(action, params={}) {
+            const data = {action, params};
+            return new Promise((resolve, reject) => {
+                try {
+                    yomichan.sendMessage(data, (response) => {
+                        this._checkLastError(chrome.runtime.lastError);
+                        if (response !== null && typeof response === 'object') {
+                            if (typeof response.error !== 'undefined') {
+                                reject(deserializeError(response.error));
+                            } else {
+                                resolve(response.result);
+                            }
+                        } else {
+                            const message = response === null ? 'Unexpected null response' : `Unexpected response of type ${typeof response}`;
+                            reject(new Error(`${message} (${JSON.stringify(data)})`));
+                        }
+                    });
+                } catch (e) {
+                    reject(e);
+                }
+            });
+        }
+
+        _checkLastError() {
+            // NOP
+        }
+    }
+
+    // eslint-disable-next-line no-shadow
+    const api = new API();
+    api.prepare();
+    return api;
+})();
diff --git a/ext/js/comm/cross-frame-api.js b/ext/js/comm/cross-frame-api.js
new file mode 100644
index 00000000..997249c8
--- /dev/null
+++ b/ext/js/comm/cross-frame-api.js
@@ -0,0 +1,321 @@
+/*
+ * Copyright (C) 2020-2021  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 CrossFrameAPIPort extends EventDispatcher {
+    constructor(otherTabId, otherFrameId, port, messageHandlers) {
+        super();
+        this._otherTabId = otherTabId;
+        this._otherFrameId = otherFrameId;
+        this._port = port;
+        this._messageHandlers = messageHandlers;
+        this._activeInvocations = new Map();
+        this._invocationId = 0;
+        this._eventListeners = new EventListenerCollection();
+    }
+
+    get otherTabId() {
+        return this._otherTabId;
+    }
+
+    get otherFrameId() {
+        return this._otherFrameId;
+    }
+
+    prepare() {
+        this._eventListeners.addListener(this._port.onDisconnect, this._onDisconnect.bind(this));
+        this._eventListeners.addListener(this._port.onMessage, this._onMessage.bind(this));
+    }
+
+    invoke(action, params, ackTimeout, responseTimeout) {
+        return new Promise((resolve, reject) => {
+            if (this._port === null) {
+                reject(new Error(`Port is disconnected (${action})`));
+                return;
+            }
+
+            const id = this._invocationId++;
+            const invocation = {
+                id,
+                resolve,
+                reject,
+                responseTimeout,
+                action,
+                ack: false,
+                timer: null
+            };
+            this._activeInvocations.set(id, invocation);
+
+            if (ackTimeout !== null) {
+                try {
+                    invocation.timer = setTimeout(() => this._onError(id, 'Acknowledgement timeout'), ackTimeout);
+                } catch (e) {
+                    this._onError(id, 'Failed to set timeout');
+                    return;
+                }
+            }
+
+            try {
+                this._port.postMessage({type: 'invoke', id, data: {action, params}});
+            } catch (e) {
+                this._onError(id, e);
+            }
+        });
+    }
+
+    disconnect() {
+        this._onDisconnect();
+    }
+
+    // Private
+
+    _onDisconnect() {
+        if (this._port === null) { return; }
+        this._eventListeners.removeAllEventListeners();
+        this._port = null;
+        for (const id of this._activeInvocations.keys()) {
+            this._onError(id, 'Disconnected');
+        }
+        this.trigger('disconnect', this);
+    }
+
+    _onMessage({type, id, data}) {
+        switch (type) {
+            case 'invoke':
+                this._onInvoke(id, data);
+                break;
+            case 'ack':
+                this._onAck(id);
+                break;
+            case 'result':
+                this._onResult(id, data);
+                break;
+        }
+    }
+
+    // Response handlers
+
+    _onAck(id) {
+        const invocation = this._activeInvocations.get(id);
+        if (typeof invocation === 'undefined') {
+            yomichan.logWarning(new Error(`Request ${id} not found for acknowledgement`));
+            return;
+        }
+
+        if (invocation.ack) {
+            this._onError(id, `Request ${id} already acknowledged`);
+            return;
+        }
+
+        invocation.ack = true;
+
+        if (invocation.timer !== null) {
+            clearTimeout(invocation.timer);
+            invocation.timer = null;
+        }
+
+        const responseTimeout = invocation.responseTimeout;
+        if (responseTimeout !== null) {
+            try {
+                invocation.timer = setTimeout(() => this._onError(id, 'Response timeout'), responseTimeout);
+            } catch (e) {
+                this._onError(id, 'Failed to set timeout');
+            }
+        }
+    }
+
+    _onResult(id, data) {
+        const invocation = this._activeInvocations.get(id);
+        if (typeof invocation === 'undefined') {
+            yomichan.logWarning(new Error(`Request ${id} not found`));
+            return;
+        }
+
+        if (!invocation.ack) {
+            this._onError(id, `Request ${id} not acknowledged`);
+            return;
+        }
+
+        this._activeInvocations.delete(id);
+
+        if (invocation.timer !== null) {
+            clearTimeout(invocation.timer);
+            invocation.timer = null;
+        }
+
+        const error = data.error;
+        if (typeof error !== 'undefined') {
+            invocation.reject(deserializeError(error));
+        } else {
+            invocation.resolve(data.result);
+        }
+    }
+
+    _onError(id, error) {
+        const invocation = this._activeInvocations.get(id);
+        if (typeof invocation === 'undefined') { return; }
+
+        if (typeof error === 'string') {
+            error = new Error(`${error} (${invocation.action})`);
+        }
+
+        this._activeInvocations.delete(id);
+        if (invocation.timer !== null) {
+            clearTimeout(invocation.timer);
+            invocation.timer = null;
+        }
+        invocation.reject(error);
+    }
+
+    // Invocation
+
+    _onInvoke(id, {action, params}) {
+        const messageHandler = this._messageHandlers.get(action);
+        this._sendAck(id);
+        if (typeof messageHandler === 'undefined') {
+            this._sendError(id, new Error(`Unknown action: ${action}`));
+            return false;
+        }
+
+        const callback = (data) => this._sendResult(id, data);
+        return yomichan.invokeMessageHandler(messageHandler, params, callback);
+    }
+
+    _sendResponse(data) {
+        if (this._port === null) { return; }
+        try {
+            this._port.postMessage(data);
+        } catch (e) {
+            // NOP
+        }
+    }
+
+    _sendAck(id) {
+        this._sendResponse({type: 'ack', id});
+    }
+
+    _sendResult(id, data) {
+        this._sendResponse({type: 'result', id, data});
+    }
+
+    _sendError(id, error) {
+        this._sendResponse({type: 'result', id, data: {error: serializeError(error)}});
+    }
+}
+
+class CrossFrameAPI {
+    constructor() {
+        this._ackTimeout = 3000; // 3 seconds
+        this._responseTimeout = 10000; // 10 seconds
+        this._commPorts = new Map();
+        this._messageHandlers = new Map();
+        this._onDisconnectBind = this._onDisconnect.bind(this);
+    }
+
+    prepare() {
+        chrome.runtime.onConnect.addListener(this._onConnect.bind(this));
+    }
+
+    invoke(targetFrameId, action, params={}) {
+        return this.invokeTab(null, targetFrameId, action, params);
+    }
+
+    async invokeTab(targetTabId, targetFrameId, action, params={}) {
+        if (typeof targetTabId !== 'number') { targetTabId = null; }
+        const commPort = this._getOrCreateCommPort(targetTabId, targetFrameId);
+        return await commPort.invoke(action, params, this._ackTimeout, this._responseTimeout);
+    }
+
+    registerHandlers(messageHandlers) {
+        for (const [key, value] of messageHandlers) {
+            if (this._messageHandlers.has(key)) {
+                throw new Error(`Handler ${key} is already registered`);
+            }
+            this._messageHandlers.set(key, value);
+        }
+    }
+
+    unregisterHandler(key) {
+        return this._messageHandlers.delete(key);
+    }
+
+    // Private
+
+    _onConnect(port) {
+        try {
+            let details;
+            try {
+                details = JSON.parse(port.name);
+            } catch (e) {
+                return;
+            }
+            if (details.name !== 'cross-frame-communication-port') { return; }
+
+            const otherTabId = details.sourceTabId;
+            const otherFrameId = details.sourceFrameId;
+            this._setupCommPort(otherTabId, otherFrameId, port);
+        } catch (e) {
+            port.disconnect();
+            yomichan.logError(e);
+        }
+    }
+
+    _onDisconnect(commPort) {
+        commPort.off('disconnect', this._onDisconnectBind);
+        const {otherTabId, otherFrameId} = commPort;
+        const tabPorts = this._commPorts.get(otherTabId);
+        if (typeof tabPorts !== 'undefined') {
+            tabPorts.delete(otherFrameId);
+            if (tabPorts.size === 0) {
+                this._commPorts.delete(otherTabId);
+            }
+        }
+    }
+
+    _getOrCreateCommPort(otherTabId, otherFrameId) {
+        const tabPorts = this._commPorts.get(otherTabId);
+        if (typeof tabPorts !== 'undefined') {
+            const commPort = tabPorts.get(otherFrameId);
+            if (typeof commPort !== 'undefined') {
+                return commPort;
+            }
+        }
+        return this._createCommPort(otherTabId, otherFrameId);
+    }
+
+    _createCommPort(otherTabId, otherFrameId) {
+        const details = {
+            name: 'background-cross-frame-communication-port',
+            targetTabId: otherTabId,
+            targetFrameId: otherFrameId
+        };
+        const port = yomichan.connect(null, {name: JSON.stringify(details)});
+        return this._setupCommPort(otherTabId, otherFrameId, port);
+    }
+
+    _setupCommPort(otherTabId, otherFrameId, port) {
+        const commPort = new CrossFrameAPIPort(otherTabId, otherFrameId, port, this._messageHandlers);
+        let tabPorts = this._commPorts.get(otherTabId);
+        if (typeof tabPorts === 'undefined') {
+            tabPorts = new Map();
+            this._commPorts.set(otherTabId, tabPorts);
+        }
+        tabPorts.set(otherFrameId, commPort);
+        commPort.prepare();
+        commPort.on('disconnect', this._onDisconnectBind);
+        return commPort;
+    }
+}
diff --git a/ext/js/comm/frame-client.js b/ext/js/comm/frame-client.js
new file mode 100644
index 00000000..d15cee30
--- /dev/null
+++ b/ext/js/comm/frame-client.js
@@ -0,0 +1,173 @@
+/*
+ * Copyright (C) 2020-2021  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 = 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;
+        }
+    }
+}
diff --git a/ext/js/comm/frame-endpoint.js b/ext/js/comm/frame-endpoint.js
new file mode 100644
index 00000000..27af9cf3
--- /dev/null
+++ b/ext/js/comm/frame-endpoint.js
@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2020-2021  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 = 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});
+    }
+}