add option to screenshot the whole page, kind of, #39

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) {
+async function saveCroppedScreenshot(pageUrl) {
-	const cropRect = await sendMessageToActiveTab({name: 'trilium-save-screenshot'});
+	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') {
+	else if (info.menuItemId === 'trilium-save-cropped-screenshot') {
-		await saveScreenshot(info.pageUrl);
+		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();

options/options.html

@@ -45,6 +45,9 @@
             <th>Username:</th>
             <td><input type="text" id="trilium-server-username"/></td>
         </tr>
+        <tr>
+            <td colspan="2" style="text-align: center; font-style: italic">Note: Username is needed only for Trilium v0.49 and earlier</td>
+        </tr>
         <tr>
             <th>Password:</th>
             <td><input type="password" id="trilium-server-password"/></td>

popup/popup.html

@@ -18,7 +18,8 @@
     </div>
   </div>
 
-  <button class="button full needs-connection" id="clip-screenshot-button">Clip screenshot</button>
+  <button class="button full needs-connection" id="save-cropped-screenshot-button">Crop screen shot</button>
+  <button class="button full needs-connection" id="save-whole-screenshot-button">Save whole screen shot</button>
   <button class="button full needs-connection" id="save-whole-page-button">Save whole page</button>
   <button class="button full needs-connection" id="save-link-with-note-button">Save link with a note</button>
   <button class="button full needs-connection" id="save-tabs-button">Save window's tabs as a list</button>

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'}));