Injecting elements in a page

[ptdatta]

Hello, I am new to WXT I was just exploring it.
I want to target an element on the youtube page and inject a button according to it. So I wrote this code

import React from "react"
import ReactDOM from "react-dom/client"
import { defineContentScript } from "#imports"
import { Button } from "@/components/analyze-button"

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 it target's youtube's whole UI. Like the youtube logo isn't showing, the player icon's wasn't showing. Can anyone help me what I am doing wrong?

[sunnypatell]

@ptdatta the issue is WXT's default cssInjectionMode which is "manifest". this causes all CSS from your content script bundle (including any CSS imports, tailwind base styles, resets, etc.) to be injected globally into YouTube's page via the manifest's css array. that overrides YouTube's own styles, breaking the entire UI.

two things to fix:

1. set cssInjectionMode to "ui" or "manual" to prevent global CSS injection:

export default defineContentScript({
  matches: ["*://*.youtube.com/*"],
  cssInjectionMode: "ui",
  async main(ctx) {
    // your code here
  },
});

2. use createShadowRootUi instead of raw ReactDOM.createRoot to isolate your injected UI's styles inside a Shadow DOM. this prevents style leakage in both directions (your styles won't affect youtube, and youtube's styles won't affect your UI).

if you don't need any custom CSS at all, cssInjectionMode: "manual" also works and skips CSS entirely.

the key insight is that the default "manifest" mode injects your bundled CSS globally into every matched page, which is almost always wrong for sites like YouTube with their own complex styling.

ref: WXT content scripts docs, WXT content script UI

[oyzamil]

@sunnypatell is absolutely right. I was playing with your code and added some performance optimizations.

import ReactDOM from 'react-dom/client';

export default defineContentScript({
  matches: ['*://*.youtube.com/*'],
  cssInjectionMode: 'ui',
  main() {
    const mountedCards = new WeakMap<HTMLElement, ReactDOM.Root>();

    const injectButton = (card: HTMLElement) => {
      if (mountedCards.has(card)) return;

      const menu = card.querySelector<HTMLElement>('.yt-lockup-metadata-view-model__menu-button');
      if (!menu) return;

      // Create host
      const host = document.createElement('div');
      host.style.display = 'inline-block';
      menu.insertAdjacentElement('afterend', host);

      // Shadow DOM
      const shadow = host.attachShadow({ mode: 'open' });

      // Inject styles
      const style = document.createElement('style');
      style.textContent = `
        :host {
          all: initial;
        }

        .wrapper {
          display: inline-flex;
          align-items: center;
        }

        button {
          background: #ff0000;
          color: white;
          border: none;
          padding: 6px 12px;
          border-radius: 8px;
          cursor: pointer;
          font-size: 12px;
          font-weight: 500;
        }

        button:hover {
          background: #cc0000;
        }
      `;
      shadow.appendChild(style);

      const mountPoint = document.createElement('div');
      mountPoint.className = 'wrapper';
      shadow.appendChild(mountPoint);

      const root = ReactDOM.createRoot(mountPoint);
      root.render(<button>🔥</button>);

      mountedCards.set(card, root);
    };

    // Throttled observer
    let scheduled = false;

    const observer = new MutationObserver(() => {
      if (scheduled) return;
      scheduled = true;

      requestAnimationFrame(() => {
        const cards = document.querySelectorAll<HTMLElement>('ytd-rich-item-renderer');

        cards.forEach(injectButton);
        scheduled = false;
      });
    });

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

    // Initial run
    document.querySelectorAll<HTMLElement>('ytd-rich-item-renderer').forEach(injectButton);
  },
});

Preview:

[sunnypatell]

@oyzamil nice, the WeakMap for tracking mounted roots is a solid touch. avoids the classic "check for existing child element" pattern that breaks when the DOM gets recycled by youtube's SPA navigation. and throttling the MutationObserver with requestAnimationFrame instead of raw callbacks is the right call since youtube fires a ton of mutations during scroll.

thanks for validating the approach and sharing the full implementation with the preview!