From 82bc478b999ba0cacce1d2ca9a6edf30dbe2ba7f Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Sat, 23 Nov 2024 21:06:09 -0500
Subject: HIGH QUALITY ICONS

---
 extension/public/background.js        | 10 ++++++++++
 extension/public/iconGrabber.js       | 15 +++++++++++++++
 extension/public/manifest.json        |  9 ++++++++-
 extension/src/assets/globe.svg        |  1 +
 extension/src/components/Bookmark.tsx | 32 +++++++++++++++++++++++---------
 extension/src/main.tsx                |  9 +++++++++
 6 files changed, 66 insertions(+), 10 deletions(-)
 create mode 100644 extension/public/background.js
 create mode 100644 extension/public/iconGrabber.js
 create mode 100644 extension/src/assets/globe.svg

diff --git a/extension/public/background.js b/extension/public/background.js
new file mode 100644
index 0000000..06c75eb
--- /dev/null
+++ b/extension/public/background.js
@@ -0,0 +1,10 @@
+chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
+    console.log("received message", request)
+    let [url, icon] = request;
+    let bmk = (await chrome.bookmarks.search({url : url}));
+    console.log(bmk)
+    if (bmk && bmk.length > 0) {
+        await chrome.storage.local.set({["icon-"+bmk[0].id]: icon});
+    }
+    sendResponse();
+})
diff --git a/extension/public/iconGrabber.js b/extension/public/iconGrabber.js
new file mode 100644
index 0000000..63ba7e0
--- /dev/null
+++ b/extension/public/iconGrabber.js
@@ -0,0 +1,15 @@
+const tagTypes = ["apple-touch-icon", "shortcut icon", "icon"]
+
+let x = Array.from(document.getElementsByTagName("link"))
+    .filter(elem => tagTypes.includes(elem.rel))
+    .sort((a, b) => {
+        let tagCompare = tagTypes.indexOf(a.rel) - tagTypes.indexOf(b.rel);
+        if (tagCompare !== 0) return tagCompare;
+        try { return Number(b.sizes[0].split('x')[0]) - Number(a.sizes[0].split('x')[0]); }
+        catch { return -1; }
+    })
+    .map(elem => elem.href);
+
+chrome.runtime.sendMessage([window.location.href, x[0]]).catch(() => {
+    console.log("failed to send message")
+})
\ No newline at end of file
diff --git a/extension/public/manifest.json b/extension/public/manifest.json
index 9f5dc51..27ba801 100644
--- a/extension/public/manifest.json
+++ b/extension/public/manifest.json
@@ -15,5 +15,12 @@
   "permissions": [
     "bookmarks",
     "storage"
-  ]
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [{
+    "js": ["iconGrabber.js"],
+    "matches": ["<all_urls>"]
+  }]
 }
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/>)
 
-- 
cgit v1.2.3