How to Use Storage in Web Extensions

By  on  

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:

  • get requires an array argument, not a single value like localStorage and sessionStorage
  • set needs to be an object format
  • remove is also an array, much like get
  • You can use chrome.storage.local or chrome.storage.session depending on how
  • All of the extension storage API methods are promise-based, with await or 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.

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    5 Awesome New Mozilla Technologies You&#8217;ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    jQuery Comment Preview

    I released a MooTools comment preview script yesterday and got numerous requests for a jQuery version. Ask and you shall receive! I'll use the exact same CSS and HTML as yesterday. The XHTML The CSS The jQuery JavaScript On the keypress and blur events, we validate and...

  • By
    Create Your Own Dijit CSS Theme with LESS CSS

    The Dojo Toolkit seems to just get better and better.  One of the new additions in Dojo 1.6 was the use of LESS CSS to create Dijit themes.  The move to using LESS is a brilliant one because it makes creating your own Dijit theme...

Discussion

  1. This is great. But this it work in both Firefox and Chrome extensions?

    In my experience, if you store something in storage.session on FF – once the extension gets “inactive” (Manifest V3 feature), it’s lost – but in Chrome it persist. So storage.session on FF is worthless. Do you have the same experience?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!