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
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Select Dropdowns, MooTools, and CSS Print

    I know I've harped on this over and over again but it's important to enhance pages for print. You can do some things using simple CSS but today's post features MooTools and jQuery. We'll be taking the options of a SELECT element and generating...

  • By
    MooTools 1.2 Tooltips: Customize Your Tips

    I've never met a person that is "ehhhh" about XHTML/javascript tooltips; people seem to love them or hate them. I'm on the love side of things. Tooltips give you a bit more information about something than just the element itself (usually...

Discussion

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