Fix observer problems

* Track chat between page transitions
* Don't fail with timeouts when chat container is not found

src/content/mutationObserver.js

@@ -1,19 +1,35 @@
-async function find(root, selector) {
+async function find(target, selector) {
     return new Promise(resolve => {
         const observer = new MutationObserver((_, observer) => {
             tryResolve(observer)
         })
 
-        const config = { childList: true }
-        observer.observe(root, config)
+        const config = { childList: true, attributes: true }
+        observer.observe(target, config)
         tryResolve(observer)
 
         function tryResolve(observer) {
-            const node = root.querySelector(selector)
+            const node = target.querySelector(selector)
             if (node) {
                 observer.disconnect()
                 resolve(node)
             }
         }
     })
-}
+}
+
+function observe(target, selector, callback) {
+    const observer = new MutationObserver(onMutation)
+    const config = { childList: true }
+    observer.observe(target, config)
+
+    function onMutation(mutations) {
+        mutations.forEach(({ addedNodes }) => {
+            addedNodes.forEach(node => {
+                if (node.matches?.(selector)) {
+                    callback(node)
+                }
+            })
+        })
+    }
+}

src/content/top/top.js

@@ -2,20 +2,14 @@ const HIDDEN_CLASS = "x-hidden"
 
 addEventListener("load", async () => {
   const cssRoot = document.querySelector(":root")
-  const root = document.querySelector("#content #page-manager");
-  const videoContainer = await find(root, "ytd-watch-flexy");
-  const chatContainer = videoContainer.querySelector("#secondary #secondary-inner");
-  const chat = await find(chatContainer, "#chat");
+  const root = document.querySelector("#content #page-manager")
 
   options.enabled(enabled => {
     document.body.classList.toggle("overlay", enabled)
   })
   options.position(position => {
     document.body.classList.toggle("left", position === "left")
   })
-  options.toggleButton(toggleButton => {
-    chat.querySelector("#show-hide-button").classList.toggle(HIDDEN_CLASS, !toggleButton)
-  })
   options.opacity(opacity => {
     cssRoot.style.setProperty("--opacity", opacity)
   })
@@ -25,4 +19,13 @@ addEventListener("load", async () => {
   options.bottomMargin(bottomMargin => {
     cssRoot.style.setProperty("--bottom-margin", bottomMargin + "%")
   })
+
+  const videoContainer = await find(root, "ytd-watch-flexy")
+  const chatContainer = videoContainer.querySelector("#secondary #secondary-inner")
+
+  observe(chatContainer, "#chat", chat => {
+    options.toggleButton(toggleButton => {
+      chat.querySelector("#show-hide-button").classList.toggle(HIDDEN_CLASS, !toggleButton)
+    })
+  })
 })