fix: better caching, dont use wxt:locationchange and listen on popstate instead

src/entrypoints/background.ts

···
+import { PersistentCache } from "@/lib/cache";
 import { expect } from "@/lib/result";
 import {
   type Fronter,
···
   getSpFronters,
   memberUriString,
   putFronter,
+  frontersCache,
 } from "@/lib/utils";
 import { parseResourceUri, ResourceUri } from "@atcute/lexicons";
 
···
   main: () => {
     console.log("setting up background script");
 
-    let fronters = new Map<ResourceUri, Fronter | null>();
-    const cacheFronter = (uri: ResourceUri, fronter: Fronter) => {
+    const cacheFronter = async (uri: ResourceUri, fronter: Fronter) => {
       const parsedUri = expect(parseResourceUri(uri));
-      fronters.set(
+      await frontersCache.set(
         `at://${fronter.did}/${parsedUri.collection!}/${parsedUri.rkey!}`,
         fronter,
       );
-      fronters.set(
+      await frontersCache.set(
         `at://${fronter.handle}/${parsedUri.collection!}/${parsedUri.rkey!}`,
         fronter,
       );
···
       for (const result of items) {
         const resp = await putFronter(result.uri, members, authToken);
         if (resp.ok) {
-          const parsedUri = cacheFronter(result.uri, resp.value);
+          const parsedUri = await cacheFronter(result.uri, resp.value);
           results.push({
             rkey: parsedUri.rkey!,
             ...resp.value,
···
       sender: globalThis.Browser.runtime.MessageSender,
     ) => {
       const handlePost = async (post: any) => {
-        const cachedFronter = fronters.get(post.uri);
+        const cachedFronter = await frontersCache.get(post.uri);
         if (cachedFronter === null) return;
         const promise = cachedFronter
           ? Promise.resolve(cachedFronter)
           : getFronter(post.uri).then(async (fronter) => {
               if (!fronter.ok) {
-                fronters.set(post.uri, null);
+                await frontersCache.set(post.uri, null);
                 return;
               }
               return fronter.value;
             });
-        return promise.then((fronter) => {
+        return promise.then(async (fronter) => {
           if (!fronter) return;
-          const parsedUri = cacheFronter(post.uri, fronter);
+          const parsedUri = await cacheFronter(post.uri, fronter);
           return {
             rkey: parsedUri.rkey!,
             ...fronter,
···
     ) => {
       const data: any = JSON.parse(body);
       const promises = (data.thread as any[]).flatMap((item) => {
-        const cachedFronter = fronters.get(item.uri);
-        if (cachedFronter === null) return [];
-        const promise = cachedFronter
-          ? Promise.resolve(cachedFronter)
-          : getFronter(item.uri).then(async (fronter) => {
-              if (!fronter.ok) {
-                fronters.set(item.uri, null);
-                return;
-              }
-              return fronter.value;
-            });
-        return promise.then(async (fronter) => {
-          if (!fronter) return;
-          const parsedUri = cacheFronter(item.uri, fronter);
-          if (item.depth === 0) await setTabFronter(item.uri, fronter);
-          return {
-            rkey: parsedUri.rkey!,
-            displayName: item.value.post.author.displayName,
-            depth: item.depth,
-            ...fronter,
-          };
+        return frontersCache.get(item.uri).then(async (cachedFronter) => {
+          if (cachedFronter === null) return [];
+          const promise = cachedFronter
+            ? Promise.resolve(cachedFronter)
+            : getFronter(item.uri).then(async (fronter) => {
+                if (!fronter.ok) {
+                  await frontersCache.set(item.uri, null);
+                  return;
+                }
+                return fronter.value;
+              });
+          return promise.then(async (fronter) => {
+            if (!fronter) return;
+            const parsedUri = await cacheFronter(item.uri, fronter);
+            if (item.depth === 0) await setTabFronter(item.uri, fronter);
+            return {
+              rkey: parsedUri.rkey!,
+              displayName: item.value.post.author.displayName,
+              depth: item.depth,
+              ...fronter,
+            };
+          });
         });
       });
       const results = new Map(
···
           await handleThread(message, sender);
           break;
       }
-      browser.tabs.sendMessage(sender.tab?.id!, {
-        type: "CACHED_FRONTERS",
-        fronters,
-      });
     });
     browser.runtime.onMessage.addListener(async (message, sender) => {
       if (message.type !== "TAB_FRONTER") return;

src/entrypoints/content.ts

···
+import { decodeStorageKey } from "@/lib/cache";
 import { expect } from "@/lib/result";
 import {
   Fronter,
···
     const applyFrontersToPage = (fronters: Map<string, any>) => {
       // console.log("applyFrontersToPage", fronters);
       const match = parseSocialAppPostUrl(document.URL);
+      // console.log(match, fronters);
+      for (const el of document.querySelectorAll("[data-fronter]")) {
+        const previousFronter = el.getAttribute("data-fronter")!;
+        // remove fronter text
+        el.textContent = el.textContent.replace(` [f: ${previousFronter}]`, "");
+        el.removeAttribute("data-fronter");
+      }
+      if (fronters.size === 0) return;
       for (const el of document.getElementsByTagName("a")) {
         const path = `/${el.href.split("/").slice(3).join("/")}`;
         const fronter = fronters.get(path);
···
     };
     let postTabObserver: MutationObserver | null = null;
     window.addEventListener("message", (event) => {
-      if (event.data.type !== "CACHED_FRONTERS") return;
+      if (event.data.type !== "APPLY_CACHED_FRONTERS") return;
       const applyFronters = () => {
         const fronters = event.data.fronters as Map<string, Fronter | null>;
         const updated = new Map(
-          fronters.entries().flatMap(([uri, fronter]) => {
+          fronters.entries().flatMap(([storageKey, fronter]) => {
             if (!fronter) return [];
+            const uri = decodeStorageKey(storageKey);
             const rkey = expect(parseResourceUri(uri)).rkey!;
             return fronterGetSocialAppHrefs(fronter, rkey).map((href) => [
               href,
···
             ]);
           }),
         );
+        // console.log("applying cached fronters");
         applyFrontersToPage(updated);
       };
       // check if we are on profile so we can update fronters if the post tab is clicked on

src/entrypoints/isolated.content.ts

···
-import { Fronter, parseSocialAppPostUrl } from "@/lib/utils";
+import { Fronter, frontersCache, parseSocialAppPostUrl } from "@/lib/utils";
 import { ResourceUri } from "@atcute/lexicons";
 
 export default defineContentScript({
···
   runAt: "document_start",
   world: "ISOLATED",
   main: (ctx) => {
-    let fronters = new Map<ResourceUri, Fronter | null>();
-
-    const checkFronter = (url: string) => {
+    const checkFronter = async (url: string) => {
       // match https://*/profile/<actor_identifier>/post/<rkey> regex with named params to extract actor_identifier and rkey
       const match = parseSocialAppPostUrl(url);
       if (!match) return false;
       const recordUri =
         `at://${match.actorIdentifier}/app.bsky.feed.post/${match.rkey}` as ResourceUri;
-      const fronter = fronters.get(recordUri);
+      const fronter = await frontersCache.get(recordUri);
       if (!fronter) return false;
       browser.runtime.sendMessage({
         type: "TAB_FRONTER",
···
         data,
       });
     });
-    const messageTypes = [
-      "TAB_FRONTER",
-      "THREAD_FRONTER",
-      "TIMELINE_FRONTER",
-      "CACHED_FRONTERS",
-    ];
+    const messageTypes = ["TAB_FRONTER", "THREAD_FRONTER", "TIMELINE_FRONTER"];
     browser.runtime.onMessage.addListener((message) => {
       if (!messageTypes.includes(message.type)) return;
-      if (message.type === "CACHED_FRONTERS") {
-        fronters = message.fronters;
-      }
       window.postMessage(message);
     });
-    ctx.addEventListener(window, "wxt:locationchange", (event) => {
-      window.postMessage({ type: "CACHED_FRONTERS", fronters });
+    window.addEventListener("popstate", async (event) => {
+      window.postMessage({
+        type: "APPLY_CACHED_FRONTERS",
+        fronters: await frontersCache.getAll(),
+      });
       // check for tab fronter for the current "post"
-      checkFronter(event.newUrl.toString());
+      await checkFronter(document.location.href);
     });
 
     // setup response "channel"

src/lib/cache.ts

···
+interface CachedItem<T> {
+  data: T;
+  timestamp: number;
+}
+
+export const decodeStorageKey = (storageKey: string) =>
+  atob(storageKey.split("_")[1]);
+
+export class PersistentCache<T = any> {
+  private readonly keyPrefix: string;
+  private readonly expiryHours: number;
+  private readonly keysSetKey: `local:${string}`;
+
+  constructor(keyPrefix: string, expiryHours: number) {
+    this.keyPrefix = keyPrefix;
+    this.expiryHours = expiryHours;
+    this.keysSetKey = `local:${keyPrefix}_keys`;
+  }
+
+  private getCacheKey(key: string): `local:${string}` {
+    const safeKey = btoa(key);
+    return `local:${this.keyPrefix}_${safeKey}`;
+  }
+
+  private async getStoredKeys(): Promise<Set<string>> {
+    const keys = await storage.getItem<string[]>(this.keysSetKey);
+    return new Set(keys || []);
+  }
+
+  private async addKeyToSet(key: string): Promise<void> {
+    const keys = await this.getStoredKeys();
+    keys.add(key);
+    await storage.setItem(this.keysSetKey, Array.from(keys));
+  }
+
+  private async removeKeyFromSet(...key: string[]): Promise<void> {
+    const keys = await this.getStoredKeys();
+    for (const k of key) keys.delete(k);
+    await storage.setItem(this.keysSetKey, Array.from(keys));
+  }
+
+  async get(key: string): Promise<T | undefined> {
+    const cacheKey = this.getCacheKey(key);
+    const cached = await storage.getItem<CachedItem<T>>(cacheKey);
+
+    if (!cached) return undefined;
+
+    const now = Date.now();
+    const expiryTime = cached.timestamp + this.expiryHours * 60 * 60 * 1000;
+
+    if (this.expiryHours > 0 && now > expiryTime) {
+      await storage.removeItem(cacheKey);
+      return undefined;
+    }
+
+    return cached.data;
+  }
+
+  async set(key: string, value: T): Promise<void> {
+    const cacheKey = this.getCacheKey(key);
+    const cachedItem: CachedItem<T> = {
+      data: value,
+      timestamp: Date.now(),
+    };
+    await storage.setItem(cacheKey, cachedItem);
+    await this.addKeyToSet(key);
+  }
+
+  async remove(key: string): Promise<void> {
+    const cacheKey = this.getCacheKey(key);
+    await storage.removeItem(cacheKey);
+    await this.removeKeyFromSet(key);
+  }
+
+  async getAll(): Promise<Map<string, T>> {
+    const keys = await this.getStoredKeys();
+
+    if (keys.size === 0) {
+      return new Map();
+    }
+
+    const cacheKeys = Array.from(keys).map((key) => this.getCacheKey(key));
+    const items = await storage.getItems(cacheKeys);
+
+    const result = new Map<string, T>();
+    const now = Date.now();
+    const keysToRemove: string[] = [];
+
+    for (const { key, value } of items) {
+      const expiryTime = value.timestamp + this.expiryHours * 60 * 60 * 1000;
+
+      if (this.expiryHours > 0 && now > expiryTime) {
+        keysToRemove.push(key);
+      } else {
+        result.set(key, value.data);
+      }
+    }
+
+    // Clean up expired or missing items
+    if (keysToRemove.length > 0) {
+      const expiredCacheKeys = keysToRemove.map((key) => this.getCacheKey(key));
+      await Promise.all([
+        storage.removeItems(expiredCacheKeys),
+        this.removeKeyFromSet(...keysToRemove),
+      ]);
+    }
+
+    return result;
+  }
+}

src/lib/result.ts

···
 };
 export const expect = <T, E>(
   v: Result<T, E>,
-  msg: string = "expected result to not be error",
+  msg: string = "expected result to not be error:",
 ) => {
   if (v.ok) {
     return v.value;
   }
-  throw msg;
+  throw `${msg} ${v.error}`;
 };

src/lib/utils.ts

···
   WellKnownHandleResolver,
 } from "@atcute/identity-resolver";
 import { getAtprotoHandle, getPdsEndpoint } from "@atcute/identity";
+import { PersistentCache } from "./cache";
 
 export type Fronter = {
   members: {
···
   }
 };
 
-let memberCache = new Map<string, any>();
+// Member cache instance
+const memberCache = new PersistentCache("member_cache", 24);
+
 export const fetchMember = async (
   memberUri: MemberUri,
 ): Promise<string | undefined> => {
   const s = memberUriString(memberUri);
-  const cached = memberCache.get(s);
+  const cached = await memberCache.get(s);
   switch (memberUri.type) {
     case "sp": {
       if (cached) return cached.content.name;
···
       );
       if (!resp.ok) return;
       const member = await resp.json();
-      memberCache.set(s, member);
+      await memberCache.set(s, member);
       return member.content.name;
     }
     case "pk": {
···
       );
       if (!resp.ok) return;
       const member = await resp.json();
-      memberCache.set(s, member);
+      await memberCache.set(s, member);
       return member.name;
     }
   }
···
   const handler = simpleFetchHandler({ service: pdsUrl });
   return new AtpClient({ handler });
 };
+
+export const frontersCache = new PersistentCache<Fronter | null>(
+  "cachedFronters",
+  24,
+);
 
 export const getFronter = async <Uri extends ResourceUri>(
   recordUri: Uri,