Chrome ストレージを使用したクイックスタート

はじめに

Chrome ストレージは、拡張機能でデータを永続的に保存するための強力なメカニズムです。開発者が永続的なデータを保存していた従来の永続的なバックグラウンドページが存在しなくなったMV3 (Manifest V3) では不可欠です。

Plasmo ストレージ

chrome.storage APIの上に、特にReactアプリを作成する場合に、使用をはるかに容易にするライブラリを構築しました。

ストレージフック

当社のライブラリは、ストレージへの読み書きを行うためのReactフックを提供します。

いくつかの使用例を以下に示します。

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

完全な例

完全な例については、examples GitHubリポジトリのwith-storage (opens in a new tab)をご覧ください。

Quickstart: Google Analytics