我如何在每次打开 chrome 扩展中的 popup.js 时将 q 的值增加一而不重置

Question

var i = 300;
chrome.storage.sync.set({q:i},()=>{console.log(i);});
chrome.storage.sync.get(['q'],(q)=>{document.querySelector("#here").innerHTML = q.q;});
document.querySelector("body").addEventListener("click",()=>{
  i++;
  chrome.storage.sync.set({q:i},()=>{var q = i;});
  chrome.storage.sync.get(['q'],(q)=>{document.querySelector("#here").innerHTML = q.q;})
},false);

q 每次打开扩展程序时总是更新为 300 我如何更新它而不是重置它， 有没有办法在没有后台页面的情况下只使用 popup.js?

Answer 1

1. 去掉第二行chrome.storage.sync.set({q:i},()=>{console.log(i);});
   它总是用 i 覆盖存储，即 300.
2. 开始时读取存储并将结果放入i
3. 监听存储中的变化并自动更新 i 和 DOM - 这将处理您自己的更改和由于浏览器同步或在其他浏览器中打开的弹出窗口的更改而导致的远程更改 windows.

let i;

chrome.storage.sync.get({q: 300}, res => {
  useValue(res.q);
});

chrome.storage.onChanged.addListener(changes => {
  if (changes.q) {
    useValue(changes.q.newValue);
  }
});

document.querySelector('body').addEventListener('click', () => {
  chrome.storage.sync.set({q: i + 1});
});

function useValue(val) {
  i = val;
  document.querySelector('#here').textContent = val;
}