如何实现可在DOM更新后生效的ViolentMonkey按钮点击监听？

问题背景 #

你编写的ViolentMonkey脚本为#mark-watched按钮添加点击事件，触发#next-video按钮跳转，首次加载时正常工作，但在SPA框架导航后，.container组件重新渲染生成新按钮，脚本未重新运行导致监听器失效。

解决方案 #

方法1：事件委托（推荐，实现更简洁）

利用事件冒泡机制，将监听器绑定到更上层的稳定元素（比如document），这样不管按钮何时动态生成，点击事件都会被捕获：

document.addEventListener('click', (event) => {
  // 验证点击的目标元素是#mark-watched按钮
  if (event.target.id === 'mark-watched') {
    setTimeout(() => {
      // 每次触发时重新获取最新的#next-video按钮，避免引用旧DOM节点
      const nextBtn = document.getElementById('next-video');
      nextBtn?.click();
    }, 500);
  }
});

优势：无需关心DOM何时更新，代码量少，性能开销低，适合大多数场景。

方法2：使用MutationObserver监听DOM变化

通过MutationObserver监听.container区域的DOM更新，当新按钮生成时重新绑定监听器：

// 定义点击事件处理函数
function handleMarkWatchedClick() {
  setTimeout(() => {
    const nextBtn = document.getElementById('next-video');
    nextBtn?.click();
  }, 500);
}

// 首次加载时绑定初始按钮
const initialMarkBtn = document.getElementById('mark-watched');
initialMarkBtn?.addEventListener('click', handleMarkWatchedClick);

// 设置DOM变化观察器
const container = document.querySelector('.container');
if (container) {
  const observer = new MutationObserver(() => {
    const markBtn = document.getElementById('mark-watched');
    const nextBtn = document.getElementById('next-video');
    if (markBtn && nextBtn) {
      // 先移除旧监听器，避免重复绑定
      markBtn.removeEventListener('click', handleMarkWatchedClick);
      markBtn.addEventListener('click', handleMarkWatchedClick);
    }
  });

  // 配置观察选项：监听子元素变化及后代元素
  observer.observe(container, { childList: true, subtree: true });
}

优势：精准监听指定DOM区域的变化，适合需要对DOM更新做额外处理的场景。

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