將 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 似乎沒有被聲明。 我確實檢查了你的評論。 你的結果是什么？