diff options
Diffstat (limited to 'extension')
| -rw-r--r-- | extension/public/background.js | 16 | ||||
| -rw-r--r-- | extension/public/manifest.json | 2 | ||||
| -rw-r--r-- | extension/src/components/Bookmark.tsx | 27 |
3 files changed, 36 insertions, 9 deletions
diff --git a/extension/public/background.js b/extension/public/background.js index c3ee421..1f09158 100644 --- a/extension/public/background.js +++ b/extension/public/background.js @@ -2,13 +2,27 @@ 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) + })) +} + getBrowser().runtime.onMessage.addListener(async (request, sender, sendResponse) => { console.log("received message", request) let [url, icon] = request; + let bmk = (await getBrowser().bookmarks.search({url : url})); console.log(bmk) if (bmk && bmk.length > 0) { - await getBrowser().storage.local.set({["icon-"+bmk[0].id]: icon}); + let imgData = await toDataURL(icon) + // console.log(imgData) + await getBrowser().storage.local.set({["icon-cache-"+bmk[0].id]: imgData}); } sendResponse(); }) diff --git a/extension/public/manifest.json b/extension/public/manifest.json index 3e4c78d..27ba801 100644 --- a/extension/public/manifest.json +++ b/extension/public/manifest.json @@ -17,7 +17,7 @@ "storage" ], "background": { - "scripts": ["background.js"] + "service_worker": "background.js" }, "content_scripts": [{ "js": ["iconGrabber.js"], diff --git a/extension/src/components/Bookmark.tsx b/extension/src/components/Bookmark.tsx index d9dd7cb..839a9f5 100644 --- a/extension/src/components/Bookmark.tsx +++ b/extension/src/components/Bookmark.tsx @@ -15,7 +15,7 @@ function Bookmark(props: {data: BookmarkTreeNode}) { // faviconURL(props.data.url).then(o => o && setFavicon(o)) faviconURL(props.data).then(r => { if (r) { - setFavicon(r); + setFavicon(r) } }) }, []); @@ -25,7 +25,7 @@ function Bookmark(props: {data: BookmarkTreeNode}) { <div className={"icon-box" + (isSmall ? " small" : "")}> <img alt="Bookmark icon" src={favicon} - onLoad={(e) => setSmall(e.currentTarget.naturalWidth < 75 && !favicon.endsWith(".svg") && favicon !== GlobeIcon)} + onLoad={(e) => setSmall(e.currentTarget.naturalWidth < 75 && !favicon.startsWith("data:image/svg+xml"))} ></img> </div> <span>{props.data.title}</span> @@ -40,15 +40,28 @@ 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 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"); url.searchParams.set("domain_url", data.url!); - if ((await fetch(url)).ok) { - return url.toString(); - } + let resp = await fetch(url) + let imgData = resp.ok ? await toDataURL(url.toString()) : GlobeIcon; + getBrowser().storage.local.set({["icon-cache-"+data.id]: imgData}); + return imgData; +} + +function toDataURL(url:string):string { + // @ts-ignore + 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) + })) } export default Bookmark;
\ No newline at end of file |