7 files changed, 113 insertions, 5 deletions
diff --git a/ext/bg/js/anki.js b/ext/bg/js/anki.js
index 183f37bc..bd4e46cd 100644
--- a/ext/bg/js/anki.js
+++ b/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');
diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index de3ad64e..c33ba709 100644
--- a/ext/bg/js/api.js
+++ b/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));
+    });
+}
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index c191a150..d49286d0 100644
--- a/ext/bg/js/backend.js
+++ b/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);
             }
         };
 
diff --git a/ext/bg/js/dictionary.js b/ext/bg/js/dictionary.js
index 368bb18d..49afc368 100644
--- a/ext/bg/js/dictionary.js
+++ b/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) {
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index f1fc2cf8..29d8a215 100644
--- a/ext/bg/js/options.js
+++ b/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();
 }
@@ -220,6 +224,7 @@ function optionsSetDefaults(options) {
             server: 'http://127.0.0.1:8765',
             tags: ['yomichan'],
             sentenceExt: 200,
+            screenshot: {format: 'png', quality: 92},
             terms: {deck: '', model: '', fields: {}},
             kanji: {deck: '', model: '', fields: {}},
             fieldTemplates: optionsFieldTemplates()
@@ -283,6 +288,11 @@ function optionsVersion(options) {
             if (utilStringHashCode(options.anki.fieldTemplates) === 1285806040) {
                 options.anki.fieldTemplates = optionsFieldTemplates();
             }
+        },
+        () => {
+            if (utilStringHashCode(options.anki.fieldTemplates) === -250091611) {
+                options.anki.fieldTemplates = optionsFieldTemplates();
+            }
         }
     ];
 
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 953120da..75082f3e 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -51,6 +51,8 @@ async function formRead() {
     optionsNew.anki.tags = $('#card-tags').val().split(/[,; ]+/);
     optionsNew.anki.sentenceExt = parseInt($('#sentence-detection-extent').val(), 10);
     optionsNew.anki.server = $('#interface-server').val();
+    optionsNew.anki.screenshot.format = $('#screenshot-format').val();
+    optionsNew.anki.screenshot.quality = parseInt($('#screenshot-quality').val(), 10);
     optionsNew.anki.fieldTemplates = $('#field-templates').val();
 
     if (optionsOld.anki.enable && !ankiErrorShown()) {
@@ -188,6 +190,8 @@ async function onReady() {
     $('#card-tags').val(options.anki.tags.join(' '));
     $('#sentence-detection-extent').val(options.anki.sentenceExt);
     $('#interface-server').val(options.anki.server);
+    $('#screenshot-format').val(options.anki.screenshot.format);
+    $('#screenshot-quality').val(options.anki.screenshot.quality);
     $('#field-templates').val(options.anki.fieldTemplates);
     $('#field-templates-reset').click(utilAsync(onAnkiFieldTemplatesReset));
     $('input, select, textarea').not('.anki-model').change(utilAsync(onFormOptionsChanged));
@@ -505,7 +509,8 @@ async function ankiFieldsPopulate(element, options) {
             'reading',
             'sentence',
             'tags',
-            'url'
+            'url',
+            'screenshot'
         ],
         'kanji': [
             'character',
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 086d67d2..c6677018 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -293,6 +293,19 @@
                         <input type="text" id="interface-server" class="form-control">
                     </div>
 
+                    <div class="form-group options-advanced">
+                        <label for="screenshot-format">Screenshot format</label>
+                        <select class="form-control" id="screenshot-format">
+                            <option value="png">PNG</option>
+                            <option value="jpeg">JPEG</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group options-advanced">
+                        <label for="screenshot-quality">Screenshot quality (JPEG only)</label>
+                        <input type="number" min="0" max="100" step="1" id="screenshot-quality" class="form-control">
+                    </div>
+
                     <div id="anki-format">
                         <p class="help-block">
                             Specify the information you would like included in your flashcards in the field editor below.