Notify content script about wordlists updates

popup/popup.js

@@ -20,9 +20,17 @@ async function debouncedSave() {
 }
 
 async function save() {
-  await debouncedSave();
+  await chrome.storage.local.set({ lists });
   renderLists();
   renderWords();
+
+  chrome.tabs.query({}, function (tabs) {
+    for (let tab of tabs) {
+      if (tab.id) {
+        chrome.tabs.sendMessage(tab.id, { type: "WORD_LIST_UPDATED" });
+      }
+    }
+  });
 }
 
 async function load() {
@@ -177,6 +185,7 @@ wordList.addEventListener("change", e => {
       } else {
         selectedCheckboxes.delete(+e.target.dataset.index);
       }
+      renderWords();
     } else if (e.target.dataset.activeEdit != null) {
       lists[currentListIndex].words[e.target.dataset.activeEdit].active = e.target.checked;
       save();
@@ -277,21 +286,6 @@ wordList.addEventListener("input", e => {
   save();
 });
 
-wordList.addEventListener("change", e => {
-  if (e.target.type === "checkbox") {
-    if (e.target.dataset.index != null) {
-      if (e.target.checked) {
-        selectedCheckboxes.add(+e.target.dataset.index);
-      } else {
-        selectedCheckboxes.delete(+e.target.dataset.index);
-      }
-    } else if (e.target.dataset.activeEdit != null) {
-      lists[currentListIndex].words[e.target.dataset.activeEdit].active = e.target.checked;
-      save();
-    }
-  }
-});
-
 const exportBtn = document.getElementById("exportBtn");
 exportBtn.onclick = () => {
   const blob = new Blob([JSON.stringify(lists, null, 2)], { type: "application/json" });