无法找到YouTube指定类：Chrome扩展开发问题求助

1. 选择器错误导致元素定位失败 #

你当前的两个选择器都存在写法错误，具体原因和修正如下：

• 脚本尝试1：yt-simple-endpoint style-scope ytd-mini-guide-entry-renderer是后代选择器，逻辑是寻找<yt-simple-endpoint>标签下的<style-scope>标签，完全不符合YouTube实际的元素结构。目标元素的真实结构是<yt-simple-endpoint class="style-scope ytd-mini-guide-entry-renderer">，正确的选择器需要将标签与多类名组合：

  const content = document.querySelectorAll('yt-simple-endpoint.style-scope.ytd-mini-guide-entry-renderer');
  console.log(content.length);
  

• 脚本尝试2：你误将标签名yt-simple-endpoint当成了类名，getElementsByClassName的参数仅接收元素的类名（空格分隔表示元素需同时拥有这些类）。正确写法可选择标签+类的组合筛选，或直接使用类名组合：

  // 写法1：标签+多类精准筛选
  const content = document.querySelectorAll('yt-simple-endpoint.style-scope.ytd-mini-guide-entry-renderer');
  // 写法2：仅类名筛选（需确保无其他元素重复这些类）
  const content = document.getElementsByClassName('style-scope ytd-mini-guide-entry-renderer');
  

2. 动态加载元素的时机问题 #

YouTube是单页应用，侧边栏的ytd-mini-guide-entry-renderer元素大概率在document_end时机还未完成渲染，导致脚本执行时元素尚未存在。可通过两种方式解决：

• 使用MutationObserver监听DOM变化：实时监测元素加载，性能更优

  const observer = new MutationObserver((mutations) => {
    const targetElements = document.querySelectorAll('yt-simple-endpoint.style-scope.ytd-mini-guide-entry-renderer');
    if (targetElements.length > 0) {
      console.log('找到目标元素:', targetElements);
      observer.disconnect(); // 找到后停止监听
      // 此处编写你对目标元素的操作逻辑
    }
  });
  
  // 监听body下所有子节点的变化
  observer.observe(document.body, { childList: true, subtree: true });
  

• 定时器轮询（快速测试用）：简单直接，适合调试阶段

  const checkElements = setInterval(() => {
    const content = document.querySelectorAll('yt-simple-endpoint.style-scope.ytd-mini-guide-entry-renderer');
    if (content.length > 0) {
      console.log(content.length);
      clearInterval(checkElements);
      // 此处编写你对目标元素的操作逻辑
    }
  }, 500); // 每500毫秒检查一次
  

3. 关于"driver"的作用 #

你看到的帖子里提到的driver通常指Selenium WebDriver，它是一款浏览器自动化测试工具，用于模拟用户操作（点击、输入、页面跳转等），驱动浏览器执行预设的测试流程。但你的场景是Chrome扩展开发，和WebDriver完全无关，无需使用它，专注于扩展的content script逻辑即可。

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