Using MutationObserver for infinite scroll – any shorter implementation?

[minhchi1509]

I’m working on a content script that adds a custom button/UI to Instagram posts. Since Instagram loads more posts when scrolling, I’m using a MutationObserver to detect newly added elements and attach my UI.

Here’s a simplified version of my code (I’m keeping track of processed elements and using createShadowRootUi to mount a React component):

import ReactDOM from "react-dom/client"

import "src/themes/style.css"

import DownloadIgPostOnMainPage from "src/entrypoints/download-ig-post-media-main-page.content/DownloadIgPostOnMainPage"

export default defineContentScript({
  matches: ["https://www.instagram.com/*"],
  cssInjectionMode: "ui",
  async main(ctx) {
    const selector =
      "MY_SELECTOR"
    const processedElements = new Set<Element>()

    // Function to create UI for new elements
    const createDownloadUI = async (anchorElement: Element) => {
      // Skip if already processed
      if (processedElements.has(anchorElement)) return

      // Mark as processed
      processedElements.add(anchorElement)

      // Create UI
      createShadowRootUi(ctx, {
        name: "download-ig-post-media-main-page",
        position: "inline",
        anchor: anchorElement,
        append: "last",
        onMount(uiContainer) {
          const wrapper = document.createElement("div")
          wrapper.id = "download-ig-post-media-main-page"
          uiContainer.appendChild(wrapper)

          const root = ReactDOM.createRoot(wrapper)
          root.render(
            <DownloadIgPostOnMainPage anchorElement={anchorElement} />
          )

          return { root, wrapper }
        },
        onRemove: (element) => {
          console.log("Removing UI for element:")
          element?.root.unmount()
          element?.wrapper.remove()
        }
      })
        .then((ui) => {
          // Use the UI after it's created
          ui.mount()
        })
        .catch((error) => {
          console.error("Error creating download UI:", error)
          // Remove from processed set if there was an error
          processedElements.delete(anchorElement)
        })
    }

    // Process existing elements
    const processExistingElements = () => {
      const anchorElements = Array.from(
        document.querySelectorAll(selector)
      ).filter((el) => !processedElements.has(el))

      for (const anchorElement of anchorElements) {
        createDownloadUI(anchorElement)
      }
    }

    // Initial processing
    processExistingElements()

    // Set up observer for new elements
    const observer = new MutationObserver((mutations) => {
      let shouldProcess = false

      for (const mutation of mutations) {
        if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
          shouldProcess = true
          break
        }
      }

      if (shouldProcess) {
        processExistingElements()
      }
    })

    // Start observing
    observer.observe(document.body, {
      childList: true,
      subtree: true
    })
  }
})

It works, but the implementation feels verbose. I tried ui.autoMount() hoping it would simplify things, but then the button doesn’t show up.

👉 My question: is there a shorter or more idiomatic way in WXT to handle infinite scroll scenarios like Instagram, without manually wiring up a MutationObserver and a processed set?

[aklinker1]

This is the correct way to do this.

You may want to follow #1704, improvements there would probably simplify you implementation. That issue isn't a high priority right now though, so no estimate for when it would be implemented.