Working on a web extension is an interesting experience — you get to taste web while working with special extension APIs. One such API is storage — the web extension flavor of persistence. Let’s explore how you can use session and local storage within your Manifest V3 web extensions!
Enabling Extension Storage
The extension storage API isn’t available by default. To enable the storage API, you need to cite it in the manifest.json file of your extension:
{
// more....
"manifest_version": 3,
"name": "__MSG_appName__",
"permissions": [
"storage",
// more....
],
// more....
}
Adding storage to the permissions array, which is a top level manifest.json key, provides session and local storage capabilities to your extension.
Get, Set, and Remove Storage Values
Much like traditional localStorage and sessionStorage APIs, extension storage provides get, set, and remove operations:
// set
await chrome.storage.session.set({ name: "David", color: "green" });
// get
const { name, color } = await chrome.storage.session.get(["name", "color"]);
// remove
await chrome.storage.session.remove(["name", "color"]);
A few things to note:
getrequires an array argument, not a single value likelocalStorageandsessionStoragesetneeds to be an object formatremoveis also an array, much likeget- You can use
chrome.storage.localorchrome.storage.sessiondepending on how - All of the extension storage API methods are promise-based, with
awaitor callback formats
Clear All Storage
In the event that you want to clear all data for local or session storage, there’s a clear method:
await chrome.storage.session.clear();
Using clear is effective but you’ll want to be sure that you do truly want to clear everything — clear could become a maintenance issue.
Storage is an essential part of most web extensions. While the API is simple, the async format and method names are different.
Source link
