使用 Chrome 存储快速开始

介绍

Chrome 存储是在扩展中持久化数据的强大机制。在 MV3 中尤其重要，因为曾经是开发人员存储持久数据的持久后台页面已不再存在。

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>打开次数: {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>打开次数: {openCount}</p>
      <input type={"checkbox"} readOnly checked={checked} />
    </div>
  )
}
 
export default IndexOptions

完整示例

有关完整示例，请查看示例 GitHub 仓库中的 with-storage 。