Add ability to save screenshot to anki cards

ext/bg/js/anki.js

@@ -58,6 +58,11 @@ class AnkiConnect {
         return await this.ankiInvoke('guiBrowse', {query});
     }
 
+    async storeMediaFile(filename, dataBase64) {
+        await this.checkVersion();
+        return await this.ankiInvoke('storeMediaFile', {filename, data: dataBase64});
+    }
+
     async checkVersion() {
         if (this.remoteVersion < this.localVersion) {
             this.remoteVersion = await this.ankiInvoke('version');

ext/bg/js/api.js

@@ -53,7 +53,7 @@ async function apiKanjiFind(text) {
     return definitions.slice(0, options.general.maxResults);
 }
 
-async function apiDefinitionAdd(definition, mode) {
+async function apiDefinitionAdd(definition, mode, context) {
     const options = utilBackend().options;
 
     if (mode !== 'kanji') {
@@ -64,6 +64,14 @@ async function apiDefinitionAdd(definition, mode) {
         );
     }
 
+    if (context.screenshot) {
+        await apiInjectScreenshot(
+            definition,
+            options.anki.terms.fields,
+            context.screenshot
+        );
+    }
+
     const note = await dictNoteFormat(definition, mode, options);
     return utilBackend().anki.addNote(note);
 }
@@ -139,3 +147,61 @@ async function apiCommandExec(command) {
 async function apiAudioGetUrl(definition, source) {
     return audioBuildUrl(definition, source);
 }
+
+async function apiInjectScreenshot(definition, fields, screenshot) {
+    let usesScreenshot = false;
+    for (const name in fields) {
+        if (fields[name].includes('{screenshot}')) {
+            usesScreenshot = true;
+            break;
+        }
+    }
+
+    if (!usesScreenshot) {
+        return;
+    }
+
+    const dateToString = (date) => {
+        const year = date.getUTCFullYear();
+        const month = date.getUTCMonth().toString().padStart(2, '0');
+        const day = date.getUTCDate().toString().padStart(2, '0');
+        const hours = date.getUTCHours().toString().padStart(2, '0');
+        const minutes = date.getUTCMinutes().toString().padStart(2, '0');
+        const seconds = date.getUTCSeconds().toString().padStart(2, '0');
+        return `${year}-${month}-${day}-${hours}-${minutes}-${seconds}`;
+    };
+
+    const now = new Date(Date.now());
+    const filename = `yomichan_browser_screenshot_${definition.reading}_${dateToString(now)}.${screenshot.format}`;
+    const data = screenshot.dataUrl.replace(/^data:[\w\W]*?,/, '');
+
+    try {
+        await utilBackend().anki.storeMediaFile(filename, data);
+    } catch (e) {
+        return;
+    }
+
+    definition.screenshotFileName = filename;
+}
+
+function apiScreenshotGet(options, sender) {
+    if (!(sender && sender.tab)) {
+        return Promise.resolve();
+    }
+
+    const windowId = sender.tab.windowId;
+    return new Promise((resolve) => {
+        chrome.tabs.captureVisibleTab(windowId, options, (dataUrl) => resolve(dataUrl));
+    });
+}
+
+function apiForward(action, params, sender) {
+    if (!(sender && sender.tab)) {
+        return Promise.resolve();
+    }
+
+    const tabId = sender.tab.id;
+    return new Promise((resolve) => {
+        chrome.tabs.sendMessage(tabId, {action, params}, (response) => resolve(response));
+    });
+}

ext/bg/js/backend.js

@@ -94,8 +94,8 @@ class Backend {
                 forward(apiTermsFind(text), callback);
             },
 
-            definitionAdd: ({definition, mode, callback}) => {
-                forward(apiDefinitionAdd(definition, mode), callback);
+            definitionAdd: ({definition, mode, context, callback}) => {
+                forward(apiDefinitionAdd(definition, mode, context), callback);
             },
 
             definitionsAddable: ({definitions, modes, callback}) => {
@@ -116,6 +116,14 @@ class Backend {
 
             audioGetUrl: ({definition, source, callback}) => {
                 forward(apiAudioGetUrl(definition, source), callback);
+            },
+
+            screenshotGet: ({options}) => {
+                forward(apiScreenshotGet(options, sender), callback);
+            },
+
+            forward: ({action, params}) => {
+                forward(apiForward(action, params, sender), callback);
             }
         };
 

ext/bg/js/dictionary.js

@@ -343,7 +343,8 @@ async function dictFieldFormat(field, definition, mode, options) {
         'reading',
         'sentence',
         'tags',
-        'url'
+        'url',
+        'screenshot'
     ];
 
     for (const marker of markers) {

ext/bg/js/options.js

@@ -175,6 +175,10 @@ function optionsFieldTemplates() {
     <a href="{{definition.url}}">{{definition.url}}</a>
 {{/inline}}
 
+{{#*inline "screenshot"}}
+    <img src="{{definition.screenshotFileName}}" />
+{{/inline}}
+
 {{~> (lookup . "marker") ~}}
 `.trim();
 }
@@ -283,6 +287,11 @@ function optionsVersion(options) {
             if (utilStringHashCode(options.anki.fieldTemplates) === 1285806040) {
                 options.anki.fieldTemplates = optionsFieldTemplates();
             }
+        },
+        () => {
+            if (utilStringHashCode(options.anki.fieldTemplates) === -250091611) {
+                options.anki.fieldTemplates = optionsFieldTemplates();
+            }
         }
     ];
 

ext/bg/js/settings.js

@@ -505,7 +505,8 @@ async function ankiFieldsPopulate(element, options) {
             'reading',
             'sentence',
             'tags',
-            'url'
+            'url',
+            'screenshot'
         ],
         'kanji': [
             'character',

ext/fg/js/api.js

@@ -33,8 +33,8 @@ function apiKanjiFind(text) {
     return utilInvoke('kanjiFind', {text});
 }
 
-function apiDefinitionAdd(definition, mode) {
-    return utilInvoke('definitionAdd', {definition, mode});
+function apiDefinitionAdd(definition, mode, context) {
+    return utilInvoke('definitionAdd', {definition, mode, context});
 }
 
 function apiDefinitionsAddable(definitions, modes) {
@@ -53,6 +53,10 @@ function apiCommandExec(command) {
     return utilInvoke('commandExec', {command});
 }
 
-function apiAudioGetUrl(definition, source) {
-    return utilInvoke('audioGetUrl', {definition, source});
+function apiScreenshotGet(options) {
+    return utilInvoke('screenshotGet', {options});
+}
+
+function apiForward(action, params) {
+    return utilInvoke('forward', {action, params});
 }

ext/fg/js/frontend.js

@@ -244,6 +244,10 @@ class Frontend {
                 if (!this.options.enable) {
                     this.searchClear();
                 }
+            },
+
+            popupSetVisible: ({visible}) => {
+                this.popup.setVisible(visible);
             }
         };
 

ext/fg/js/popup.js

@@ -113,6 +113,14 @@ class Popup {
         return this.injected && this.container.style.visibility !== 'hidden';
     }
 
+    setVisible(visible) {
+        if (visible) {
+            this.container.style.setProperty('display', '');
+        } else {
+            this.container.style.setProperty('display', 'none', 'important');
+        }
+    }
+
     containsPoint(point) {
         if (!this.isVisible()) {
             return false;

ext/mixed/js/display.js

@@ -432,7 +432,15 @@ class Display {
         try {
             this.spinner.show();
 
-            const noteId = await apiDefinitionAdd(definition, mode);
+            const context = {};
+            if (this.noteUsesScreenshot()) {
+                const screenshot = await this.getScreenshot();
+                if (screenshot) {
+                    context.screenshot = screenshot;
+                }
+            }
+
+            const noteId = await apiDefinitionAdd(definition, mode, context);
             if (noteId) {
                 const index = this.definitions.indexOf(definition);
                 Display.adderButtonFind(index, mode).addClass('disabled');
@@ -485,10 +493,39 @@ class Display {
         }
     }
 
+    noteUsesScreenshot() {
+        const fields = this.options.anki.terms.fields;
+        for (const name in fields) {
+            if (fields[name].includes('{screenshot}')) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    async getScreenshot() {
+        try {
+            await this.setPopupVisible(false);
+            await Display.delay(1); // Wait for popup to be hidden.
+
+            const format = 'png';
+            const dataUrl = await apiScreenshotGet({format});
+            if (!dataUrl || dataUrl.error) { return; }
+
+            return {dataUrl, format};
+        } finally {
+            await this.setPopupVisible(true);
+        }
+    }
+
     get firstExpressionIndex() {
         return this.options.general.resultOutputMode === 'merge' ? 0 : -1;
     }
 
+    setPopupVisible(visible) {
+        return apiForward('popupSetVisible', {visible});
+    }
+
     static clozeBuild(sentence, source) {
         const result = {
             sentence: sentence.text.trim()
@@ -514,4 +551,8 @@ class Display {
     static viewerButtonFind(index) {
         return $('.entry').eq(index).find('.action-view-note');
     }
+
+    static delay(time) {
+        return new Promise((resolve) => setTimeout(resolve, time));
+    }
 }