enhance: refactor how displaying favicons work

scripts/constants.ts

@@ -11,7 +11,7 @@ export const extension = {
     'storage',
     'unlimitedStorage',
     'alarms',
-    ...(isFirefox ? ['cookies'] : ['system.display'])
+    ...(isFirefox ? ['cookies'] : ['system.display', 'favicon'])
   ],
   firefoxId: 'sessonic@navorite'
 };

src/lib/components/popup/TabItem.svelte

@@ -3,10 +3,8 @@
   import type { ETab } from '@/lib/types';
   import { createEventDispatcher } from 'svelte';
   import { IconButton } from '@/lib/components';
-  import { decompress as decompressLZ } from 'lz-string';
   import { filterOptions } from '@/lib/stores';
-  import { getTabType, markResult } from '@/lib/utils';
-  import { runtimeURL } from '@/lib/constants';
+  import { getFavIcon, getFavIconType, markResult } from '@/lib/utils';
 
   export let tab: ETab;
   export let current = false;
@@ -15,12 +13,7 @@
 
   $: active = tab.active ? 'text-link' : '';
 
-  let favIconUrl: string;
-
-  $: favIconUrl = tab.favIconUrl ? decompressLZ(tab.favIconUrl) : '';
-
-  $: isBrowserTab =
-    favIconUrl?.startsWith('chrome') && !favIconUrl.startsWith(runtimeURL);
+  $: favIconUrl = getFavIcon(tab.url, tab.favIconUrl);
 
   $: title =
     $filterOptions?.query.trim() && tab.title
@@ -33,7 +26,7 @@
 {#if tab?.url}
   <li class="tab-container group">
     <a class="link" href={tab.url} target="_blank">
-      {#if favIconUrl && !isBrowserTab}
+      {#if favIconUrl}
         <img
           style:width="1rem"
           style:height="1rem"
@@ -45,7 +38,7 @@
         />
       {:else}
         <IconButton
-          icon={getTabType(tab.url)}
+          icon={getFavIconType(tab.url)}
           class="max-h-[1rem] min-h-[1rem] min-w-[1rem] max-w-[1rem] rounded-md text-lg {active ||
             'text-neutral-content'}"
         />

src/lib/constants/shared.ts

@@ -36,10 +36,13 @@ export const autoSaveDefaults = {
   autoSaveTimer: 15
 };
 
-export const tabType: Record<string, Icon> = {
-  '://settings': 'settings',
-  '://history': 'history',
-  'extension://': 'extension',
-  '://extensions': 'extension',
-  '://newtab': 'chrometab'
+export const favIconAllowedList: string[] = [
+  'http',
+  'data:image',
+  ...(isFirefox ? ['chrome://branding'] : [])
+];
+
+export const favIconDisallowedList: Record<string, Icon> = {
+  'about:addons': 'extension',
+  'about:preferences': 'settings'
 };

src/lib/types/extension.ts

@@ -30,7 +30,7 @@ export type Icon =
   | 'incognito'
   | 'window'
   | 'tab'
-  | 'chrometab'
+  | 'global'
   | 'extension'
   | 'history'
   | 'expand'

src/lib/utils/extension.ts

@@ -1,7 +1,12 @@
 import type { Icon, Page } from '@/lib/types';
 import browser from 'webextension-polyfill';
-import { isFirefox, runtimeURL } from '@constants/shared';
-import { tabType } from '@constants/shared';
+import {
+  favIconAllowedList,
+  favIconDisallowedList,
+  isFirefox,
+  runtimeURL
+} from '@constants/shared';
+import { decompress } from 'lz-string';
 
 export function isExtensionViewed() {
   return document.visibilityState === 'visible';
@@ -61,10 +66,32 @@ export function getExtensionURL(page?: Page, query: string = '') {
   return `${runtimeURL}src/${page}/index.html${query}`;
 }
 
-export function getTabType(url: string): Icon {
-  for (const tab in tabType) {
-    if (url.includes(tab)) return tabType[tab] as Icon;
-  }
+// Get the favIcon
+export function getFavIcon(
+  url: string | undefined,
+  favIconUrl: string | undefined
+) {
+  if (!url) return null;
+
+  if (favIconUrl) favIconUrl = decompress(favIconUrl);
 
-  return 'tab';
+  if (
+    (isFirefox || url.startsWith('http')) &&
+    favIconAllowedList.some((favIcon) => favIconUrl?.startsWith(favIcon))
+  )
+    return favIconUrl;
+
+  return defaultFavIcon(url);
 }
+
+// Get a fall-back icon for some urls
+export const getFavIconType = (url: string) => {
+  for (const tab in favIconDisallowedList) {
+    if (url.includes(tab)) return favIconDisallowedList[tab] as Icon;
+  }
+
+  return 'global';
+};
+
+const defaultFavIcon = (url: string) =>
+  isFirefox ? null : `${runtimeURL}_favicon/?pageUrl=${url}&size=16`;

src/lib/utils/getSession.ts

@@ -1,7 +1,7 @@
-import browser from 'webextension-polyfill';
 import type { ESession, ETab, QueryInfo, compressOptions } from '@/lib/types';
-import { compress_options, tabAttr } from '@/lib/constants/shared';
+import browser from 'webextension-polyfill';
 import { compress as compressLZ } from 'lz-string';
+import { compress_options, tabAttr } from '@/lib/constants/shared';
 import { getExtensionURL } from '@/lib/utils/extension';
 import { compress } from '@utils/compress';