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

Question

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

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

这里是我的React中的相关代码App.jsx。我有一个同步功能，我用它来同步 allData（这只是一个对象数组）和 componentWillMount:

中的数据 getter

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: [] });
  });
}