Firefox扩展加载YouTube视频时无法正常工作的问题求助

YouTube采用单页应用（SPA）架构，页面内容是动态加载的。你之前用的window.addEventListener('load')只会在初始页面加载完成时触发一次，后续切换视频或更新页面内容时不会重新执行，导致代码找不到动态生成的#comments元素——只有手动重载扩展时，当前页面的#comments已经存在，代码才会生效。

下面是两种可行的解决方案：

方案一：用MutationObserver监听DOM变化 #

通过监听DOM树的变化，在#comments元素被添加到页面时立即执行隐藏操作：

function waitForElement(selector, callback) {
  const element = document.querySelector(selector);
  if (element) {
    callback(element);
    return;
  }

  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length) {
        const foundElement = document.querySelector(selector);
        if (foundElement) {
          observer.disconnect();
          callback(foundElement);
        }
      }
    });
  });

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

// 调用函数隐藏评论区
waitForElement('#comments', element => {
  element.style.visibility = 'hidden';
  // 若需要彻底隐藏（不占用空间），可替换为：element.style.display = 'none';
});

方案二：监听YouTube页面导航事件 #

YouTube在页面切换（比如打开新视频）完成时会触发yt-navigate-finish自定义事件，监听这个事件可以精准触发隐藏逻辑：

function hideComments() {
  const element = document.getElementById('comments');
  if (element) {
    element.style.visibility = 'hidden';
  }
}

// 初始页面加载后执行一次
hideComments();

// 每次页面切换完成后重新执行
document.addEventListener('yt-navigate-finish', hideComments);

额外注意 #

确保你的扩展manifest.json中，content script的配置正确匹配YouTube域名，示例配置：

{
  "content_scripts": [
    {
      "matches": ["*://www.youtube.com/*"],
      "js": ["your-script.js"],
      "run_at": "document_idle"
    }
  ]
}

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