fix: set event handlers in DOMContentLoaded

popup/popup.js

@@ -169,15 +169,17 @@ function renderWords() {
   }
 }
 
-document.getElementById("selectAllBtn").onclick = () => {
+document.addEventListener('DOMContentLoaded', () => {
+  localizePage();
+  document.getElementById("selectAllBtn").onclick = () => {
     const list = lists[currentListIndex];
     list.words.forEach((_, index) => {
       selectedCheckboxes.add(index);
     });
     renderWords();
-};
+  };
 
-wordList.addEventListener("change", e => {
+  wordList.addEventListener("change", e => {
     if (e.target.type === "checkbox") {
       if (e.target.dataset.index != null) {
         if (e.target.checked) {
@@ -191,10 +193,10 @@ wordList.addEventListener("change", e => {
         save();
       }
     }
-});
+  });
 
-let scrollTimeout;
-wordList.addEventListener('scroll', () => {
+  let scrollTimeout;
+  wordList.addEventListener('scroll', () => {
     if (scrollTimeout) {
       return;
     }
@@ -202,16 +204,16 @@ wordList.addEventListener('scroll', () => {
       requestAnimationFrame(renderWords);
       scrollTimeout = null;
     }, 16); // ~60fps
-});
+  });
 
-listSelect.onchange = () => {
+  listSelect.onchange = () => {
     selectedCheckboxes.clear();
     currentListIndex = +listSelect.value;
     renderWords();
     updateListForm();
-};
+  };
 
-document.getElementById("newListBtn").onclick = () => {
+  document.getElementById("newListBtn").onclick = () => {
     lists.push({
       id: Date.now(),
       name: chrome.i18n.getMessage("new_list_name"),
@@ -222,30 +224,30 @@ document.getElementById("newListBtn").onclick = () => {
     });
     currentListIndex = lists.length - 1;
     save();
-};
+  };
 
-document.getElementById("deleteListBtn").onclick = () => {
+  document.getElementById("deleteListBtn").onclick = () => {
     if (confirm(chrome.i18n.getMessage("confirm_delete_list"))) {
       lists.splice(currentListIndex, 1);
       currentListIndex = Math.max(0, currentListIndex - 1);
       save();
     }
-};
+  };
 
-listName.oninput = () => { lists[currentListIndex].name = listName.value; save(); };
-listBg.oninput = () => { lists[currentListIndex].background = listBg.value; save(); };
-listFg.oninput = () => { lists[currentListIndex].foreground = listFg.value; save(); };
-listActive.onchange = () => { lists[currentListIndex].active = listActive.checked; save(); };
+  listName.oninput = () => { lists[currentListIndex].name = listName.value; save(); };
+  listBg.oninput = () => { lists[currentListIndex].background = listBg.value; save(); };
+  listFg.oninput = () => { lists[currentListIndex].foreground = listFg.value; save(); };
+  listActive.onchange = () => { lists[currentListIndex].active = listActive.checked; save(); };
 
-document.getElementById("addWordsBtn").onclick = () => {
+  document.getElementById("addWordsBtn").onclick = () => {
     const words = bulkPaste.value.split(/\n+/).map(w => w.trim()).filter(Boolean);
     const list = lists[currentListIndex];
     for (const w of words) list.words.push({ wordStr: w, background: "", foreground: "", active: true });
     bulkPaste.value = "";
     save();
-};
+  };
 
-document.getElementById("deleteSelectedBtn").onclick = () => {
+  document.getElementById("deleteSelectedBtn").onclick = () => {
     if (confirm(chrome.i18n.getMessage("confirm_delete_words"))) {
       const list = lists[currentListIndex];
       const toDelete = Array.from(selectedCheckboxes);
@@ -254,27 +256,27 @@ document.getElementById("deleteSelectedBtn").onclick = () => {
       save();
       renderWords();
     }
-};
+  };
 
-document.getElementById("disableSelectedBtn").onclick = () => {
+  document.getElementById("disableSelectedBtn").onclick = () => {
     const list = lists[currentListIndex];
     selectedCheckboxes.forEach(index => {
       list.words[index].active = false;
     });
     save();
     renderWords();
-};
+  };
 
-document.getElementById("enableSelectedBtn").onclick = () => {
+  document.getElementById("enableSelectedBtn").onclick = () => {
     const list = lists[currentListIndex];
     selectedCheckboxes.forEach(index => {
       list.words[index].active = true;
     });
     save();
     renderWords();
-};
+  };
 
-wordList.addEventListener("input", e => {
+  wordList.addEventListener("input", e => {
     const index = e.target.dataset.wordEdit ?? e.target.dataset.bgEdit ?? e.target.dataset.fgEdit;
     if (index == null) return;
 
@@ -284,10 +286,10 @@ wordList.addEventListener("input", e => {
     if (e.target.dataset.fgEdit != null) word.foreground = e.target.value;
 
     save();
-});
+  });
 
-const exportBtn = document.getElementById("exportBtn");
-exportBtn.onclick = () => {
+  const exportBtn = document.getElementById("exportBtn");
+  exportBtn.onclick = () => {
     const blob = new Blob([JSON.stringify(lists, null, 2)], { type: "application/json" });
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
@@ -295,12 +297,12 @@ exportBtn.onclick = () => {
     a.download = "highlight-lists.json";
     a.click();
     URL.revokeObjectURL(url);
-};
+  };
 
-const importBtn = document.getElementById("importBtn");
-importBtn.onclick = () => importInput.click();
+  const importBtn = document.getElementById("importBtn");
+  importBtn.onclick = () => importInput.click();
 
-importInput.onchange = e => {
+  importInput.onchange = e => {
     const file = e.target.files[0];
     if (!file) return;
     const reader = new FileReader();
@@ -317,9 +319,9 @@ importInput.onchange = e => {
       }
     };
     reader.readAsText(file);
-};
+  };
 
-function localizePage() {
+  function localizePage() {
     const elements = document.querySelectorAll('[data-i18n]');
     elements.forEach(element => {
       const message = element.dataset.i18n;
@@ -332,25 +334,23 @@ function localizePage() {
         }
       }
     });
-}
+  }
 
-document.addEventListener('DOMContentLoaded', localizePage);
+  const toggle = document.getElementById('themeToggle');
+  const body = document.body;
 
-const toggle = document.getElementById('themeToggle');
-const body = document.body;
-
-const savedTheme = localStorage.getItem('theme');
-if (savedTheme === 'light') {
+  const savedTheme = localStorage.getItem('theme');
+  if (savedTheme === 'light') {
     body.classList.remove('dark');
     body.classList.add('light');
     toggle.checked = false;
-} else {
+  } else {
     body.classList.add('dark');
     body.classList.remove('light');
     toggle.checked = true;
-}
+  }
 
-toggle.addEventListener('change', () => {
+  toggle.addEventListener('change', () => {
     if (toggle.checked) {
       body.classList.add('dark');
       body.classList.remove('light');
@@ -360,11 +360,12 @@ toggle.addEventListener('change', () => {
       body.classList.add('light');
       localStorage.setItem('theme', 'light');
     }
-});
+  });
 
-document.getElementById("deselectAllBtn").onclick = () => {
+  document.getElementById("deselectAllBtn").onclick = () => {
     selectedCheckboxes.clear();
     renderWords();
-};
+  };
 
-load();
+  load();
+});