Improve performance of node observer

src/content/mutationObserver.js

@@ -0,0 +1,19 @@
+async function find(root, selector) {
+    return new Promise(resolve => {
+        const observer = new MutationObserver((_, observer) => {
+            tryResolve(observer)
+        })
+
+        const config = { childList: true }
+        observer.observe(root, config)
+        tryResolve(observer)
+
+        function tryResolve(observer) {
+            const node = root.querySelector(selector)
+            if (node) {
+                observer.disconnect()
+                resolve(node)
+            }
+        }
+    })
+}

src/content/top/top.js

@@ -2,8 +2,10 @@ const HIDDEN_CLASS = "x-hidden"
 
 addEventListener("load", async () => {
   const cssRoot = document.querySelector(":root")
-  const container = await queryNode(document, "ytd-watch-flexy");
-  const chat = await queryNode(container, "#chat");
+  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");
 
   options.enabled(enabled => {
     document.body.classList.toggle("overlay", enabled)

src/manifest.json

@@ -32,9 +32,7 @@
         "https://www.youtube.com/*"
       ],
       "js": [
-        "util/fadingPromise.js",
-        "util/nodeObservers.js",
-        "util/queryNode.js",
+        "content/mutationObserver.js",
         "content/top/top.js"
       ],
       "css": [