Storage

Recommendation

@webx-kit/storage is a wrapper of the chrome.storage API, serving as a compatible layer for jotai/unstorage to inherit the power of the ecosystem.

Add dependencies:

pnpm

$ pnpm add @webx-kit/storage

npm

$ npm install @webx-kit/storage

yarn

$ yarn add @webx-kit/storage

jotai

atom.ts

import { atomWithStorage } from 'jotai/utils';
import { createStorage } from '@webx-kit/storage';

const configStorage = createStorage({ prefix: 'config:' });

export const apiKeyAtom = atomWithStorage('apiKey', 'DEFAULT', configStorage);

index.tsx

import { apiKeyAtom } from './atoms';

const App = () => {
  const [apiKey, setAPIKey] = useAtom(apiKeyAtom);
  return (
    <div>
      <div>{apiKey}</div>
      <button onClick={() => setAPIKey('Changed')} />
    </div>
  );
};

unstorage

import { createStorage } from 'unstorage';
import { createDriver } from '@webx-kit/storage/unstorage';

export const storage = createStorage({
  driver: createDriver({ prefix: 'unstorage:' }),
});

await storage.setItem(key, value);

Other choices

• Web Ext Core Storage provides a type-safe, localStorage-like API for interacting with extension storage.
• @plasmohq/storage is a utility library from Plasmo that abstracts the persistent storage API available to browser extensions.