3 files changed, 33 insertions, 9 deletions
diff --git a/extension/src/assets/globe.svg b/extension/src/assets/globe.svg
new file mode 100644
index 0000000..b87a4d9
--- /dev/null
+++ b/extension/src/assets/globe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-82v-78q-33 0-56.5-23.5T360-320v-40L168-552q-3 18-5.5 36t-2.5 36q0 121 79.5 212T440-162Zm276-102q20-22 36-47.5t26.5-53q10.5-27.5 16-56.5t5.5-59q0-98-54.5-179T600-776v16q0 33-23.5 56.5T520-680h-80v80q0 17-11.5 28.5T400-560h-80v80h240q17 0 28.5 11.5T600-440v120h40q26 0 47 15.5t29 40.5Z"/></svg>
+\ No newline at end of file
diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx
index 75badd7..c12da35 100644
--- a/extension/src/components/Bookmark.tsx
+++ b/extension/src/components/Bookmark.tsx
@@ -1,4 +1,7 @@
 import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
+import GlobeIcon from "../assets/globe.svg"
+import React, {useEffect} from "react";
+import {getBrowser} from "../main.tsx";
 
 /**
  * A component for a single bookmark
@@ -6,9 +9,19 @@ import BookmarkTreeNode = browser.bookmarks.BookmarkTreeNode;
  * @param props.data The BookmarkTreeNode with the data for the bookmark
  */
 function Bookmark(props: {data: BookmarkTreeNode}) {
+    let [favicon, setFavicon] = React.useState(GlobeIcon);
+    useEffect(() => {
+        // faviconURL(props.data.url).then(o => o && setFavicon(o))
+        faviconURL(props.data).then(r => {
+            if (r) {
+                setFavicon(r);
+            }
+        })
+    }, []);
+
     return(
         <a className="bookmark draggable" href={props.data.url}>
-            <img alt="Bookmark icon" src={faviconURL(props.data.url)}></img>
+            <img alt="Bookmark icon" src={favicon}></img>
             <span>{props.data.title}</span>
         </a>
     );
@@ -17,18 +30,19 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
 /**
  * Gets the icon for a bookmark
  *
- * @param u The URL of the link
+ * @param data The URL of the link
  * @return The URL of the icon
  */
-function faviconURL(u: string | undefined) {
-    if (!u) return "";
-    u = new URL(u).hostname.toString();
+async function faviconURL(data: BookmarkTreeNode) {
+
+    let i = (await getBrowser().storage.local.get("icon-"+data.id))["icon-"+data.id];
+    if (i) return i.toString()
     const url = new URL('https://www.google.com/s2/favicons');
     url.searchParams.set("sz", "256");
-    // u = u.split(".")[u.split(".").length-2] +"."+ u.split(".")[u.split(".").length-1]
-    url.searchParams.set("domain_url", u);
-    return url.toString();
-
+    url.searchParams.set("domain_url", data.url!);
+    if ((await fetch(url)).ok) {
+        return url.toString();
+    }
 }
 
 export default Bookmark;
 \ No newline at end of file
diff --git a/extension/src/main.tsx b/extension/src/main.tsx
index d1fa6c2..40cc4f4 100644
--- a/extension/src/main.tsx
+++ b/extension/src/main.tsx
@@ -9,6 +9,15 @@ export function getBrowser() {
         return browser;
     }
 }
+//
+// getBrowser().runtime.onMessage.addListener((message) => {
+//     console.log(message);
+//     if (message[0] === "icon") {
+//         getBrowser().bookmarks.search({url : message[1]}).then(r => {
+//             getBrowser().storage.local.set({["icon-"+r[0].id] : message[2]});
+//         })
+//     }
+// })
 
 createRoot(document.body).render(<Body/>)