popup.js

let noteField;
let saveStatus;
const unsavedStateText = "Unsaved changes...";
const savedStateText = "All changes saved";

document.addEventListener("DOMContentLoaded", async () => {
  noteField = document.getElementById("note");
  saveStatus = document.getElementById("saveStatus");

  const note = await chrome.runtime.sendMessage({ action: "getNote" });
  if (note) {
    noteField.innerHTML = note
  }
  saveStatus.textContent = savedStateText

  noteField.addEventListener("input", () => {
    saveStatus.textContent = unsavedStateText;
    debounceSave();
  });
});

function debounce(timeout, func) {
  return () => {
    clearTimeout(timeout);
    timeout = setTimeout(func, 1000);
  } 
}

const debounceSave = debounce(1000, save);

async function save() {
  const key = await chrome.runtime.sendMessage({ action: "getSavingKey" });
  if (noteField.innerHTML === "<br>") {
    noteField.innerHTML = "";
  }
  const note = noteField.innerHTML;
  let saveData = {};
  saveData[key] = note;
  chrome.storage.local.set(saveData);
  chrome.runtime.sendMessage({ action: "refreshIcon" });
  saveStatus.textContent = savedStateText;
}