fix: handle dynamically loaded content

content.js

@@ -3,9 +3,11 @@ function escapeRegex(s) {
 }
 
 function highlightWords(lists) {
+  const processNodes = () => {
     const textNodes = [];
     const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
       acceptNode: node => {
+        if (node.parentNode && node.parentNode.nodeName === 'MARK') return NodeFilter.FILTER_REJECT;
         if (node.parentNode && ['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME'].includes(node.parentNode.nodeName)) return NodeFilter.FILTER_REJECT;
         if (!node.nodeValue.trim()) return NodeFilter.FILTER_SKIP;
         return NodeFilter.FILTER_ACCEPT;
@@ -46,6 +48,30 @@ function highlightWords(lists) {
 
       node.parentNode.replaceChild(span, node);
     }
+  };
+
+  const debouncedProcessNodes = debounce(processNodes, 300);
+
+  debouncedProcessNodes();
+
+  const observer = new MutationObserver(debouncedProcessNodes);
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    characterData: true
+  });
+
+  window.addEventListener('scroll', debouncedProcessNodes);
+}
+
+// Debounce helper function
+function debounce(func, wait) {
+  let timeout;
+  return function () {
+    const context = this, args = arguments;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
 }
 
 chrome.storage.local.get("lists", ({ lists }) => {