From 0f0adf750c8cde668cdcf369cbe0ac173a9edf3f Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 15 Aug 2019 19:39:58 -0400 Subject: [PATCH 1/2] Add ability to save screenshot to anki cards --- ext/bg/js/anki.js | 5 +++ ext/bg/js/api.js | 68 ++++++++++++++++++++++++++++++++++++++++- ext/bg/js/backend.js | 12 ++++++-- ext/bg/js/dictionary.js | 3 +- ext/bg/js/options.js | 9 ++++++ ext/bg/js/settings.js | 3 +- ext/fg/js/api.js | 12 +++++--- ext/fg/js/frontend.js | 4 +++ ext/fg/js/popup.js | 8 +++++ ext/mixed/js/display.js | 43 +++++++++++++++++++++++++- 10 files changed, 157 insertions(+), 10 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..96e390f4 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -175,6 +175,10 @@ function optionsFieldTemplates() { {{definition.url}} {{/inline}} +{{#*inline "screenshot"}} + +{{/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(); + } } ]; diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index 953120da..594d53f7 100644 --- a/ext/bg/js/settings.js +++ b/ext/bg/js/settings.js @@ -505,7 +505,8 @@ async function ankiFieldsPopulate(element, options) { 'reading', 'sentence', 'tags', - 'url' + 'url', + 'screenshot' ], 'kanji': [ 'character', diff --git a/ext/fg/js/api.js b/ext/fg/js/api.js index 4b4d9d74..0c86b412 100644 --- a/ext/fg/js/api.js +++ b/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}); } diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index bd652f3b..bafd06bd 100644 --- a/ext/fg/js/frontend.js +++ b/ext/fg/js/frontend.js @@ -244,6 +244,10 @@ class Frontend { if (!this.options.enable) { this.searchClear(); } + }, + + popupSetVisible: ({visible}) => { + this.popup.setVisible(visible); } }; diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index c8cc9baa..18dc0386 100644 --- a/ext/fg/js/popup.js +++ b/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; diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 3bb78fe1..eeb42040 100644 --- a/ext/mixed/js/display.js +++ b/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)); + } } From 3a5b06bd1078d39cf9b29cbc05a0cde13c96ca94 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 15 Aug 2019 19:56:14 -0400 Subject: [PATCH 2/2] Add screenshot settings --- ext/bg/js/options.js | 1 + ext/bg/js/settings.js | 4 ++++ ext/bg/settings.html | 13 +++++++++++++ ext/mixed/js/display.js | 4 ++-- 4 files changed, 20 insertions(+), 2 deletions(-) diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js index 96e390f4..29d8a215 100644 --- a/ext/bg/js/options.js +++ b/ext/bg/js/options.js @@ -224,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() diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js index 594d53f7..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)); 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 @@ +
+ + +
+ +
+ + +
+

Specify the information you would like included in your flashcards in the field editor below. diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index eeb42040..0aa19aec 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -508,8 +508,8 @@ class Display { await this.setPopupVisible(false); await Display.delay(1); // Wait for popup to be hidden. - const format = 'png'; - const dataUrl = await apiScreenshotGet({format}); + const {format, quality} = this.options.anki.screenshot; + const dataUrl = await apiScreenshotGet({format, quality}); if (!dataUrl || dataUrl.error) { return; } return {dataUrl, format};