如何获取 chrome 存储以节省 chrome 扩展弹出窗口关闭

Question

我正在尝试将此 chrome 存储同步设置为运行当此人关闭我的 chrome 扩展程序中的弹出窗口 window 但似乎无法获取它在职的。这样，如果他们突然关闭扩展程序 window，比如通过点击他们的浏览器或他们仍然存储的任何数据。有人有什么想法吗？


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

browser_action

page_action

beforeunload 事件被忽略。
unload 不会等待异步 chrome.storage 完成，因此不会存储数据

基于此，有几种可能的解决方案。

自动保存任何更改。

这是更好的现代用户友好解决方案。您可以给元素一个 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();

将unload事件中的数据直接保存在后台脚本的JavaScriptwindow对象中，例如chrome.extension.getBackgroundPage().popupData = collectData().

这很糟糕，因为它需要一个持久的后台页面（或一般的 ) and because Chrome moves away from unload events。数据可能很容易在扩展进程或浏览器本身崩溃时丢失，如果浏览器被用户关闭。

如何获取 chrome 存储以节省 chrome 扩展弹出窗口关闭

How to get chrome storage to save on chrome extension popup close

javascript

google-chrome-extension

google-chrome-storage