A more usable typed storage API for Web Extensions
npm install webext-storage[badge-gzip]: https://img.shields.io/bundlephobia/minzip/webext-storage.svg?label=gzipped
[link-bundlephobia]: https://bundlephobia.com/result?p=webext-storage
> A more usable typed storage API for Web Extensions
Sponsored by PixieBrix :tada:
chrome.storage.local.get() is very inconvenient to use and it's not type-safe. This module provides a better API:
Comparison đź’Ą
``tsRecord
const options = new StorageItem
const value = await options.get(); // The type is
await options.set({color: 'red'}) // Type-checked
options.onChanged(newValue => {
console.log('New options', newValue)
});
- The storage item is defined in a single place, including its storageArea, its types and default value
- item.get() returns the raw value instead of an objectget
- Every and set operation is type-safedefaultValue
- If you provide a , the return type will not be | undefined
- Calling will unset the value instead of the call being ignoredonChanged
- The example speaks for itself
Now compare it to the native API:
`tsany
const storage = await chrome.storage.local.get('user-options');
const value = storage['user-options']; // The type is
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)
}
});
`sh`
npm install webext-storage
Or download the standalone bundle to include in your manifest.json.
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
- 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…
MIT © Federico Brigante