Cross frame communication (#531)

* Set up new cross-frame port connector

* Create classes for cross-frame API invocation with replies

* Remove event listeners on disconnect
This commit is contained in:
toasted-nutbread 2020-05-23 13:34:55 -04:00 committed by GitHub
parent 9a657214ad
commit 694120b8a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 322 additions and 0 deletions

View File

@ -163,6 +163,7 @@ class Backend {
chrome.tabs.onZoomChange.addListener(this._onZoomChange.bind(this)); chrome.tabs.onZoomChange.addListener(this._onZoomChange.bind(this));
} }
chrome.runtime.onMessage.addListener(this.onMessage.bind(this)); chrome.runtime.onMessage.addListener(this.onMessage.bind(this));
chrome.runtime.onConnect.addListener(this._onConnect.bind(this));
const options = this.getOptions(this.optionsContext); const options = this.getOptions(this.optionsContext);
if (options.general.showGuide) { if (options.general.showGuide) {
@ -236,6 +237,45 @@ class Backend {
} }
} }
_onConnect(port) {
try {
const match = /^background-cross-frame-communication-port-(\d+)$/.exec(`${port.name}`);
if (match === null) { return; }
const tabId = (port.sender && port.sender.tab ? port.sender.tab.id : null);
if (typeof tabId !== 'number') {
throw new Error('Port does not have an associated tab ID');
}
const senderFrameId = port.sender.frameId;
if (typeof tabId !== 'number') {
throw new Error('Port does not have an associated frame ID');
}
const targetFrameId = parseInt(match[1], 10);
let forwardPort = chrome.tabs.connect(tabId, {frameId: targetFrameId, name: `cross-frame-communication-port-${senderFrameId}`});
const cleanup = () => {
this.checkLastError(chrome.runtime.lastError);
if (forwardPort !== null) {
forwardPort.disconnect();
forwardPort = null;
}
if (port !== null) {
port.disconnect();
port = null;
}
};
port.onMessage.addListener((message) => { forwardPort.postMessage(message); });
forwardPort.onMessage.addListener((message) => { port.postMessage(message); });
port.onDisconnect.addListener(cleanup);
forwardPort.onDisconnect.addListener(cleanup);
} catch (e) {
port.disconnect();
yomichan.logError(e);
}
}
_onClipboardText({text}) { _onClipboardText({text}) {
this._onCommandSearch({mode: 'popup', query: text}); this._onCommandSearch({mode: 'popup', query: text});
} }

282
ext/mixed/js/comm.js Normal file
View File

@ -0,0 +1,282 @@
/*
* 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 CrossFrameAPIPort extends EventDispatcher {
constructor(otherFrameId, port, messageHandlers) {
super();
this._otherFrameId = otherFrameId;
this._port = port;
this._messageHandlers = messageHandlers;
this._activeInvocations = new Map();
this._invocationId = 0;
this._eventListeners = new EventListenerCollection();
}
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'));
return;
}
const id = this._invocationId++;
const invocation = {id, resolve, reject, responseTimeout, ack: false, timer: null};
this._activeInvocations.set(id, invocation);
if (ackTimeout !== null) {
try {
invocation.timer = setTimeout(() => this._onError(id, new Error('Timeout (ack)')), ackTimeout);
} catch (e) {
this._onError(id, new Error('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, new Error('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 ack`));
return;
}
if (invocation.ack) {
this._onError(id, new Error(`Request ${id} already ack'd`));
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, new Error('Timeout (response)')), responseTimeout);
} catch (e) {
this._onError(id, new Error('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, new Error(`Request ${id} not ack'd`));
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(jsonToError(error));
} else {
invocation.resolve(data.result);
}
}
_onError(id, error) {
const invocation = this._activeInvocations.get(id);
if (typeof invocation === 'undefined') { return; }
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);
if (typeof messageHandler === 'undefined') {
this._sendError(id, new Error(`Unknown action: ${action}`));
return;
}
const {handler, async} = messageHandler;
this._sendAck(id);
if (async) {
this._invokeHandlerAsync(id, handler, params);
} else {
this._invokeHandler(id, handler, params);
}
}
_invokeHandler(id, handler, params) {
try {
const result = handler(params);
this._sendResult(id, result);
} catch (error) {
this._sendError(id, error);
}
}
async _invokeHandlerAsync(id, handler, params) {
try {
const result = await handler(params);
this._sendResult(id, result);
} catch (error) {
this._sendError(id, error);
}
}
_sendResponse(data) {
if (this._port === null) { return; }
try {
this._port.postMessage(data);
} catch (e) {
// NOP
}
}
_sendAck(id) {
this._sendResponse({type: 'ack', id});
}
_sendResult(id, result) {
this._sendResponse({type: 'result', id, data: {result}});
}
_sendError(id, error) {
this._sendResponse({type: 'result', id, data: {error: errorToJson(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));
}
async invoke(targetFrameId, action, params={}) {
const commPort = this._getOrCreateCommPort(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);
}
}
_onConnect(port) {
const match = /^cross-frame-communication-port-(\d+)$/.exec(`${port.name}`);
if (match === null) { return; }
const otherFrameId = parseInt(match[1], 10);
this._setupCommPort(otherFrameId, port);
}
_onDisconnect(commPort) {
commPort.off('disconnect', this._onDisconnectBind);
this._commPorts.delete(commPort.otherFrameId);
}
_getOrCreateCommPort(otherFrameId) {
const commPort = this._commPorts.get(otherFrameId);
return (typeof commPort !== 'undefined' ? commPort : this._createCommPort(otherFrameId));
}
_createCommPort(otherFrameId) {
const port = chrome.runtime.connect(null, {name: `background-cross-frame-communication-port-${otherFrameId}`});
return this._setupCommPort(otherFrameId, port);
}
_setupCommPort(otherFrameId, port) {
const commPort = new CrossFrameAPIPort(otherFrameId, port, this._messageHandlers);
this._commPorts.set(otherFrameId, commPort);
commPort.prepare();
commPort.on('disconnect', this._onDisconnectBind);
return commPort;
}
}