如何给YouTube视频缩略图添加按钮？Chrome扩展开发问题

看起来你遇到的问题主要有两个核心点：元素选择器不准确，以及YouTube的动态内容加载导致后续新增的视频无法被捕获。我来帮你一步步修正：

1. 修正元素选择器 #

你提到注意到YouTube里id为overlay的容器，但你的代码用了#overlays（复数）——这大概率是拼写失误。另外，YouTube的元素结构经常会微调，只依赖id定位容易失效，结合类名会更稳妥。当前YouTube的视频缩略图overlay容器通常可以这样定位：

// 精准定位所有视频缩略图下的overlays容器
const overlays = document.querySelectorAll('ytd-thumbnail #overlays');

2. 处理动态加载的内容 #

YouTube首页、相关视频栏都是滚动时动态渲染新内容的，静态的querySelectorAll只能捕获页面初始加载的元素。这里需要用MutationObserver来监听DOM变化，当新的视频卡片被添加时自动执行按钮添加逻辑：

完整可运行代码示例 #

function addButtons() {
  // 定位所有视频缩略图的overlay容器
  const overlays = document.querySelectorAll('ytd-thumbnail #overlays');
  
  overlays.forEach(overlay => {
    // 避免重复给同一个缩略图添加按钮
    if (overlay.querySelector('.custom-thumbnail-btn')) return;
    
    const btn = document.createElement('button');
    btn.textContent = 'Heyy';
    btn.className = 'custom-thumbnail-btn';
    
    // 给按钮加样式，确保它显示在缩略图上方不被遮挡
    btn.style.cssText = `
      position: absolute;
      top: 10px;
      right: 10px;
      padding: 8px 12px;
      background: #ff0000;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      z-index: 10;
      font-size: 14px;
    `;
    
    overlay.appendChild(btn);
    
    // 可自定义按钮点击逻辑
    btn.addEventListener('click', () => {
      console.log('点击了自定义按钮！');
      // 这里可以添加你的业务逻辑，比如获取视频链接、标题等
    });
  });
}

// 监听DOM变化，处理滚动加载的新视频
function setupObserver() {
  // 同时监听首页视频容器和相关视频栏容器
  const targetNodes = [
    document.querySelector('#contents.ytd-rich-grid-renderer'), // 首页视频容器
    document.querySelector('#contents.ytd-watch-next-secondary-results-renderer') // 右侧相关视频栏容器
  ];
  
  targetNodes.forEach(target => {
    if (!target) return;
    
    const observer = new MutationObserver((mutations) => {
      mutations.forEach(mutation => {
        // 当有新节点被添加到容器时，重新执行按钮添加逻辑
        if (mutation.addedNodes.length > 0) {
          addButtons();
        }
      });
    });
    
    observer.observe(target, { childList: true, subtree: true });
  });
}

// 页面初始加载时执行一次，再启动监听
document.addEventListener('DOMContentLoaded', () => {
  addButtons();
  setupObserver();
});

关键细节说明 #

• 避免重复添加：通过检查自定义类.custom-thumbnail-btn，防止同一个缩略图被重复添加按钮
• 样式优化：给按钮设置绝对定位和较高的z-index，确保它显示在缩略图最上层，不会被其他元素遮挡
• 多场景覆盖：同时监听首页和相关视频栏的内容容器，确保所有视频缩略图都能被处理

你可以把这段代码替换到你的内容脚本里，应该就能正常工作了！

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