alex/yomichan
1
Fork 0
Code Releases Activity

Generalized frame connections (#654)

Browse Source 
* 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
This commit is contained in:
toasted-nutbread 2020-07-08 19:58:06 -04:00 committed by GitHub
parent 295ffa6e54
commit 6f49f426b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 267 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ext/bg/js/backend.js
View File

@ -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;
}

1
ext/bg/js/search.js
View File

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

1
ext/bg/settings-popup-preview.html
View File

@ -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>

1
ext/fg/float.html
View File

@ -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>

43
ext/fg/js/float.js
View File

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

135
ext/fg/js/popup.js
View File

@ -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() {

1
ext/manifest.json
View File

@ -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",

173
ext/mixed/js/frame-client.js Normal file
View File

@ -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;
}
}
}

65
ext/mixed/js/frame-endpoint.js Normal file
View File

@ -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});
}
}