使用Selenium Webdriver时require未定义，Chrome扩展场景下如何解决？

核心思路 #

放弃使用Selenium WebDriver（它是Node.js端工具，无法直接在Chrome扩展中运行），直接通过Chrome扩展的内容脚本操作YouTube页面DOM，模拟触发「Stats for Nerds」面板，再提取广告的视频ID。

具体实现步骤 #

1. 配置扩展的manifest.json #

确保扩展能访问YouTube页面并注入内容脚本：

{
  "manifest_version": 3,
  "name": "YouTube Ad Video ID Grabber",
  "version": "1.0",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/*"],
      "js": ["content.js"]
    }
  ]
}

2. 编写内容脚本content.js #

步骤1：检测YouTube广告

通过监听页面DOM变化，识别广告元素：

// 监听页面元素变动，检测广告出现
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      const adContainer = document.querySelector('.ad-showing, .ytp-ad-player-overlay');
      if (adContainer && !window.isAdProcessed) {
        window.isAdProcessed = true;
        handleAdDetected();
      }
    }
  });
});

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

步骤2：触发「Stats for Nerds」面板

直接调用YouTube内置方法打开面板，无需模拟右键点击：

function handleAdDetected() {
  const videoPlayer = document.querySelector('#movie_player');
  if (videoPlayer) {
    // 调用YouTube内置方法打开Stats面板
    videoPlayer.toggleStatsForNerds();
    // 等待面板加载完成再提取ID
    setTimeout(() => extractAdVideoId(), 500);
  }
}

步骤3：提取广告视频ID

从Stats面板中解析出Video ID字段：

function extractAdVideoId() {
  const statsPanel = document.querySelector('.html5-video-info-panel');
  if (statsPanel) {
    // 拆分面板文本行，定位Video ID
    const lines = statsPanel.textContent.split('\n');
    const videoIdLine = lines.find(line => line.startsWith('Video ID:'));
    if (videoIdLine) {
      const adVideoId = videoIdLine.split(':')[1].trim();
      console.log('广告视频ID：', adVideoId);
      // 可将ID发送到扩展后台或本地存储
      // chrome.runtime.sendMessage({ type: 'AD_VIDEO_ID', id: adVideoId });
    }
    // 关闭Stats面板
    const videoPlayer = document.querySelector('#movie_player');
    videoPlayer?.toggleStatsForNerds();
  }
  // 重置标记，允许检测下一条广告
  window.isAdProcessed = false;
}

关键说明 #

• 为什么不用WebDriver？
  WebDriver是外部控制浏览器的Node.js工具，Chrome扩展运行在浏览器沙箱内，无法调用Node.js的require()或WebDriver，必须用浏览器端DOM操作实现。
• 广告检测不准确怎么办？
  YouTube的DOM结构可能更新，可通过浏览器开发者工具查看最新的广告元素类名/属性，调整querySelector的选择器。

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