From 18d679476e144a235a62dc9dd348ad203e05fbef Mon Sep 17 00:00:00 2001
From: lauchmelder <robert.altner@einweckglas.com>
Date: Sun, 9 Mar 2025 20:00:20 +0100
Subject: [PATCH] fix unstable behaviour for non static websites

---
 VERSIONS.md    |  5 +++-
 build.sh       |  0
 manifest.json  |  2 +-
 src/content.js | 71 +++++++++++++++++++++++++++++---------------------
 4 files changed, 46 insertions(+), 32 deletions(-)
 mode change 100644 => 100755 build.sh

diff --git a/VERSIONS.md b/VERSIONS.md
index 3d3c46e..c2d9511 100644
--- a/VERSIONS.md
+++ b/VERSIONS.md
@@ -14,4 +14,7 @@
 
 # v0.7
  * FuriKani now supports Firefox!
- * Fixed potential innerHTML risks
\ No newline at end of file
+ * Fixed potential innerHTML risks
+
+## v0.7.1
+ * Add support for non-static websites
diff --git a/build.sh b/build.sh
old mode 100644
new mode 100755
diff --git a/manifest.json b/manifest.json
index 770898f..9efc9d9 100644
--- a/manifest.json
+++ b/manifest.json
@@ -21,4 +21,4 @@
         "scripts": ["src/background.js"]
     },
     "permissions": ["storage"]
-}
\ No newline at end of file
+}
diff --git a/src/content.js b/src/content.js
index 9fb24bd..d5a01b3 100644
--- a/src/content.js
+++ b/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
-    var rubyTags = document.body.getElementsByTagName("ruby")
+    let observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            mutation.addedNodes.forEach((node, _key, _parent) => {
+                if (node.tagName?.toLowerCase() !== "ruby") {
+                    return;
+                }
 
-    for(let tag in rubyTags)
-    {
-        // 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
+                handleRubyTag(node, vocabulary, kanji)
+            })
+        });
+    })
 
-        // 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 = 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")
-    }
+    observer.observe(document.documentElement, { subtree: true, childList: true });
 })
 
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
@@ -96,4 +107,4 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
     }
 
     return true;
-})
\ No newline at end of file
+})