Всплывающее окно расширения Chrome не сохраняет набор данных с помощью chrome.storage.sync - PullRequest
Новая
       6

Всплывающее окно расширения Chrome не сохраняет набор данных с помощью chrome.storage.sync

0 голосов
/ 05 сентября 2018

Я пытаюсь создать расширение Chrome, которое состоит в основном из всплывающего приложения. Проблема в том, что всякий раз, когда я щелкаю из всплывающего окна (закрываю), установленные данные исчезают. Используя расширение Storage Explorer, а также мои собственные журналы консоли отладки, я могу точно убедиться, что для него установлено значение 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. Ниже приведен мой манифест.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"
  }
}

1 Ответ

0 голосов
/ 05 сентября 2018

Обратному вызову chrome.storage.sync.get передается объект с данными в качестве свойств значения ключа, а не ваши данные напрямую. Таким образом, ваша переменная allData - это не сохраненный массив, а объект, который его содержит. Как таковой он не имеет свойства length (если вы не сохранили данные с именем length).

Таким образом, при каждом открытии вы сбрасываете свои данные обратно в пустой массив, так как if(allData.length) будет проверяться как ложное, поскольку 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: [] });
  });
}
...