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

Question

I'm trying to build a Chrome extension that consists mainly of a popup app. The problem is that whenever I click out of the popup (close it) the data I set disappears. Using the Storage Explorer extension as well as my own debugging console logs I can see for sure that it's getting set to chrome.storage.sync, but every time I reopen it all that data is gone.

Am I fundamentally misunderstanding how the API is meant to be used? I'm using React and building to a popup.html, I don't have a content.js or background.js. Do I instead need to be sending around messages for the data to persist?

Here is the relevant code in my React App.jsx. I have a sync function that I'm using to sync allData (which is just an array of objects) and a data getter in 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: [] });
  });
}

Something else noteworthy, in the details of the extension it doesn't show the storage permission even though I set it in my manifest.json, and it's not giving me errors on using the API. Below is my manifest.json in full, but it seems fine to me.

{
  "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

The chrome.storage.sync.get callback is passed an object with the data as key-value properties not your data directly. Thus your allData variable is not your saved array, but an object that contains it. As such it has no length property (unless you saved data named length ).

So on each opening you are resetting your data back to an empty array as if(allData.length) will test as false because length doesn't exist.

Check the appropriate property name, in your case .allData , to see if you have already set the data

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