diff options
| -rw-r--r-- | extension/index.html | 2 | ||||
| -rw-r--r-- | extension/src/Bookmark.tsx | 23 | ||||
| -rw-r--r-- | extension/src/Folder.tsx | 19 | ||||
| -rw-r--r-- | extension/src/main.tsx | 37 |
4 files changed, 31 insertions, 50 deletions
diff --git a/extension/index.html b/extension/index.html index 1bd99ac..4b28d70 100644 --- a/extension/index.html +++ b/extension/index.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <title>Vite + React + TS</title> + <title>Bookmarks Home</title> </head> <body> <div id="root"></div> diff --git a/extension/src/Bookmark.tsx b/extension/src/Bookmark.tsx index d9652a4..c555ffb 100644 --- a/extension/src/Bookmark.tsx +++ b/extension/src/Bookmark.tsx @@ -1,16 +1,21 @@ -interface BookmarkProps { - name: string; - url: string; - icon: string; -} +import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode; -function Bookmark(props: BookmarkProps) { +function Bookmark(props: {data: BookmarkTreeNode}) { return( - <a className="bookmark" href={props.url}> - <img alt="Bookmark icon" src={props.icon}></img> - <span>{props.name}</span> + <a className="bookmark" href={props.data.url}> + <img alt="Bookmark icon" src={faviconURL(props.data.url)}></img> + <span>{props.data.title}</span> </a> ); } +function faviconURL(u: string | undefined) { + if (!u) return ""; + u = new URL(u).origin.toString(); + const url = new URL(chrome.runtime.getURL("/_favicon/")); + url.searchParams.set("pageUrl", u); + url.searchParams.set("size", "32"); + return url.toString(); +} + export default Bookmark;
\ No newline at end of file diff --git a/extension/src/Folder.tsx b/extension/src/Folder.tsx index e831e62..07d56ac 100644 --- a/extension/src/Folder.tsx +++ b/extension/src/Folder.tsx @@ -1,14 +1,19 @@ -interface FolderProps { - name: string; - children?: React.ReactNode; -} +import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode; +import Bookmark from "./Bookmark.tsx"; -function Folder (props: FolderProps) { +function Folder (props: {data: BookmarkTreeNode}) { return ( <div className="folder"> - <span>{props.name}</span> + <span>{props.data.title}</span> <div> - {props.children} + { + props.data.children && + props.data.children.map(child => { + return child.children + ? <Folder data={child} /> + : <Bookmark data={child} /> + }) + } </div> </div> ) diff --git a/extension/src/main.tsx b/extension/src/main.tsx index 36df6f6..0aaf551 100644 --- a/extension/src/main.tsx +++ b/extension/src/main.tsx @@ -1,41 +1,12 @@ import { createRoot } from 'react-dom/client' import './index.css' import Folder from "./Folder.tsx"; -import BookmarkTreeNode = chrome.bookmarks.BookmarkTreeNode; -import Bookmark from "./Bookmark.tsx"; -chrome.bookmarks.getTree((tree) => { - createRoot(document.getElementById('root')!).render(createFolder(tree[0])) -}); - -function createFolder(lev: BookmarkTreeNode) { - return ( - <Folder name={lev.title}> - { - lev.children ? lev.children.map(item => { - if (item.children) { - return createFolder(item) - } else { - return <Bookmark name={item.title} url={item.url ? item.url : ""} icon={faviconURL(item.url)} /> - } - }) : <span>err</span> - } - </Folder> +chrome.bookmarks.getTree(tree => { + createRoot(document.getElementById('root')!).render( + <Folder data={tree[0]} /> ) -} - -function faviconURL(u: string | undefined) { - if (!u) { - return ""; - } - u = new URL(u).origin.toString(); - const url = new URL(chrome.runtime.getURL("/_favicon/")); - url.searchParams.set("pageUrl", u); - url.searchParams.set("size", "32"); - console.log(u) - return url.toString(); -} - +}); // chrome.bookmarks.create( // {'parentId': '0', 'title': 'Bookmarks Extension'}, |