Skip to main content

Storage

The storage api grants access to Chrome's extension storage API. This allows webpages to persist and retrieve data scoped to aside. Common use-cases are:

  • Persisting state across page reloads.
  • Persisting state across different domains.
  • Persisting selected tabs.
  • Persisting user preferences.

api.storage.local​

The api.storage.local object exposes Chrome's chrome.storage.local object. It allows persisting large amount of data on the local machine of the user.

tip

For convenience, we recommend using the useLocalStorageState hook instead of directly accessing this API.

get​

const api = useExtensionApi();

useEffect(() => {
  async function queryStorage() {
    const result = await api.storage.local.get(['myKey']);

    result['myKey']; // Value from extension storage
  }
  queryStorage();
}, [api]);

set​

const api = useExtensionApi();

api.storage.local.set({myKey: 98})

useLocalStorageState​

This hook wraps the api.storage.local api to make it easier for React components to integrate local and persisted state.

It accepts a default value and a set of options:

  • key: The key to use for the value in the storage.
  • scope: The scope to use for the value in the storage. Either the url host or global.

It returns a tuple containing a state object and a setState function. The state object has the following properties:

  • loading: Whether the value is currently being loaded from the storage.
  • data: The value from the storage.
const [tab, setTab] = useLocalStorageState('network', {
  key: 'tab',
  scope: 'host',
});

if (tab.loading) return null;

return <ConsoleMessage value={tab.data}>