Quickstart with Chrome Storage

Intro

Chrome storage is a powerful mechanism for persisting data in your extension. It's essential in MV3 where persistent background pages, which used to be the place developers stored persistent data, no longer exist.

Plasmo Storage

We built a library on top of the chrome.storage API that makes it much easier to use, especially if you're writing a React app.

Storage Hooks

Our library provides React hooks for reading and writing to storage.

Here's some example usage:

popup.tsx

import { useStorage } from "@plasmohq/storage/hook"
 
function IndexPopup() {
  const [openCount] = useStorage<number>("open-count", (storedCount) =>
    typeof storedCount === "undefined" ? 0 : storedCount + 1
  )
 
  const [checked, setChecked] = useStorage("checked", true)
 
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: 16
      }}>
      <p>Times opened: {openCount}</p>
      <input
        type={"checkbox"}
        checked={checked}
        onChange={(e) => setChecked(e.target.checked)}
      />
    </div>
  )
}
 
export default IndexPopup

options.tsx

import { useStorage } from "@plasmohq/storage/hook"
 
function IndexOptions() {
  const [openCount] = useStorage<number>("open-count")
 
  const [checked] = useStorage("checked")
 
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        padding: 16
      }}>
      <p>Times opened: {openCount}</p>
      <input type={"checkbox"} readOnly checked={checked} />
    </div>
  )
}
 
export default IndexOptions

Full Example

For the complete example, check out with-storage (opens in a new tab) in the examples GitHub repository.

Last updated on December 27, 2022

Quickstart: Google Analytics