aboutsummaryrefslogtreecommitdiff
path: root/ext/fg
diff options
context:
space:
mode:
Diffstat (limited to 'ext/fg')
-rw-r--r--ext/fg/float.html1
-rw-r--r--ext/fg/js/float.js43
-rw-r--r--ext/fg/js/popup.js135
3 files changed, 21 insertions, 158 deletions
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 @@
<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>
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() {