diff options
| -rw-r--r-- | extension/public/background.js | 10 | ||||
| -rw-r--r-- | extension/public/iconGrabber.js | 15 | ||||
| -rw-r--r-- | extension/public/manifest.json | 9 | ||||
| -rw-r--r-- | extension/src/assets/globe.svg | 1 | ||||
| -rw-r--r-- | extension/src/components/Bookmark.tsx | 32 | ||||
| -rw-r--r-- | extension/src/main.tsx | 9 |
6 files changed, 66 insertions, 10 deletions
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/>) |
