fix unstable behaviour for non static websites

VERSIONS.md

@@ -14,4 +14,7 @@
 
 # v0.7
  * FuriKani now supports Firefox!
- * Fixed potential innerHTML risks
+ * Fixed potential innerHTML risks
+
+## v0.7.1
+ * Add support for non-static websites

manifest.json

@@ -21,4 +21,4 @@
         "scripts": ["src/background.js"]
     },
     "permissions": ["storage"]
-}
+}

src/content.js

@@ -19,6 +19,35 @@ var kanjiStyleSheet = document.createElement("style")
 document.head.appendChild(vocabStyleSheet)
 document.head.appendChild(kanjiStyleSheet)
 
+function handleRubyTag(tag, vocabulary, kanji) {
+    // Copy the ruby element into a new ruby element so we can modify it
+    // without modifying the website
+    var ruby = document.createElement("ruby")
+    ruby.innerHTML = tag.innerHTML;
+
+    // Remove all tags (except for <rb>, <span>)
+    while(ruby.lastElementChild)
+    {
+        if(ruby.lastElementChild.tagName.toLowerCase() === "rb" ||
+            ruby.lastElementChild.tagName.toLowerCase() === "span")
+        {
+            ruby.innerHTML = ruby.lastElementChild.innerHTML
+            break
+        }
+
+        ruby.removeChild(ruby.lastElementChild)
+    }
+
+    // If the contents of the <ruby> tag are in the word list, tag the <rt> tag
+    // with the correct class
+    var rtTag = tag.getElementsByTagName("rt").item(0)
+    if(vocabulary.includes(ruby.innerText))
+        rtTag.classList.add("furikani-vocabulary")
+    if(kanji.includes(ruby.innerText))
+        rtTag.classList.add("furikani-kanji")
+}
+
+
 // Get stored word list from chrome storage
 chrome.storage.local.get(["vocabulary", "kanji", "validUserLevel", "enabled", "enabledVocab", "enabledKanji"], (data) => {    
     // The users level is not valid, e.g. it exceeds the maximum allowed level
@@ -39,37 +68,19 @@ chrome.storage.local.get(["vocabulary", "kanji", "validUserLevel", "enabled", "e
     const vocabulary = data.vocabulary
     const kanji = data.kanji
 
-    // Fetch all <ruby> tags on the website
+    let observer = new MutationObserver((mutations) => {
-    var rubyTags = document.body.getElementsByTagName("ruby")
+        mutations.forEach((mutation) => {
+            mutation.addedNodes.forEach((node, _key, _parent) => {
+                if (node.tagName?.toLowerCase() !== "ruby") {
+                    return;
+                }
 
-    for(let tag in rubyTags)
+                handleRubyTag(node, vocabulary, kanji)
-    {
+            })
-        // Copy the ruby element into a new ruby element so we can modify it
+        });
-        // without modifying the website
+    })
-        var ruby = document.createElement("ruby")
-        ruby.innerHTML = rubyTags.item(tag).innerHTML
 
-        // Remove all tags (except for <rb>, <span>)
+    observer.observe(document.documentElement, { subtree: true, childList: true });
-        while(ruby.lastElementChild)
-        {
-            if(ruby.lastElementChild.tagName.toLowerCase() === "rb" ||
-                ruby.lastElementChild.tagName.toLowerCase() === "span")
-            {
-                ruby.innerHTML = ruby.lastElementChild.innerHTML
-                break
-            }
-
-            ruby.removeChild(ruby.lastElementChild)
-        }
-
-        // If the contents of the <ruby> tag are in the word list, tag the <rt> tag
-        // with the correct class
-        var rtTag = rubyTags.item(tag).getElementsByTagName("rt").item(0)
-        if(vocabulary.includes(ruby.innerText))
-            rtTag.classList.add("furikani-vocabulary")
-        if(kanji.includes(ruby.innerText))
-            rtTag.classList.add("furikani-kanji")
-    }
 })
 
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
@@ -96,4 +107,4 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
     }
 
     return true;
-})
+})