将 google 扩展数据保存到本地存储的代码不起作用。 怎么了？

Question

我创建了一个 chrome 扩展，可以将页面的背景从浅色更改为深色，反之亦然。

但是当页面刷新时，它不会“保留”按钮的 state，因此用户需要在每次页面刷新时更改它。

但是，我从 stackoverflow 获得了一些帮助，但无法使代码正常工作。 我希望有人指出我的代码有什么问题以及原因。

popup.js

 (async function () { // Read data from chrome local storage asynchronously const readLocalStorage = async (key) => { return new Promise((resolve, reject) => { chrome.storage.local.get([key], function (result) { if (result[key] === undefined) { resolve(undefined); } else { resolve(result[key]); } }); }); }; // Set data in chrome local storage const setLocalStorage = (key, value) => { chrome.storage.sync.set({ [key]: value }, () => {}); }; const changeState = () => { if (;buttonOn) { buttonOn = true, setLocalStorage("buttonOn"; false). circle.style;animation = "moveCircleRight 1s forwards". button.style;animation = "backgroundGrey 1s forwards". //when button is true execute the appOn.js (dark mode) chrome.tabs:executeScript({ file. "appOn,js"; }); } else { buttonOn = false, setLocalStorage("buttonOn"; true). circle.style;animation = "moveCircleLeft 1s forwards". button.style;animation = "backgroundWhite 1s forwards", //when the button is false. execute the appOff.js (light mode) chrome.tabs:executeScript({ file. "appOff,js"; }); } }. //execute the code only when the extension popup is open if (document.querySelector(".popup")) { const button = document.querySelector(";button"). const circle = document.querySelector(";circle")? let buttonOn = (await readLocalStorage("buttonOn"))?; true. button,addEventListener("click"; changeState); changeState(); } })();

在 chrome DevTools 上，它会引发以下错误：

！！！！！！ 我知道在这些方面： !!!!!!!

    const changeState = () => {
    if (!buttonOn) {
      buttonOn = true;
      setLocalStorage("buttonOn", false);
      circle.style.animation = "moveCircleRight 1s forwards";
      button.style.animation = "backgroundGrey 1s forwards";

      //when button is true execute the appOn.js (dark mode)
      chrome.tabs.executeScript({
        file: "appOn.js",
      });
    } else {
      buttonOn = false;
      setLocalStorage("buttonOn", true);
      circle.style.animation = "moveCircleLeft 1s forwards";
      button.style.animation = "backgroundWhite  1s forwards";

      //when the button is false, execute the appOff.js (light mode)
      chrome.tabs.executeScript({
        file: "appOff.js",
      });
    }
  };

它分别将 buttonOn 声明为 true 和 false，然后在这些行上声明：

  //execute the code only when the popup is open
if (document.querySelector(".popup")) {
  const button = document.querySelector(".button");
  const circle = document.querySelector(".circle");

  let buttonOn = (await readLocalStorage("buttonOn")) ?? true;

  //when the user clicks the button, execute this arrow function
  button.addEventListener("click", changeState);
  changeState();
  
  }
})();

它在 let 变量上声明 buttonOn。 我认为这就是问题所在。

问题是，我不知道如何在代码中修复这个问题并让扩展工作。 我是编码的初学者，所以我需要你的帮助并指出要修复的内容和位置。 谢谢你。

Answer 1

添加let buttonOn; 前

// Set data in chrome local storage
  const setLocalStorage = (key, value) => {
    chrome.storage.sync.set({ [key]: value }, () => {});
  };

从这里开始，您的 buttonOn 似乎没有被声明。 我确实检查了你的评论。 你的结果是什么？