diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 4791bfb5..6e594f9b 100644
--- a/ext/bg/js/backend.js
+++ b/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;
}
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 239027f7..9bbc66f2 100644
--- a/ext/bg/js/search.js
+++ b/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',
diff --git a/ext/bg/settings-popup-preview.html b/ext/bg/settings-popup-preview.html
index c0c8e3b9..5b3a9692 100644
--- a/ext/bg/settings-popup-preview.html
+++ b/ext/bg/settings-popup-preview.html
@@ -124,6 +124,7 @@
+
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 @@
+
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() {
diff --git a/ext/manifest.json b/ext/manifest.json
index 38069aea..619c18c1 100644
--- a/ext/manifest.json
+++ b/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",
diff --git a/ext/mixed/js/frame-client.js b/ext/mixed/js/frame-client.js
new file mode 100644
index 00000000..6ea344e2
--- /dev/null
+++ b/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 .
+ */
+
+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;
+ }
+ }
+}
diff --git a/ext/mixed/js/frame-endpoint.js b/ext/mixed/js/frame-endpoint.js
new file mode 100644
index 00000000..1cd25bb5
--- /dev/null
+++ b/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 .
+ */
+
+/* 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});
+ }
+}