Implemented routing to be more compatible for extension popup

src/hooks.ts

@@ -1,8 +1,13 @@
-/** @type {import('@sveltejs/kit').Reroute} */
-export function reroute({url}) {
+import type { Reroute } from "@sveltejs/kit";
+
+export const reroute: Reroute = ({url}) => {
   // Reroute index.html as just / for the root.
   // Browser extension starts from with the index.html file in the pathname which is not correct for the router.
   if (url.pathname === '/index.html') {
+    if (url.searchParams.has('path')) {
+      return url.searchParams.get('path')!;
+    }
+
     return "/";
   }
-}
+};

src/lib/popup-links.ts

@@ -0,0 +1,48 @@
+function resolveReplaceableLink(target: EventTarget | null = null): HTMLAnchorElement | null {
+  if (!(target instanceof HTMLElement)) {
+    return null;
+  }
+
+  const closestLink = target.closest('a');
+
+  if (
+    closestLink instanceof HTMLAnchorElement
+    && !closestLink.search
+    && closestLink.origin === location.origin
+  ) {
+    return closestLink;
+  }
+
+  return null;
+}
+
+function replaceLink(linkElement: HTMLAnchorElement) {
+  const params = new URLSearchParams([
+    ['path', linkElement.pathname]
+  ]);
+
+  linkElement.search = params.toString();
+  linkElement.pathname = "/index.html";
+}
+
+export function initializeLinksReplacement(): () => void {
+  const abortController = new AbortController();
+  const replacementHandler = (event: Event) => {
+    const closestLink = resolveReplaceableLink(event.target);
+
+    if (closestLink) {
+      replaceLink(closestLink);
+    }
+  }
+
+  // Dynamically replace the links from the Svelte default links to the links usable for the popup.
+  document.body.addEventListener('mousedown', replacementHandler, {
+    signal: abortController.signal,
+  });
+
+  document.body.addEventListener('click', replacementHandler, {
+    signal: abortController.signal,
+  })
+
+  return () => abortController.abort();
+}

src/routes/+layout.svelte

@@ -2,6 +2,8 @@
   import "../styles/popup.scss";
   import Header from "$components/layout/Header.svelte";
   import Footer from "$components/layout/Footer.svelte";
+  import { initializeLinksReplacement } from "$lib/popup-links";
+  import { onDestroy } from "svelte";
 
   interface Props {
     children?: import('svelte').Snippet;
@@ -12,6 +14,12 @@
   // Sort of a hack, detect if we rendered in the browser tab or in the popup.
   // Popup will always should have fixed 320px size, otherwise we consider it opened in the tab.
   document.body.classList.toggle('is-in-tab', window.innerWidth > 320);
+
+  const disconnectLinkReplacement = initializeLinksReplacement();
+
+  onDestroy(() => {
+    disconnectLinkReplacement();
+  })
 </script>
 
 <Header/>