fix: ask for the necessary promises beforehand; fix creating page screenshot; add more logs

Signed-off-by: Robert Goniszewski <robertgoniszewski@outlook.com>

Author: goniszewski

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "grimoire-companion",
 	"displayName": "grimoire companion",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"description": "Companion extension for Grimoire.",
 	"author": "Robert Goniszewski <robert@goniszewski.com>",
 	"scripts": {
@@ -33,8 +33,7 @@
 	},
 	"manifest": {
 		"host_permissions": [
-			"http://*/*",
-			"https://*/*"
+			"<all_urls>"
 		],
 		"permissions": [
 			"activeTab",

src/popup.svelte

@@ -51,6 +51,7 @@
 		saveScreenshot: false
 	};
 	let validationInterval: NodeJS.Timeout;
+	let missingPermissions = false;
 
 	$: $updatedUrl = $currentTab.url;
 
@@ -85,6 +86,15 @@
 		};
 	}
 
+	async function handleGrimoireApiUrlChange() {
+		storage.set('configuration', configuration);
+
+		logger.debug('handleGrimoireApiUrlChange', 'Configuration changed', configuration);
+		showToast.success('Configuration saved! 🪶');
+
+		return onValidateGrimoireApiUrl();
+	}
+
 	async function fetchUserData() {
 		const categoriesAndTags = await sendToBackground<
 			{
@@ -120,9 +130,37 @@
 		return true;
 	}
 
+	async function requestPermissions() {
+		return chrome.permissions
+			.request({
+				origins: ['<all_urls>']
+			})
+			.then((granted) => {
+				if (granted) {
+					logger.debug('requestPermissions', 'Necessary permission granted');
+					missingPermissions = false;
+				} else {
+					logger.error('requestPermissions', 'Necessary permission denied');
+				}
+			});
+	}
+
 	onMount(async () => {
 		logger.debug('popup.onMount', 'init');
 
+		missingPermissions = !(await chrome.permissions.contains({
+			origins: ['<all_urls>']
+		}));
+
+		if (missingPermissions) {
+			$status = {
+				...$status,
+				isGrimoireApiReachable: false
+			};
+
+			return;
+		}
+
 		const theme = await storage.get('theme');
 		token = await storage.get('token');
 		configuration = (await storage.get('configuration')) || {
@@ -178,13 +216,13 @@
 
 		logger.debug('onMount', 'validationInterval', 'initiating');
 
-		validationInterval = setInterval(() => {
-			onValidateGrimoireApiUrl();
-		}, 5000);
+		// validationInterval = setInterval(() => {
+		// 	onValidateGrimoireApiUrl();
+		// }, 5000);
 	});
 
 	onDestroy(() => {
-		clearInterval(validationInterval);
+		// clearInterval(validationInterval);
 	});
 
 	async function signIn() {
@@ -227,7 +265,21 @@
 </script>
 
 <div class="drawer drawer-end min-h-max min-w-80 max-w-80">
-	{#if !$status.isGrimoireApiReachable}
+	{#if missingPermissions}
+		<div class="container flex flex-col min-w-80 max-w-80 min-h-96 p-8">
+			<h2 class="text-xl font-semibold text-center mt-1 mb-4">Permissions required</h2>
+			Before we continue, please grant this extension the necessary permissions.
+			<h3 class="text-lg font-semibold mt-1 mb-4">They will allow us to:</h3>
+			<ul class="list-disc list-inside">
+				<li>connect to your Grimoire instance</li>
+				<li>take screenshots of webpages</li>
+			</ul>
+
+			<button class="btn btn-secondary btn-sm w-full max-w-xs my-4" on:click={requestPermissions}>
+				Request permissions
+			</button>
+		</div>
+	{:else if !$status.isGrimoireApiReachable}
 		<div class="container flex flex-col min-w-80 max-w-80 min-h-96 p-8">
 			<h2 class="text-2xl font-semibold text-center mt-1 mb-4">Sign in</h2>
 			<p class="text-accent text-center mb-4">
@@ -247,7 +299,7 @@
 				bind:value={configuration.grimoireApiUrl}
 				on:keyup={(e) => {
 					if (e.key === 'Enter') {
-						onValidateGrimoireApiUrl();
+						handleGrimoireApiUrlChange();
 					}
 				}}
 			/>
@@ -256,7 +308,7 @@
 			{/if}
 			<button
 				class="btn btn-primary btn-sm w-full max-w-xs my-4"
-				on:click={() => onValidateGrimoireApiUrl()}>Try to connect</button
+				on:click={() => handleGrimoireApiUrlChange()}>Try to connect</button
 			>
 		</div>
 	{:else if !token}

src/shared/handlers/on-add-bookmark.handler.ts

@@ -31,13 +31,19 @@ export async function onAddBookmark(
 
 	try {
 		if (capturePageScreenshot) {
+			logger.debug('onAddBookmark', 'Capturing page screenshot');
 			await new Promise((resolve) => {
 				chrome.tabs.captureVisibleTab(function (screenshotDataUrl) {
 					const screenshotImage = new Image();
 					screenshotImage.src = screenshotDataUrl;
 					screenshotImage.onload = function () {
 						const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
+						logger.debug('onAddBookmark', 'Screenshot loaded', {
+							width: screenshotImage.width,
+							height: screenshotImage.height
+						});
+
 						const canvas = document.createElement('canvas');
 						const ctx = canvas.getContext('2d');
 
@@ -47,13 +53,20 @@ export async function onAddBookmark(
 						canvas.width = (screenshotImage.width / screenshotImage.height) * 800;
 						ctx.drawImage(screenshotImage, 0, 0, canvas.width, canvas.height);
 
+						logger.debug('onAddBookmark', 'Screenshot resized', {
+							width: canvas.width,
+							height: canvas.height
+						});
+
 						// Safari doesn't currently support converting to webp :(
 						// https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL#browser_compatibility
 						const resizedScreenshotDataUrl = canvas.toDataURL(
 							isSafari ? 'image/jpeg' : 'image/webp',
 							0.8
 						);
 
+						logger.debug('onAddBookmark', 'Screenshot converted to data URL');
+
 						screenshot = resizedScreenshotDataUrl;
 
 						resolve(null);
@@ -115,7 +128,7 @@ export async function onAddBookmark(
 
 		updateOnAddBookmarkLoading(!response.bookmark);
 	} catch (error) {
-		logger.error('onAddBookmark', 'Error adding bookmark', error);
+		logger.error('onAddBookmark', 'Error adding bookmark', error?.message);
 
 		updateOnAddBookmarkLoading(true);
 		showToast.error("Couldn't add bookmark. Please try again.");