Chrome 扩展弹出窗口不使用 chrome.storage.sync 保留数据集

Question

我正在尝试构建一个主要由弹出应用程序组成的 Chrome 扩展程序。问题是，每当我点击弹出窗口（关闭它）时，我设置的数据就会消失。使用存储资源管理器扩展以及我自己的调试控制台日志，我可以确定它已设置为 chrome.storage.sync，但每次我重新打开它时，所有数据都消失了。

我是否从根本上误解了 API 的使用方式？我正在使用 React 并构建到 popup.html，我没有 content.js 或 background.js。我是否需要发送消息以使数据持久保存？

这是我的 React App.jsx 中的相关代码。我有一个同步函数，用于同步 allData（它只是一个对象数组）和 componentWillMount 中的一个数据获取器：

const syncChanges = (allData) => {
  chrome.storage.sync.set({ allData }, () => {
    chrome.storage.sync.get('allData', data => console.log(data));
  });
};

componentWillMount() {
  // On app load, check if there's existing data. If not, set it.
  chrome.storage.sync.get('allData', (allData) => {
    console.log(allData);
    if (allData.length) {
      this.setState({ allData });
    } else chrome.storage.sync.set({ allData: [] });
  });
}

还有一点值得注意，在扩展的详细信息中，即使我在 manifest.json 中设置了存储权限，它也不会显示存储权限，并且在使用 API 时不会出现错误。下面是我的完整 manifest.json，但对我来说似乎很好。

{
  "name": "Leetcode Reminders",
  "description": "A Chrome extension to remind users about Leetcode problems they should revisit.",
  "manifest_version": 4,
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Leetcode Reminders"
  },
  "version": "1.0",
  "permissions": [
    "storage",
    "declarativeContent",
    "tabs"
  ],
  "icons": {
    "64": "favicon.png"
  }
}

Answer 1

chrome.storage.sync.get callback 被传递一个对象，其中数据作为键值属性而不是您的数据直接。因此，您的 allData 变量不是您保存的数组，而是包含它的对象。因此它没有length 属性（除非您保存了名为length 的数据）。

因此，在每次打开时，您都将数据重置回空数组，因为 if(allData.length) 将测试为 false，因为 length 不存在。

检查适当的属性名称，在您的情况下为.allData，以查看您是否已设置数据

componentWillMount() {
  // On app load, check if there's existing data. If not, set it.
  chrome.storage.sync.get('allData', (result) => {
    console.log(result.allData);
    //use "in" check as a regular if(result.allData) will
    //return false for empty arrays
    if ( 'allData' in result ) {
      this.setState({ allData });
    } else chrome.storage.sync.set({ allData: [] });
  });
}