diff --git a/background.js b/background.js index 5cacc39fe..88f75fe69 100644 --- a/background.js +++ b/background.js @@ -9,7 +9,7 @@ chrome.commands.onCommand.addListener(async function (command) { } else if (command == "saveScreenshot") { const activeTab = await getActiveTab(); - await saveScreenshot(activeTab.url); + await saveCroppedScreenshot(activeTab.url); } else { console.log("Unrecognized command", command); } @@ -35,7 +35,7 @@ function cropImage(newArea, dataUrl) { }); } -async function takeScreenshot(cropRect) { +async function takeCroppedScreenshot(cropRect) { const activeTab = await getActiveTab(); const zoom = await browser.tabs.getZoom(activeTab.id) * window.devicePixelRatio; @@ -50,6 +50,14 @@ async function takeScreenshot(cropRect) { return await cropImage(newArea, dataUrl); } +async function takeWholeScreenshot() { + // this saves only visible portion of the page + // workaround to save the whole page is to scroll & stitch + // example in https://github.com/mrcoles/full-page-screen-capture-chrome-extension + // see page.js and popup.js + return await browser.tabs.captureVisibleTab(null, { format: 'png' }); +} + browser.runtime.onInstalled.addListener(() => { if (isDevEnv()) { browser.browserAction.setIcon({ @@ -65,11 +73,23 @@ browser.contextMenus.create({ }); browser.contextMenus.create({ - id: "trilium-save-screenshot", + id: "trilium-save-cropped-screenshot", title: "Clip screenshot to Trilium", contexts: ["page"] }); +browser.contextMenus.create({ + id: "trilium-save-cropped-screenshot", + title: "Crop screen shot to Trilium", + contexts: ["page"] +}); + +browser.contextMenus.create({ + id: "trilium-save-whole-screenshot", + title: "Save whole screen shot to Trilium", + contexts: ["page"] +}); + browser.contextMenus.create({ id: "trilium-save-page", title: "Save whole page to Trilium", @@ -201,10 +221,24 @@ async function getImagePayloadFromSrc(src, pageUrl) { }; } -async function saveScreenshot(pageUrl) { - const cropRect = await sendMessageToActiveTab({name: 'trilium-save-screenshot'}); +async function saveCroppedScreenshot(pageUrl) { + const cropRect = await sendMessageToActiveTab({name: 'trilium-get-rectangle-for-screenshot'}); - const src = await takeScreenshot(cropRect); + const src = await takeCroppedScreenshot(cropRect); + + const payload = await getImagePayloadFromSrc(src, pageUrl); + + const resp = await triliumServerFacade.callService("POST", "clippings", payload); + + if (!resp) { + return; + } + + toast("Screenshot has been saved to Trilium.", resp.noteId); +} + +async function saveWholeScreenshot(pageUrl) { + const src = await takeWholeScreenshot(); const payload = await getImagePayloadFromSrc(src, pageUrl); @@ -314,8 +348,11 @@ browser.contextMenus.onClicked.addListener(async function(info, tab) { if (info.menuItemId === 'trilium-save-selection') { await saveSelection(); } - else if (info.menuItemId === 'trilium-save-screenshot') { - await saveScreenshot(info.pageUrl); + else if (info.menuItemId === 'trilium-save-cropped-screenshot') { + await saveCroppedScreenshot(info.pageUrl); + } + else if (info.menuItemId === 'trilium-save-whole-screenshot') { + await saveWholeScreenshot(info.pageUrl); } else if (info.menuItemId === 'trilium-save-image') { await saveImage(info.srcUrl, info.pageUrl); @@ -382,10 +419,15 @@ browser.runtime.onMessage.addListener(async request => { else if (request.name === 'load-script') { return await browser.tabs.executeScript({file: request.file}); } - else if (request.name === 'save-screenshot') { + else if (request.name === 'save-cropped-screenshot') { const activeTab = await getActiveTab(); - return await saveScreenshot(activeTab.url); + return await saveCroppedScreenshot(activeTab.url); + } + else if (request.name === 'save-whole-screenshot') { + const activeTab = await getActiveTab(); + + return await saveWholeScreenshot(activeTab.url); } else if (request.name === 'save-whole-page') { return await saveWholePage(); diff --git a/options/options.html b/options/options.html index 1eb265e10..7180bb6bd 100644 --- a/options/options.html +++ b/options/options.html @@ -45,6 +45,9 @@ Username: + + Note: Username is needed only for Trilium v0.49 and earlier + Password: diff --git a/popup/popup.html b/popup/popup.html index 8b280defc..ceca59820 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -18,7 +18,8 @@ - + + diff --git a/popup/popup.js b/popup/popup.js index b95620d7a..13bf179d2 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -10,13 +10,24 @@ async function sendMessage(message) { } const $showOptionsButton = $("#show-options-button"); -const $clipScreenShotButton = $("#clip-screenshot-button"); +const $saveCroppedScreenShotButton = $("#save-cropped-screenshot-button"); +const $saveWholeScreenShotButton = $("#save-whole-screenshot-button"); const $saveWholePageButton = $("#save-whole-page-button"); const $saveTabsButton = $("#save-tabs-button"); $showOptionsButton.on("click", () => browser.runtime.openOptionsPage()); -$clipScreenShotButton.on("click", () => sendMessage({name: 'save-screenshot'})); +$saveCroppedScreenShotButton.on("click", () => { + sendMessage({name: 'save-cropped-screenshot'}); + + window.close(); +}); + +$saveWholeScreenShotButton.on("click", () => { + sendMessage({name: 'save-whole-screenshot'}); + + window.close(); +}); $saveWholePageButton.on("click", () => sendMessage({name: 'save-whole-page'}));