5 files changed, 93 insertions, 0 deletions
diff --git a/extension/src/Bookmark.tsx b/extension/src/Bookmark.tsx
new file mode 100644
index 0000000..d9652a4
--- /dev/null
+++ b/extension/src/Bookmark.tsx
@@ -0,0 +1,16 @@
+interface BookmarkProps {
+    name: string;
+    url: string;
+    icon: string;
+}
+
+function Bookmark(props: BookmarkProps) {
+    return(
+        <a className="bookmark" href={props.url}>
+            <img alt="Bookmark icon" src={props.icon}></img>
+            <span>{props.name}</span>
+        </a>
+    );
+}
+
+export default Bookmark;
+\ No newline at end of file
diff --git a/extension/src/Folder.tsx b/extension/src/Folder.tsx
new file mode 100644
index 0000000..e831e62
--- /dev/null
+++ b/extension/src/Folder.tsx
@@ -0,0 +1,17 @@
+interface FolderProps {
+    name: string;
+    children?: React.ReactNode;
+}
+
+function Folder (props: FolderProps) {
+    return (
+        <div className="folder">
+            <span>{props.name}</span>
+            <div>
+                {props.children}
+            </div>
+        </div>
+    )
+}
+
+export default Folder;
+\ No newline at end of file
diff --git a/extension/src/index.css b/extension/src/index.css
new file mode 100644
index 0000000..63a2a92
--- /dev/null
+++ b/extension/src/index.css
@@ -0,0 +1,14 @@
+.folder {
+  display: flex;
+  flex-direction: column;
+  border-width: 2px;
+  border-style: solid;
+  border-color: black;
+  padding: 2px;
+  margin: 2px;
+}
+
+.folder > div {
+  display: flex;
+  flex-direction: column;
+}
+\ No newline at end of file
diff --git a/extension/src/main.tsx b/extension/src/main.tsx
new file mode 100644
index 0000000..36df6f6
--- /dev/null
+++ b/extension/src/main.tsx
@@ -0,0 +1,45 @@
+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>
+    )
+}
+
+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'},
+//     function (newFolder) {
+//         console.log("added folder: " + newFolder.title);
+//     },
+// );
+\ No newline at end of file
diff --git a/extension/src/vite-env.d.ts b/extension/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/extension/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />