Как получить chrome хранилище для сохранения на chrome расширении всплывающих окон закрыть

Question

Я пытаюсь настроить запуск chrome хранилища c, когда пользователь закрывает всплывающее окно в моем расширении chrome, но не может заставить его работать. Таким образом, если они внезапно закроют окно расширения, скажем, щелкнув в своем браузере или что-то еще, что их данные все еще сохраняют. У кого-нибудь есть идеи?

window.addEventListener("beforeunload", function load(unloadEvent) {
  let currentTimeGet = document.getElementById("currentTimeInfo").innerHTML;

  chrome.storage.sync.set({ ct: currentTimeGet }, function() {
    console.log("Value is set to " + currentTimeGet);
  });
});

Answer 1

Событие

• beforeunload игнорируется для всплывающего окна, отображаемого как browser_action или page_action.
• unload не будет ожидать завершения асинхронного chrome.storage, чтобы данные выиграли Не сохраняется

На основании этого возможно несколько решений.

1. Автосохранение при любом изменении .

   Это предпочтительное и современное удобное решение. Вы можете присвоить элементам id, что соответствует их названию в chrome.storage, например <input type="text" id="userName" class="storage">.

   const STORAGE_SELECTOR = '.storage[id]';
   let debounceTimer;
   
   document.addEventListener('change', saveOnChange);
   document.addEventListener('input', saveOnChange);
   
   
   function saveOnChange(e) {
     if (e.target.closest(STORAGE_SELECTOR)) {
       clearTimeout(debounceTimer);
       debounceTimer = setTimeout(doSave, 100);
     }
   }
   
   function collectData() {
     const data = {};
     for (const el of document.querySelectorAll(STORAGE_SELECTOR))
       data[el.id] = el.type === 'checkbox' ? el.checked : el.value; 
     return data;
   }
   

   Что касается функции doSave(), либо просто перезапишите текущие данные опций в хранилище

   function doSave() {
     chrome.storage.sync.set(collectData());
   }
   

   или сохраните в отдельном autoSave и проверьте его при следующем отображении всплывающего окна:

   function doSave() {
     chrome.storage.sync.set({autoSave: collectData()});
   }
   
   function loadFromStorage() {
     chrome.storage.sync.get(data => {
       if (data.autoSave) data = data.autoSave;
       for (const [id, value] of Object.entries(data)) {
         const el = document.getElementById(id);
         if (el) el[el.type === 'checkbox' ? 'checked' : 'value'] = value;
       }
     });
   }
   
   loadFromStorage();
   

2. Сохраните данные непосредственно в событии unload в объекте JavaScript window фонового скрипта, например, chrome.extension.getBackgroundPage().popupData = collectData().

   Это плохо, потому что для этого требуется постоянная фоновая страница (или временно постоянная страница ) и потому что Chrome отходит от unload событий в целом. Данные могут быть легко утеряны в процессе sh процесса расширения или самого браузера, они могут быть потеряны, если браузер был закрыт пользователем.