使用WXT框架开发Chrome扩展，注入按钮致YouTube UI异常的问题

核心问题分析 #

你遇到的问题根源在于直接将React组件挂载到了YouTube的全局容器或body上，导致React接管了原有DOM的渲染，覆盖了YouTube的原生UI元素。要解决这个问题，关键是创建独立的挂载容器，精准定位后插入目标位置，让React只控制自己的容器内容。

具体实现步骤 #

1. 配置内容脚本 #

在wxt.config.ts中定义仅作用于YouTube页面的内容脚本：

export default defineConfig({
  contentScripts: [
    {
      matches: ['https://www.youtube.com/*'],
      js: ['content-scripts/youtube-inject.tsx'],
      // 可选：如果需要自定义样式，添加css字段
      // css: ['content-scripts/youtube-inject.css']
    },
  ],
});

2. 编写内容脚本与React组件 #

创建content-scripts/youtube-inject.tsx，实现精准注入逻辑：

import React from 'react';
import ReactDOM from 'react-dom/client';

// 自定义按钮组件，可根据需求修改样式和功能
const CustomActionButton = () => {
  const handleClick = () => {
    console.log('自定义按钮被点击');
    // 这里添加你的按钮逻辑
  };

  return (
    <button 
      style={{
        marginLeft: '12px',
        padding: '6px 16px',
        border: 'none',
        borderRadius: '4px',
        backgroundColor: '#238636',
        color: '#fff',
        cursor: 'pointer',
        fontSize: '14px'
      }}
      onClick={handleClick}
    >
      我的自定义按钮
    </button>
  );
};

// 等待目标元素加载完成的工具函数（处理YouTube动态DOM）
function waitForElement(selector: string): Promise<Element> {
  return new Promise((resolve) => {
    // 先检查元素是否已存在
    const existingElement = document.querySelector(selector);
    if (existingElement) return resolve(existingElement);

    // 用MutationObserver监听DOM变化，直到目标元素出现
    const observer = new MutationObserver((mutations) => {
      const element = document.querySelector(selector);
      if (element) {
        observer.disconnect();
        resolve(element);
      }
    });

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

// 执行注入逻辑
async function injectCustomButton() {
  // 替换为你要注入的目标位置选择器，示例：YouTube视频标题的父容器
  // 注意：YouTube的DOM结构可能更新，需要根据实际情况调整选择器
  const targetParent = await waitForElement('#above-the-fold #title');
  
  // 创建独立的React挂载容器
  const reactContainer = document.createElement('div');
  // 将容器插入到目标位置的合适地方（示例：插入到标题元素的末尾）
  targetParent.appendChild(reactContainer);

  // 渲染React组件到独立容器
  ReactDOM.createRoot(reactContainer).render(<CustomActionButton />);
}

// 启动注入
injectCustomButton();

3. 关键注意事项 #

• 选择器稳定性：YouTube的DOM结构会频繁更新，建议优先选择带ID的元素，或多个类名组合的选择器，避免依赖单一类名
• 样式隔离：自定义组件的样式尽量用内联样式或CSS模块，避免和YouTube的全局样式冲突
• 动态元素处理：必须用waitForElement这类逻辑处理异步加载的元素，直接查询可能找不到目标位置

内容的提问来源于stack exchange，提问作者Parthib Datta