Code for saving google extension data to local storage doesn't work. What is wrong?

I have created a chrome extension that changes the background of the page from light to dark and vice versa.

But when the page refreshes, it doesnt "keep" the state of the button so the user needs to change it every time the page refreshes.

However, I got some help here from stackoverflow but can't get the code to work. I would like someone to point out what is wrong in my code and why.

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();
  
  }
})();

On the chrome DevTools it throws these errors:

!!!!!!! I am aware that on these lines: !!!!!!!

    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",
      });
    }
  };

it declares the buttonOn to true and false respectively and THEN on these lines:

  //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();
  
  }
})();

it declares the buttonOn on a let variable. I think that is the problem.

The thing is, I DONT KNOW how to FIX this in the code and get the extension to work. I am a begginer in coding, so I need your help and to point out what to fix and where. Thank you.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW