WXT affects the Entire YouTube UI

[Parthib Datta]

I was exploring the new WXT framework for extension development. I want to target a specific element on the youtube page and inject a button according to it.

export default defineContentScript({
  matches: ["*://*.youtube.com/*"],
  main() {
    const observer = new MutationObserver(() => {
      const cards = document.querySelectorAll<HTMLElement>(
        "ytd-rich-item-renderer"
      )

      cards.forEach(card => {
        const menu = card.querySelector<HTMLElement>(
          ".yt-lockup-metadata-view-model__menu-button"
        )
        if (!menu) return

        if (card.querySelector(".my-btn")) return

        const wrapper = document.createElement("div")
        wrapper.className = "my-btn"
        menu.insertAdjacentElement("afterend", wrapper)

        const root = ReactDOM.createRoot(wrapper)
        root.render(<Button />)
      })
    })

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

But this targets the entire youtube's UI and as a result the youtube logo isn't showing, the player icon's wasn't showing.

I don't know what I am doing wrong. While building it from vanilla js I can specifically target's elements in the page and inject into it. What is the proper way of doing it in WXT?

[Stefan Van Damme]

Hi Parthib,

|| observer.observe(document.body, { childList: true, subtree: true })

Have you tried narrowing your content target to the element with id="content"?
That section contains the main YouTube page content and excludes the top YouTube header bar.

Thanks,
Stefan vd