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