如何让Chrome扩展检测YouTube视频的播放与暂停状态？

嘿，这个需求我刚好做过类似的实现，针对你观察到的aria-label变化，或者更稳妥地利用YouTube自身的机制，这里有两种可行方案：

方案一：用MutationObserver监听aria-label属性变化 #

这完全贴合你发现的DOM属性变化逻辑，直接监听播放按钮的aria-label属性更新即可：

1. 定位播放按钮元素：通过类选择器.ytp-play-button获取目标按钮
2. 创建观察者实例：配置只监听属性变化，且仅关注aria-label
3. 处理变化回调：在回调里判断属性值是"Play"还是"Pause"，从而确定当前状态

下面是content script里的示例代码：

// 等待页面加载完成，确保能找到播放按钮
document.addEventListener('DOMContentLoaded', () => {
  const playButton = document.querySelector('.ytp-play-button');
  if (!playButton) return;

  // 创建MutationObserver实例
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'aria-label') {
        const ariaLabel = playButton.getAttribute('aria-label');
        if (ariaLabel === 'Play') {
          console.log('视频当前处于暂停状态');
          // 这里执行你的暂停状态逻辑
        } else if (ariaLabel === 'Pause') {
          console.log('视频当前处于播放状态');
          // 这里执行你的播放状态逻辑
        }
      }
    });
  });

  // 配置观察选项：只监听aria-label属性
  observer.observe(playButton, {
    attributes: true,
    attributeFilter: ['aria-label']
  });

  // 记得在不需要时断开观察，避免内存泄漏
  // observer.disconnect();
});

方案二：利用YouTube原生事件（更稳定） #

有时候YouTube会调整DOM结构，依赖类名或属性可能失效，这时候直接监听视频元素的原生事件或者YouTube的播放器事件更可靠：

方法A：监听video元素的play/pause事件 #

document.addEventListener('DOMContentLoaded', () => {
  // 监听视频元素的play事件
  document.addEventListener('play', (e) => {
    if (e.target.tagName === 'VIDEO') {
      console.log('视频开始播放');
    }
  }, true);

  // 监听视频元素的pause事件
  document.addEventListener('pause', (e) => {
    if (e.target.tagName === 'VIDEO') {
      console.log('视频暂停播放');
    }
  }, true);
});

方法B：监听YouTube播放器状态变化消息 #

YouTube会通过window.postMessage发送播放器状态更新，你可以直接监听这个消息：

window.addEventListener('message', (event) => {
  if (event.source !== window) return;
  if (event.data?.event === 'command' && event.data?.func === 'playerStateChange') {
    const state = event.data.args[0];
    switch (state) {
      case 1: // 播放状态
        console.log('视频正在播放');
        break;
      case 2: // 暂停状态
        console.log('视频已暂停');
        break;
    }
  }
});

扩展配置注意事项 #

在你的manifest.json里，要确保content script能匹配YouTube的页面：

{
  "manifest_version": 3,
  "name": "YouTube状态检测器",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*.youtube.com/*"],
      "js": ["content.js"]
    }
  ]
}

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