Push experimental codedirect-fetch-icons

4 files changed, 137 insertions, 39 deletions

diff --git a/extension/public/background.js b/extension/public/background.js
index 1f09158..0f9e3e3 100644
--- a/extension/public/background.js
+++ b/extension/public/background.js
@@ -2,27 +2,73 @@ function getBrowser() {
     return typeof browser === "undefined" ? chrome : browser;
 }
 
-function toDataURL(url) {
-    return fetch(url)
-        .then(response => response.blob())
-        .then(blob => new Promise((resolve, reject) => {
-            const reader = new FileReader()
-            reader.onloadend = () => resolve(reader.result)
-            reader.onerror = reject
-            reader.readAsDataURL(blob)
-        }))
-}
+// function toDataURL(url) {
+//     return fetch(url)
+//         .then(response => response.blob())
+//         .then(blob => new Promise((resolve, reject) => {
+//             const reader = new FileReader()
+//             reader.onloadend = () => resolve(reader.result)
+//             reader.onerror = reject
+//             reader.readAsDataURL(blob)
+//         }))
+// }
+//
+// async function getDocument(url) {
+//     let res = await fetch(url)
+//     let html = await res.text();
+
+    // console.log("html", url);
+    // await chrome.offscreen.createDocument({
+    //     url: url,
+    //     reasons: ["DOM_SCRAPING"],
+    //     justification: "locating highest quality icons"
+    // })
+// }
+
+// function getGoogleFavicons(u) {
+//     const url = new URL('https://www.google.com/s2/favicons');
+//     url.searchParams.set("sz", "256");
+//     url.searchParams.set("domain_url", u);
+//     return url.toString();
+// }
 
-getBrowser().runtime.onMessage.addListener(async (request, sender, sendResponse) => {
-    console.log("received message", request)
-    let [url, icon] = request;
+// function getIcons(doc) {
+//     const tagTypes = ["apple-touch-icon", "shortcut icon", "icon"]
+//
+//     return Array.from(doc.getElementsByTagName("link"))
+//         .filter(elem => tagTypes.includes(elem.rel))
+//         .sort((a, b) => {
+//             function compareTags() {
+//                 // ascending
+//                 return tagTypes.indexOf(a.rel) - tagTypes.indexOf(b.rel);
+//             }
+//             function compareSizes() {
+//                 function getSize(elem) {
+//                     try { return Number(elem.sizes[0].split('x')[0]); }
+//                     catch { return 0; }
+//                 }
+//                 // descending
+//                 return getSize(b) - getSize(a);
+//             }
+//
+//             return compareSizes() || compareTags()
+//         })
+//         .map(elem => elem.href);
+// }
 
-    let bmk = (await getBrowser().bookmarks.search({url : url}));
-    console.log(bmk)
-    if (bmk && bmk.length > 0) {
-        let imgData = await toDataURL(icon)
-        // console.log(imgData)
-        await getBrowser().storage.local.set({["icon-cache-"+bmk[0].id]: imgData});
-    }
-    sendResponse();
+getBrowser().runtime.onMessage.addListener((request, sender, sendResponse) => {
+    // let url = request;
+    //
+    // let doc = await getDocument(url);
+    // let icons = getIcons(doc);
+    // if (icons.length <= 0) return;
+    // console.log(icons[0])
+    // let imgData = await toDataURL(icons[0]);
+    // await getBrowser().storage.local.set({["icon-cache-"+bmk[0].id]: imgData});
+    fetch(request).then(r1 => {
+        r1.text().then(r2 => {
+            sendResponse(r2)
+        }).catch(ex => console.log("Failed to get text", request, ex))
+    }).catch(ex => console.log("Failed to fetch", request, ex))
+    return true;
 })
diff --git a/extension/public/iconGrabber.js b/extension/public/iconGrabber.js
index b02e315..8b7935e 100644
--- a/extension/public/iconGrabber.js
+++ b/extension/public/iconGrabber.js
@@ -26,6 +26,6 @@ let x = Array.from(document.getElementsByTagName("link"))
 console.log("found icons", x.map(elem => elem.outerHTML));
 x = x.map(elem => elem.href);
 
-getBrowser().runtime.sendMessage([window.location.href, x[0]]).catch(() => {
-    console.log("failed to send message")
-})
\ No newline at end of file
+// getBrowser().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 27ba801..996ef5f 100644
--- a/extension/public/manifest.json
+++ b/extension/public/manifest.json
@@ -14,7 +14,8 @@
   "author": "Owen Howell, Tyler Ferrari, Ariel Levy; students at RIT",
   "permissions": [
     "bookmarks",
-    "storage"
+    "storage",
+    "offscreen"
   ],
   "background": {
     "service_worker": "background.js"
diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx
index 839a9f5..64b0a17 100644
--- a/extension/src/components/Bookmark.tsx
+++ b/extension/src/components/Bookmark.tsx
@@ -40,28 +40,79 @@ function Bookmark(props: {data: BookmarkTreeNode}) {
  * @return The URL of the icon
  */
 async function faviconURL(data: BookmarkTreeNode) {
-    let i = (await getBrowser().storage.local.get("icon-cache-"+data.id))["icon-cache-"+data.id];
-    if (i) return i
+    let url = new URL(data.url!).origin.toString();
+    let response = (await getBrowser().storage.local.get("icon-cache-"+data.id))["icon-cache-"+data.id];
+    if (response) return response;
 
-    const url = new URL('https://www.google.com/s2/favicons');
-    url.searchParams.set("sz", "256");
-    url.searchParams.set("domain_url", data.url!);
-    let resp = await fetch(url)
-    let imgData = resp.ok ? await toDataURL(url.toString()) : GlobeIcon;
-    getBrowser().storage.local.set({["icon-cache-"+data.id]: imgData});
+    let imgData = await getFavicon(url);
+    console.log("imgdata", imgData)
+    if (imgData) {
+        await getBrowser().storage.local.set({["icon-cache-"+data.id]: imgData});
+        return imgData;
+    }
+}
+
+async function getFavicon(url: string) {
+    // get html from service worker
+    let response = await chrome.runtime.sendMessage(url)
+    if (!response) {
+        console.log("failed to fetch site", url);
+        return;
+    }
+
+    // parse html
+    let parser = new DOMParser();
+    let doc = parser.parseFromString(response, 'text/html');
+
+    // locate best icons
+    const tagTypes = ["apple-touch-icon", "shortcut icon", "icon"]
+    let icons =  Array.from(doc.getElementsByTagName("link"))
+        .filter(elem => tagTypes.includes(elem.rel))
+        .sort((a, b) => {
+            function compareTags() {
+                // ascending
+                return tagTypes.indexOf(a.rel) - tagTypes.indexOf(b.rel);
+            }
+            function compareSizes() {
+                function getSize(elem: any) {
+                    try { return Number(elem.sizes[0].split('x')[0]); }
+                    catch { return 0; }
+                }
+                // descending
+                return getSize(b) - getSize(a);
+            }
+
+            return compareSizes() || compareTags()
+        })
+        .map(elem => {
+            const extUrl = getBrowser().runtime.getURL("");
+            return elem.href.replace(extUrl, url + "/");
+        });
+    if (icons.length <= 0) {
+        console.log("did not find icon on", url)
+        return;
+    }
+
+    // encode icon
+    let imgData = toDataURL(icons[0]);
     return imgData;
 }
 
-function toDataURL(url:string):string {
-    // @ts-ignore
-    return fetch(url)
-        .then(response => response.blob())
-        .then(blob => new Promise((resolve, reject) => {
+async function toDataURL(url: string): Promise<string> {
+    try {
+        let response = await fetch(url);
+        let blob = await response.blob();
+        let res = await new Promise<string | ArrayBuffer | null>((resolve, reject) => {
             const reader = new FileReader()
             reader.onloadend = () => resolve(reader.result)
             reader.onerror = reject
             reader.readAsDataURL(blob)
-        }))
+        })
+        return res!.toString();
+    } catch (ex) {
+        console.log("Failed ToDataURL", url, ex);
+        return "";
+    }
 }
 
 export default Bookmark;
\ No newline at end of file