a wrapper for chrome.storage that allows for partial updates

background.ts

(async () => {
    await StorageLocal.set({ user1: { name: "Bob", age: 20 } });
    await StorageLocal.get("user1").then((user) => {
      console.log("get after set", user);
    });
    await StorageLocal.patch({ user1: { age: 21 } });
    await StorageLocal.get("user1").then((user) => {
      console.log("get after patch", user);
    });
    await StorageLocal.put({ user1: { name: "Updated" } });
    await StorageLocal.get("user1").then((user) => {
      console.log("get after put", user);
    });
  })();

ext-storage-helper.ts

type StorageKinds = "local" | "sync" | "managed" | "session";
class StorageAPI {
  kind: StorageKinds;

  cache: Promise<{ [key: string]: any }>;

  constructor(kind: StorageKinds) {
    this.kind = kind;
    this.cache = chrome.storage[kind].get(null);
  }

  async get(key: string): Promise<any> {
    const storage = await this.cache;
    if (storage) return storage[key];
    console.warn("no cache");
    return chrome.storage[this.kind].get(key);
  }

  async patch(partial: Record<string, any>): Promise<any> {
    const key = Object.keys(partial)[0];
    const storage = await this.cache;
    const current = storage[key];
    // mutating the cached copy
    storage[key] = { ...current, ...partial[key] };
    return chrome.storage[this.kind].set({ [key]: storage[key] });
  }

  async put(object: Record<string, any>): Promise<any> {
    const key = Object.keys(object)[0];
    const storage = await this.cache;
    // updating the cached copy
    storage[key] = object[key];
    return chrome.storage[this.kind].set({ [key]: storage[key] });
  }

  async set(partial: Record<string, any>): Promise<any> {
    await this.cache;
    return chrome.storage[this.kind].set(partial);
  }
}

export const StorageLocal = new StorageAPI("local");
// export const StorageSync = new StorageAPI("sync");