Chrome扩展无法捕获Netflix进度条click事件，请问有什么解决方法？

根因分析 #

Netflix 播放器的进度条交互没有走标准 click 事件流程，而是使用 mousedown/pointerdown 事件直接触发跳转逻辑，同时事件回调内部会调用事件停止传播方法，阻止事件向上冒泡，因此你之前监听 click 事件的方案都会失效。

可行解决方案 #

方案1：直接绑定事件到目标元素（推荐）

使用 MutationObserver 监听 DOM 变化，在进度条元素动态挂载后直接绑定监听器，不受事件冒泡影响：

const observer = new MutationObserver((mutations) => {
  const timelineBar = document.querySelector('[data-uia="timeline-bar"]');
  if (timelineBar && !timelineBar._hasBindListener) {
    // 监听mousedown事件，匹配Netflix的交互逻辑
    timelineBar.addEventListener('mousedown', (e) => {
      console.log('进度条点击已捕获', e);
      // 此处添加你的业务逻辑
    });
    // 标记避免重复绑定
    timelineBar._hasBindListener = true;
  }
});

// 监听DOM变动，可缩小监听范围到播放器容器提升性能
observer.observe(document.body, {
  childList: true,
  subtree: true
});

方案2：捕获阶段监听底层事件

无需监听DOM变化，直接在捕获阶段监听mousedown事件，匹配目标元素即可：

document.addEventListener('mousedown', (e) => {
  if (e.target.closest('[data-uia="timeline-bar"]')) {
    console.log('进度条点击已捕获', e);
    // 此处添加你的业务逻辑
  }
}, true);

方案3：修改原jQuery委托逻辑

把监听的事件从click改成mousedown即可：

// 注入jQuery后执行
$('body').on('mousedown','[data-uia=timeline-bar]',function(e){
    console.log('click detected');
})

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