feat: captureVisibleTab fallback for tab previews

entrypoints/background.ts

@@ -48,6 +48,7 @@ export default defineBackground(() =>
 
 			graphicsCache[tab.url] = {
 				preview: graphicsCache[tab.url]?.preview,
+				capture: graphicsCache[tab.url]?.capture,
 				icon: tab.favIconUrl ?? graphicsCache[tab.url]?.icon
 			};
 		});
@@ -61,10 +62,46 @@ export default defineBackground(() =>
 		{
 			graphicsCache[data.url] = {
 				preview: data.thumbnail,
+				capture: graphicsCache[data.url]?.capture,
 				icon: graphicsCache[data.url]?.icon
 			};
 		});
 
+		setupTabCaputre();
+		async function setupTabCaputre(): Promise<void>
+		{
+			const tryCaptureTab = async (tab: Tabs.Tab): Promise<void> =>
+			{
+				if (!tab.url || tab.status !== "complete" || !tab.active)
+					return;
+
+				try
+				{
+					// We use chrome here because polyfill throws uncatchable errors for some reason
+					// It's a compatible API anyway
+					const capture: string = await chrome.tabs.captureVisibleTab(tab.windowId!, { format: "jpeg", quality: 1 });
+
+					if (capture)
+					{
+						graphicsCache[tab.url] = {
+							capture,
+							preview: graphicsCache[tab.url]?.preview,
+							icon: graphicsCache[tab.url]?.icon
+						};
+
+						logger("Captured tab", tab.url);
+					}
+				}
+				catch (ex) { logger(ex); }
+			};
+
+			setInterval(() =>
+			{
+				browser.tabs.query({ active: true })
+					.then(tabs => tabs.forEach(tab => tryCaptureTab(tab)));
+			}, 1000);
+		}
+
 		setupContextMenu();
 		async function setupContextMenu(): Promise<void>
 		{

entrypoints/sidepanel/components/TabView.tsx

@@ -69,7 +69,7 @@ export default function TabView({ tab, indices, dragOverlay }: TabViewProps): Re
 		>
 			{ tilesView &&
 				<img
-					src={ graphics[tab.url]?.preview ?? pagePlaceholder }
+					src={ graphics[tab.url]?.preview ?? graphics[tab.url]?.capture ?? pagePlaceholder }
 					onError={ e => e.currentTarget.src = pagePlaceholder }
 					className={ cls.image } draggable={ false } />
 			}

eslint.config.js

@@ -87,7 +87,8 @@ export default defineConfig([
 			"@stylistic/no-mixed-spaces-and-tabs": ["warn"],
 			"@typescript-eslint/no-unused-vars": ["warn"],
 			"prefer-const": ["warn"],
-			"@stylistic/padded-blocks": ["warn"]
+			"@stylistic/padded-blocks": ["warn"],
+			"no-empty": ["off"]
 		}
 	},
 	{

features/collectionStorage/utils/updateGraphics.ts

@@ -13,6 +13,7 @@ export default async function updateGraphics(
 	function getGraphics(url: string): GraphicsItem | null
 	{
 		const preview = tempGraphics[url]?.preview ?? localGraphics[url]?.preview;
+		const capture = tempGraphics[url]?.capture ?? localGraphics[url]?.capture;
 		const icon = tempGraphics[url]?.icon ?? localGraphics[url]?.icon;
 
 		const graphics: GraphicsItem = {};
@@ -21,6 +22,8 @@ export default async function updateGraphics(
 			graphics.preview = preview;
 		if (icon)
 			graphics.icon = icon;
+		if (capture)
+			graphics.capture = capture;
 
 		return preview || icon ? graphics : null;
 	}

features/migration/utils/migrateCollections.ts

@@ -13,12 +13,12 @@ export default function migrateCollections(legacyCollections: LegacyCollection[]
 		{
 			const title: string | undefined = legacyCollection.titles[index];
 			const icon: string | undefined = legacyCollection.icons?.[index];
-			const preview: string | undefined = legacyCollection.thumbnails?.[index];
+			const capture: string | undefined = legacyCollection.thumbnails?.[index];
 
 			if (!graphics[url])
-				graphics[url] = { icon, preview };
+				graphics[url] = { icon, capture };
 			else
-				graphics[url] = { icon: graphics[url].icon ?? icon, preview: graphics[url].preview ?? preview };
+				graphics[url] = { icon: graphics[url].icon ?? icon, capture: graphics[url].preview ?? capture };
 
 			return {
 				type: "tab",

features/migration/utils/migrateStorage.ts

@@ -38,11 +38,11 @@ export default async function migrateStorage(): Promise<void>
 	for (const [key, record] of Object.entries(v2Graphics))
 	{
 		if (!graphics[key])
-			graphics[key] = { icon: record.iconUrl, preview: record.pageCapture };
+			graphics[key] = { icon: record.iconUrl, capture: record.pageCapture };
 		else
 		{
 			graphics[key].icon ??= record.iconUrl;
-			graphics[key].preview ??= record.pageCapture;
+			graphics[key].capture ??= record.pageCapture;
 		}
 	}
 

models/CollectionModels.ts

@@ -37,5 +37,6 @@ export type GraphicsStorage = Record<string, GraphicsItem>;
 export type GraphicsItem =
 	{
 		preview?: string;
+		capture?: string;
 		icon?: string;
 	};