fix: properly handle page icon parsed from browser API (Firefox); resolve errors related to properties of undefined (Firefox)

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.0",
+	"version": "0.1.1",
 	"description": "Companion extension for Grimoire.",
 	"author": "Robert Goniszewski <robert@goniszewski.com>",
 	"scripts": {

src/popup.svelte

@@ -55,20 +55,20 @@
 	$: $updatedUrl = $currentTab.url;
 
 	async function onValidateGrimoireApiUrl() {
-		if (!configuration.grimoireApiUrl) {
+		if (!configuration?.grimoireApiUrl) {
 			$status.isGrimoireApiReachable = false;
 
 			showToast.error('Grimoire API URL is empty!');
 		}
 
-		const isGrimoireApiReachable = await validateGrimoireApiUrl(configuration.grimoireApiUrl).catch(
-			(error) => {
-				logger.error('onValidateGrimoireApiUrl', 'Error validating Grimoire API URL', error);
-				showToast(`Grimoire API is ${isGrimoireApiReachable}!`);
+		const isGrimoireApiReachable = await validateGrimoireApiUrl(
+			configuration?.grimoireApiUrl
+		).catch((error) => {
+			logger.error('onValidateGrimoireApiUrl', 'Error validating Grimoire API URL', error);
+			showToast(`Grimoire API is ${isGrimoireApiReachable}!`);
 
-				return false;
-			}
-		);
+			return false;
+		});
 
 		if ($status.isGrimoireApiReachable && !isGrimoireApiReachable) {
 			showToast.error('Grimoire API is not reachable!');
@@ -99,7 +99,7 @@
 			name: 'fetch-categories-tags',
 			body: {
 				token,
-				grimoireApiUrl: configuration.grimoireApiUrl
+				grimoireApiUrl: configuration?.grimoireApiUrl
 			}
 		});
 
@@ -125,7 +125,10 @@
 
 		const theme = await storage.get('theme');
 		token = await storage.get('token');
-		configuration = await storage.get('configuration');
+		configuration = (await storage.get('configuration')) || {
+			grimoireApiUrl: '',
+			saveScreenshot: false
+		};
 
 		if (theme) {
 			document.documentElement.setAttribute('data-theme', themes[theme]);
@@ -188,7 +191,7 @@
 		$loading.isSigningIn = true;
 
 		const newToken = await handleSignIn(
-			configuration.grimoireApiUrl,
+			configuration?.grimoireApiUrl,
 			$credentials.emailOrUsername,
 			$credentials.password
 		);
@@ -458,8 +461,8 @@
 								onAddBookmark(
 									$currentTab,
 									token,
-									configuration.grimoireApiUrl,
-									configuration.saveScreenshot
+									configuration?.grimoireApiUrl,
+									configuration?.saveScreenshot
 								)}
 							disabled={$loading.isAddingBookmark && !$loading.justAddedBookmark}
 						>

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

@@ -27,6 +27,8 @@ export async function onAddBookmark(
 
 	let screenshot: string = '';
 
+	const iconIsDataUrl = $currentTab.icon_url.startsWith('data:');
+
 	try {
 		if (capturePageScreenshot) {
 			await new Promise((resolve) => {
@@ -62,7 +64,7 @@ export async function onAddBookmark(
 		logger.debug('onAddBookmark', 'Bookmark body', {
 			url: $currentTab.url,
 			title: $currentTab.title,
-			icon_url: $currentTab.icon_url,
+			icon_url: iconIsDataUrl ? '' : $currentTab.icon_url,
 			main_image_url: $currentTab.mainImage,
 			content_html: $currentTab.contentHtml,
 			description: $currentTab.description,
@@ -71,7 +73,8 @@ export async function onAddBookmark(
 			note: $currentTab.note,
 			importance: $currentTab.importance,
 			flagged: $currentTab.flagged,
-			screenshot
+			screenshot,
+			...(iconIsDataUrl ? { icon: $currentTab.icon_url } : {})
 		});
 
 		const response = await sendToBackground<
@@ -91,7 +94,7 @@ export async function onAddBookmark(
 				bookmark: {
 					url: $currentTab.url,
 					title: $currentTab.title,
-					icon_url: $currentTab.icon_url,
+					icon_url: iconIsDataUrl ? '' : $currentTab.icon_url,
 					main_image_url: $currentTab.mainImage,
 					content_html: $currentTab.contentHtml,
 					description: $currentTab.description,
@@ -100,7 +103,8 @@ export async function onAddBookmark(
 					note: $currentTab.note,
 					importance: $currentTab.importance,
 					flagged: $currentTab.flagged,
-					screenshot
+					screenshot,
+					...(iconIsDataUrl ? { icon: $currentTab.icon_url } : {})
 				}
 			}
 		});

src/shared/types/add-bookmark.type.ts

@@ -10,6 +10,7 @@ export type AddBookmarkRequestBody = {
 	note?: string;
 	main_image_url?: string;
 	icon_url?: string;
+	icon?: string;
 	importance?: number;
 	flagged?: boolean;
 	category: string;