Methods to Use Storage in Web Extensions

[ad_1]

Engaged on an net extension is an attention-grabbing expertise — you get to mannequin net whereas working with particular extension APIs. One such API is storage — the net extension model of persistence. Let’s uncover how you may need to use session and native storage inside your Manifest V3 net extensions!

Enabling Extension Storage

The extension storage API is not in the marketplace by default. To allow the storage API, it’s good to cite it all through the manifest.json file of your extension:

{
  // further....
  "manifest_version": 3,
  "decide": "__MSG_appName__",
  "permissions": [
    "storage",
    // more....
  ],
  // further....
}

Along with storage to the permissions array, which is a major stage manifest.json key, supplies session and native storage capabilities to your extension.

Get, Set, and Take away Storage Values

Very like customary localStorage and sessionStorage APIs, extension storage supplies get, set, and take away operations:

// set
await chrome.storage.session.set({ decide: "David", shade: "inexperienced" });

// get 
const { decide, shade } = await chrome.storage.session.get(["name", "color"]);

// take away
await chrome.storage.session.take away(["name", "color"]);

Just a few factors to notice:

get requires an array argument, not a single value like localStorage and sessionStorage
set must be an object format
take away could possibly be an array, just like get
It is best to take advantage of chrome.storage.native or chrome.storage.session relying on how
All the extension storage API strategies are promise-based, with await or callback codecs

Clear All Storage

All through the occasion that you simply simply merely need to clear all data for native or session storage, there is a clear methodology:

await chrome.storage.session.clear();

Utilizing clear is setting pleasant nonetheless you may need to simply bear in mind to do actually need to clear every issue — clear would possibly develop to be a upkeep concern.

Storage is a wanted a part of most net extensions. Whereas the API is straightforward, the async format and methodology names are fully completely totally different.

[ad_2]