webext-storage

A more usable typed storage API for Web Extensions

Sponsored by PixieBrix 🎉

chrome.storage.local.get() is very inconvenient to use and it's not type-safe. This module provides a better API:

const options = new StorageItem<Record<string, string>>('user-options');
const value = await options.get(); // The type is `Record<string, string> | undefined`
await options.set({color: 'red'}) // Type-checked
options.onChanged(newValue => {
    console.log('New options', newValue)
});

const storage = await chrome.storage.local.get('user-options');
const value = storage['user-options']; // The type is `any`
await chrome.storage.local.set({['user-options']: {color: 'red'}}); // Not type-checked
chrome.storage.onChanged.addListener((storageArea, change) => {
    if (storageArea === 'local' && change['user-options']) { // Repetitive
        console.log('New options', change['user-options'].newValue)
    }
});

Install

npm install webext-storage

Or download the standalone bundle to include in your manifest.json.

Usage

The package exports two classes:

• StorageItem - Store a single value in storage
• StorageItemMap - Store multiple related values in storage with the same type, similar to new Map()

Support:

• Browsers: Chrome, Firefox, and Safari
• Manifest: v2 and v3
• Permissions: storage or unlimitedStorage
• Context: They can be called from any context

Related

• webext-storage-cache - Cache values in your Web Extension and clear them on expiration.
• webext-tools - Utility functions for Web Extensions.
• webext-content-scripts - Utility functions to inject content scripts in WebExtensions.
• webext-base-css - Extremely minimal stylesheet/setup for Web Extensions’ options pages (also dark mode)
• webext-options-sync - Helps you manage and autosave your extension's options.
• More…

License

MIT © Federico Brigante