webext-storage

A library of Web-Extension Storage with inter context sync, collections, hooks, etc.

APIs

1function createStorage<T>(key: string, opts?: CreateStorageOptions): Storage<T>;
2
3interface Storage<T extends StorageValue> {
4	get: () => Promise<T | undefined>;
5	set: (value: T) => Promise<void>;
6	watch: (callback: WatchCallback<T>) => Unwatch;
7}
8
9interface MapStorage<K extends StorageValue, V extends StorageValue> {
10	clear: () => Promise<void>;
11	delete: (key: K) => Promise<boolean>;
12	entries: () => Promise<[K, V][]>;
13	forEach: (callback: (value: V, key: K, map: [K, V][]) => unknown) => void;
14	get: (key: K) => Promise<V | undefined>;
15	has: (key: K) => Promise<boolean>;
16	keys: () => Promise<K[]>;
17	set: (key: K, value: V) => Promise<void>;
18	values: () => Promise<V[]>;
19	watch: (callback: WatchCallback<[K, V][]>) => Unwatch;
20}
21
22interface KVStorage<T extends KVEntries> {
23	readonly init: T;
24	get: () => Promise<T>;
25	getItem: <K extends keyof T>(key: K) => Promise<T[K]>;
26	reset: () => Promise<void>;
27	set: (value: T) => Promise<void>;
28	setItem: <K extends keyof T>(key: K, value: T[K]) => Promise<void>;
29	watch: (callback: WatchCallback<T>) => Unwatch;
30	watchItem: <K extends keyof T>(
31		key: K,
32		callback: WatchCallback<T[K]>,
33	) => Unwatch;
34}

Example

KV

1const entries = {
2	useFor: "config",
3	appEnable: true,
4	days: 100,
5};
6
7const kv = createKVStorage("kv", { area: "sync", init: entries });
8
9// Listen changes by key
10kv.watchItem("appEnable", (newValue: boolean) => {});

Hooks

1const instance = createStorage("items");
2
3function ItemList() {
4	const [items, set] = useSetStorage(instance);
5
6	const cb = async (item) => {
7		await set.delete(item);
8	};
9
10	return (
11		<li>
12			{items.map((item) => (
13				<ul onClick={cb}>{item}</ul>
14			))}
15		</li>
16	);
17}