work on sandbox

ext/bg/background.html

@@ -25,6 +25,6 @@
 
         <script src="/bg/js/backend.js"></script>
 
-        <iframe src="/sb/sandbox.html"></iframe>
+        <iframe src="/sb/sandbox.html" id="sandbox"></iframe>
     </body>
 </html>

ext/bg/js/api.js

@@ -100,6 +100,23 @@ async function apiTemplateRender(template, data) {
     return handlebarsRender(template, data);
 }
 
+async function apiTemplateRenderDynamic(template, data) {
+    return new Promise((resolve, reject) => {
+        const sequence = utilBackend().sequenceNew();
+        const handler = event => {
+            if (event.data.sequence === sequence) {
+                resolve(event.data.result);
+                window.removeEventListener('message', handler);
+            }
+        };
+
+        window.addEventListener('message', handler);
+
+        const sandbox = utilBackend().sandbox();
+        sandbox.postMessage({template, data, sequence, command: 'render'}, '*');
+    });
+}
+
 async function apiCommandExec(command) {
     const handlers = {
         search: () => {

ext/bg/js/backend.js

@@ -22,6 +22,7 @@ class Backend {
         this.translator = new Translator();
         this.anki = new AnkiNull();
         this.options = null;
+        this.sequence = 0;
     }
 
     async prepare() {
@@ -36,6 +37,14 @@ class Backend {
         }
     }
 
+    sequenceNew() {
+        return this.sequence++;
+    }
+
+    sandbox() {
+        return document.getElementById('sandbox').contentWindow;
+    }
+
     onOptionsUpdated(options) {
         this.options = utilIsolate(options);
 

ext/sb/js/sandbox.js

@@ -24,7 +24,7 @@
 window.addEventListener('message', event => {
     if (event.data.command === 'render') {
         const template = Handlebars.compile(event.data.template || '');
-        const result = template(event.data.context || {});
+        const result = template(event.data.data || {});
-        event.source.postMessage({result, sequence: event.data.sequence});
+        event.source.postMessage({result, sequence: event.data.sequence}, '*');
     }
 });