diff options
Diffstat (limited to 'ext')
-rw-r--r-- | ext/bg/js/settings/anki-templates-controller.js | 4 | ||||
-rw-r--r-- | ext/bg/js/template-renderer-frame-api.js | 76 | ||||
-rw-r--r-- | ext/bg/js/template-renderer-frame-main.js | 27 | ||||
-rw-r--r-- | ext/bg/js/template-renderer-proxy.js | 153 | ||||
-rw-r--r-- | ext/bg/search.html | 3 | ||||
-rw-r--r-- | ext/bg/settings.html | 3 | ||||
-rw-r--r-- | ext/bg/template-renderer.html | 22 | ||||
-rw-r--r-- | ext/fg/float.html | 4 | ||||
-rw-r--r-- | ext/manifest.json | 9 | ||||
-rw-r--r-- | ext/mixed/js/display.js | 4 |
10 files changed, 293 insertions, 12 deletions
diff --git a/ext/bg/js/settings/anki-templates-controller.js b/ext/bg/js/settings/anki-templates-controller.js index c53e4553..c980bfa2 100644 --- a/ext/bg/js/settings/anki-templates-controller.js +++ b/ext/bg/js/settings/anki-templates-controller.js @@ -17,7 +17,7 @@ /* global * AnkiNoteBuilder - * TemplateRenderer + * TemplateRendererProxy * api */ @@ -28,7 +28,7 @@ class AnkiTemplatesController { this._cachedDefinitionValue = null; this._cachedDefinitionText = null; this._defaultFieldTemplates = null; - this._templateRenderer = new TemplateRenderer(); + this._templateRenderer = new TemplateRendererProxy(); } async prepare() { diff --git a/ext/bg/js/template-renderer-frame-api.js b/ext/bg/js/template-renderer-frame-api.js new file mode 100644 index 00000000..7668e176 --- /dev/null +++ b/ext/bg/js/template-renderer-frame-api.js @@ -0,0 +1,76 @@ +/* + * 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 TemplateRendererFrameApi { + constructor(templateRenderer) { + this._templateRenderer = templateRenderer; + this._windowMessageHandlers = new Map([ + ['renderHandlebarsTemplate', {async: true, handler: this._onRenderHandlebarsTemplate.bind(this)}] + ]); + } + + prepare() { + window.addEventListener('message', this._onWindowMessage.bind(this), false); + } + + _onWindowMessage(e) { + const {source, data: {action, params, id}} = e; + const messageHandler = this._windowMessageHandlers.get(action); + if (typeof messageHandler === 'undefined') { return; } + + this._onWindowMessageInner(messageHandler, action, params, source, id); + } + + async _onWindowMessageInner({handler, async}, action, params, source, id) { + let response; + try { + let result = handler(params); + if (async) { + result = await result; + } + response = {result}; + } catch (error) { + response = {error: this._errorToJson(error)}; + } + + if (typeof id === undefined) { return; } + source.postMessage({action: `${action}.response`, params: response, id}, '*'); + } + + async _onRenderHandlebarsTemplate({template, data, marker}) { + return await this._templateRenderer.render(template, data, marker); + } + + _errorToJson(error) { + try { + if (error !== null && typeof error === 'object') { + return { + name: error.name, + message: error.message, + stack: error.stack, + data: error.data + }; + } + } catch (e) { + // NOP + } + return { + value: error, + hasValue: true + }; + } +} diff --git a/ext/bg/js/template-renderer-frame-main.js b/ext/bg/js/template-renderer-frame-main.js new file mode 100644 index 00000000..7d3e1493 --- /dev/null +++ b/ext/bg/js/template-renderer-frame-main.js @@ -0,0 +1,27 @@ +/* + * 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/>. + */ + +/* globals + * TemplateRenderer + * TemplateRendererFrameApi + */ + +(() => { + const templateRenderer = new TemplateRenderer(); + const api = new TemplateRendererFrameApi(templateRenderer); + api.prepare(); +})(); diff --git a/ext/bg/js/template-renderer-proxy.js b/ext/bg/js/template-renderer-proxy.js new file mode 100644 index 00000000..f08efdd6 --- /dev/null +++ b/ext/bg/js/template-renderer-proxy.js @@ -0,0 +1,153 @@ +/* + * 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 TemplateRendererProxy { + constructor() { + this._frame = null; + this._frameNeedsLoad = true; + this._frameLoading = false; + this._frameLoadPromise = null; + this._frameUrl = chrome.runtime.getURL('/bg/template-renderer.html'); + this._invocations = new Set(); + } + + async render(template, data, marker) { + await this._prepareFrame(); + return await this._invoke('renderHandlebarsTemplate', {template, data, marker}); + } + + // Private + + async _prepareFrame() { + if (this._frame === null) { + this._frame = document.createElement('iframe'); + this._frame.addEventListener('load', this._onFrameLoad.bind(this), false); + const style = this._frame.style; + style.opacity = '0'; + style.width = '0'; + style.height = '0'; + style.position = 'absolute'; + } + if (this._frameNeedsLoad) { + this._frameNeedsLoad = false; + this._frameLoading = true; + this._frameLoadPromise = this._loadFrame(this._frame, this._frameUrl) + .finally(() => { this._frameLoading = false; }); + } + await this._frameLoadPromise; + } + + _loadFrame(frame, url, timeout=5000) { + return new Promise((resolve, reject) => { + let ready = false; + const cleanup = () => { + frame.removeEventListener('load', onLoad, false); + if (timer !== null) { + clearTimeout(timer); + timer = null; + } + }; + const onLoad = () => { + if (!ready) { return; } + cleanup(); + resolve(); + }; + + let timer = setTimeout(() => { + cleanup(); + reject(new Error('Timeout')); + }, timeout); + + frame.removeAttribute('src'); + frame.removeAttribute('srcdoc'); + frame.addEventListener('load', onLoad, false); + try { + document.body.appendChild(frame); + ready = true; + frame.contentDocument.location.href = url; + } catch (e) { + cleanup(); + reject(e); + } + }); + } + + _invoke(action, params, timeout=null) { + return new Promise((resolve, reject) => { + const frameWindow = (this._frame !== null ? this._frame.contentWindow : null); + if (frameWindow === null) { + reject(new Error('Frame not set up')); + return; + } + + const id = generateId(16); + const invocation = { + cancel: () => { + cleanup(); + reject(new Error('Terminated')); + } + }; + + const cleanup = () => { + this._invocations.delete(invocation); + window.removeEventListener('message', onMessage, false); + if (timer !== null) { + clearTimeout(timer); + timer = null; + } + }; + const onMessage = (e) => { + if ( + e.source !== frameWindow || + e.data.id !== id || + e.data.action !== `${action}.response` + ) { + return; + } + + const response = e.data.params; + cleanup(); + const {error} = response; + if (error) { + reject(jsonToError(error)); + } else { + resolve(response.result); + } + }; + + let timer = (typeof timeout === 'number' ? setTimeout(() => { + cleanup(); + reject(new Error('Timeout')); + }, timeout) : null); + + this._invocations.add(invocation); + + window.addEventListener('message', onMessage, false); + frameWindow.postMessage({action, params, id}, '*'); + }); + } + + _onFrameLoad() { + if (this._frameLoading) { return; } + this._frameNeedsLoad = true; + + for (const invocation of this._invocations) { + invocation.cancel(); + } + this._invocations.clear(); + } +} diff --git a/ext/bg/search.html b/ext/bg/search.html index ae117fd1..ecc79968 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -67,7 +67,6 @@ </div> </div> - <script src="/mixed/lib/handlebars.min.js"></script> <script src="/mixed/lib/wanakana.min.js"></script> <script src="/mixed/js/core.js"></script> @@ -92,7 +91,7 @@ <script src="/mixed/js/text-to-speech-audio.js"></script> <script src="/bg/js/anki-note-builder.js"></script> - <script src="/bg/js/template-renderer.js"></script> + <script src="/bg/js/template-renderer-proxy.js"></script> <script src="/bg/js/query-parser-generator.js"></script> <script src="/bg/js/query-parser.js"></script> diff --git a/ext/bg/settings.html b/ext/bg/settings.html index 208f3d3f..7141776c 100644 --- a/ext/bg/settings.html +++ b/ext/bg/settings.html @@ -1186,7 +1186,6 @@ <script src="/mixed/lib/jquery.min.js"></script> <script src="/mixed/lib/bootstrap/js/bootstrap.min.js"></script> - <script src="/mixed/lib/handlebars.min.js"></script> <script src="/mixed/lib/jszip.min.js"></script> <script src="/mixed/lib/wanakana.min.js"></script> @@ -1214,7 +1213,7 @@ <script src="/bg/js/dictionary-importer.js"></script> <script src="/bg/js/json-schema.js"></script> <script src="/bg/js/media-utility.js"></script> - <script src="/bg/js/template-renderer.js"></script> + <script src="/bg/js/template-renderer-proxy.js"></script> <script src="/bg/js/settings/keyboard-mouse-input-field.js"></script> <script src="/bg/js/settings/profile-conditions-ui.js"></script> diff --git a/ext/bg/template-renderer.html b/ext/bg/template-renderer.html new file mode 100644 index 00000000..c58e604c --- /dev/null +++ b/ext/bg/template-renderer.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width,initial-scale=1" /> + <title>Yomichan Handlebars Sandbox</title> + <link rel="icon" type="image/png" href="/mixed/img/icon16.png" sizes="16x16"> + <link rel="icon" type="image/png" href="/mixed/img/icon19.png" sizes="19x19"> + <link rel="icon" type="image/png" href="/mixed/img/icon32.png" sizes="32x32"> + <link rel="icon" type="image/png" href="/mixed/img/icon38.png" sizes="38x38"> + <link rel="icon" type="image/png" href="/mixed/img/icon48.png" sizes="48x48"> + <link rel="icon" type="image/png" href="/mixed/img/icon64.png" sizes="64x64"> + <link rel="icon" type="image/png" href="/mixed/img/icon128.png" sizes="128x128"> +</head> +<body> + <script src="/mixed/lib/handlebars.min.js"></script> + <script src="/mixed/js/japanese.js"></script> + <script src="/bg/js/template-renderer.js"></script> + <script src="/bg/js/template-renderer-frame-api.js"></script> + <script src="/bg/js/template-renderer-frame-main.js"></script> +</body> +</html> diff --git a/ext/fg/float.html b/ext/fg/float.html index 98e849f0..2c64a777 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -44,8 +44,6 @@ </div> </div> - <script src="/mixed/lib/handlebars.min.js"></script> - <script src="/mixed/js/core.js"></script> <script src="/mixed/js/yomichan.js"></script> <script src="/mixed/js/comm.js"></script> @@ -69,7 +67,7 @@ <script src="/mixed/js/text-to-speech-audio.js"></script> <script src="/bg/js/anki-note-builder.js"></script> - <script src="/bg/js/template-renderer.js"></script> + <script src="/bg/js/template-renderer-proxy.js"></script> <script src="/bg/js/query-parser-generator.js"></script> <script src="/bg/js/query-parser.js"></script> diff --git a/ext/manifest.json b/ext/manifest.json index 271f6e62..59c88072 100644 --- a/ext/manifest.json +++ b/ext/manifest.json @@ -66,6 +66,12 @@ "page": "bg/settings.html", "open_in_tab": true }, + "sandbox": { + "pages": [ + "bg/template-renderer.html" + ], + "content_security_policy": "sandbox allow-scripts; script-src 'self' 'unsafe-eval'; object-src 'self'" + }, "permissions": [ "<all_urls>", "storage", @@ -93,7 +99,8 @@ } }, "web_accessible_resources": [ - "fg/float.html" + "fg/float.html", + "bg/template-renderer.html" ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", "applications": { diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index ef56f4aa..a62e0212 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -25,7 +25,7 @@ * MediaLoader * PopupFactory * QueryParser - * TemplateRenderer + * TemplateRendererProxy * WindowScroll * api * dynamicLoader @@ -87,7 +87,7 @@ class Display extends EventDispatcher { this._ownerFrameId = null; this._defaultAnkiFieldTemplates = null; this._defaultAnkiFieldTemplatesPromise = null; - this._templateRenderer = new TemplateRenderer(); + this._templateRenderer = new TemplateRendererProxy(); this._ankiNoteBuilder = new AnkiNoteBuilder({ renderTemplate: this._renderTemplate.bind(this) }); |