Update Hide sticky elements to 1.1.0

- Handle sticky elements added after the they're hidden, for example:
https://web.archive.org/web/20220909140854/https://www.scientificamerican.com/article/we-asked-gpt-3-to-write-an-academic-paper-about-itself-mdash-then-we-tried-to-get-it-published/

Hide sticky elements.user.js

@@ -4,7 +4,8 @@
 // @match       http*://*/*
 // @grant       GM_registerMenuCommand
 // @grant       GM_unregisterMenuCommand
-// @version     1.0.0
+// @grant       GM_addStyle
+// @version     1.1.0
 // @author      blankie
 // @description Adds a button to the monkey menu to hide sticky elements
 // @inject-into content
@@ -12,29 +13,65 @@
 
 "use strict";
 
-let stickyElements = [];
+let stickyElements = new Set();
+let style = null;
+let observer = new MutationObserver(function(mutations) {
+    for (let mutation of mutations) {
+        handleOneNode(mutation.target);
+        for (let node of mutation.addedNodes) {
+            handleNode(node);
+        }
+        for (let node of mutation.removedNodes) {
+            handleNode(node, true);
+        }
+    }
+});
+
 let hideStickyElements = true;
 let menuId;
 
-function hideAllStickyElements() {
+function handleOneNode(node, removed = false) {
-    for (let element of document.body.querySelectorAll("*")) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
-        let style = getComputedStyle(element);
+        return;
-        if (style.position !== "sticky" && style.position !== "fixed") {
-            continue;
     }
 
-        let originalDisplayValue = element.style.getPropertyValue("display");
+    let computedStyle = getComputedStyle(node);
-        let originalDisplayPriority = element.style.getPropertyPriority("display");
+    let isSticky = computedStyle.position === "sticky" || computedStyle.position === "fixed";
-        element.style.setProperty("display", "none", "important");
+    if (!stickyElements.has(node) && isSticky && !removed) {
-        stickyElements.push([element, originalDisplayValue, originalDisplayPriority]);
+        node.classList.add("hseSticky");
+        stickyElements.add(node);
+    } else if (stickyElements.has(node) && (!isSticky || removed)) {
+        node.classList.remove("hseSticky");
+        stickyElements.delete(node);
     }
 }
 
-function unhideAllStickyElements() {
+function handleNode(node, removed = false) {
-    for (let [element, originalDisplayValue, originalDisplayPriority] of stickyElements) {
+    if (node.nodeType !== Node.ELEMENT_NODE) {
-        element.style.setProperty("display", originalDisplayValue, originalDisplayPriority);
+        return;
     }
-    stickyElements = [];
+
+    handleOneNode(node, removed);
+    for (let element of node.querySelectorAll("*")) {
+        handleOneNode(element, removed);
+    }
+}
+
+function hideAllStickyElements() {
+    style = GM_addStyle(".hseSticky { display: none !important; }");
+    handleNode(document.body);
+    observer.observe(document.body, {subtree: true, childList: true, attributes: true});
+}
+
+function unhideAllStickyElements() {
+    observer.disconnect();
+    style.remove();
+    style = null;
+
+    for (let element of stickyElements) {
+        element.classList.remove("hseSticky");
+    }
+    stickyElements.clear();
 }