如何用Firefox/Chrome扩展修改YouTube评论关闭时的显示内容

我正在开发一款适用于Firefox/Chrome的YouTube扩展，需求是当视频评论关闭时，把页面上的“Comments are turned off. Learn more”文本替换成输入框。

当前代码 #

document.addEventListener('DOMContentLoaded', function() {
  console.log("DOM content loaded. Checking comments status...");

  function checkCommentsStatus() {
    const addCommentElement = document.querySelector('yt-formatted-string#text');
    console.log("Found 'Add a comment' element:", addCommentElement);
    if (addCommentElement && addCommentElement.textContent.trim() === "Add a comment...") {
      console.log("Comments are turned on.");
    } else {
      console.log("Comments are turned off. Modifying...");


      const container = document.createElement('div');
      container.setAttribute('id', 'comment-modification-container'); 

      
      const textBox = document.createElement('input');
      textBox.setAttribute('type', 'text');
      textBox.setAttribute('placeholder', 'Enter your comment');
      textBox.style.marginRight = '10px';

      
      const submitButton = document.createElement('button');
      submitButton.textContent = 'Submit';
      submitButton.addEventListener('click', () => {
        console.log("Submit button clicked.");
      });

      
      container.appendChild(textBox);
      container.appendChild(submitButton);

      // Find the element containing the "Comments are turned off" text
      const commentsOffElement = document.querySelector('yt-formatted-string#message');
      
      
      if (commentsOffElement && commentsOffElement.textContent.trim() === "Comments are turned off.") {
        commentsOffElement.parentNode.replaceChild(container, commentsOffElement);
        console.log("Text box and submit button added successfully.");
      } else {
        console.log("Failed to find the 'Comments are turned off' element to replace with the text box and submit button.");
      }
    }
  }

  checkCommentsStatus();
});

已尝试操作 #

• 创建监听DOMContentLoaded事件的内容脚本，确保页面完全加载后执行
• 实现checkCommentsStatus函数，通过查找YouTube页面特定元素判断评论开启/关闭状态
• 在代码中加入console.log语句追踪脚本执行、调试问题

遇到的问题 #

脚本有时无法检测到评论已关闭，或者找不到需要替换的目标元素。

解决方案 #

1. 改用MutationObserver监听动态内容 #

YouTube评论区属于动态加载内容，DOMContentLoaded触发时可能还未渲染完成。用MutationObserver监听评论区容器的变化，确保元素出现后再执行检测逻辑：

let observer;

// 监听评论区容器的变化
function observeCommentsSection() {
  const targetNode = document.querySelector('#comments');
  if (!targetNode) {
    // 初始未找到则延迟重试
    setTimeout(observeCommentsSection, 1000);
    return;
  }

  observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      checkCommentsStatus();
    });
  });

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

// 优化后的状态检测与替换逻辑
function checkCommentsStatus() {
  // 精准定位评论关闭元素：包含指定文本的yt-formatted-string
  const commentsOffElement = document.querySelector('yt-formatted-string:has(span:text("Comments are turned off"))');
  if (commentsOffElement) {
    console.log("检测到评论已关闭，开始替换");
    
    const container = document.createElement('div');
    container.id = 'comment-modification-container';
    container.style.padding = '16px';

    const textBox = document.createElement('input');
    textBox.type = 'text';
    textBox.placeholder = '输入你的评论';
    textBox.style.padding = '8px 12px';
    textBox.style.marginRight = '8px';
    textBox.style.border = '1px solid #ccc';
    textBox.style.borderRadius = '4px';

    const submitButton = document.createElement('button');
    submitButton.textContent = '提交';
    submitButton.style.padding = '8px 16px';
    submitButton.style.border = 'none';
    submitButton.style.borderRadius = '4px';
    submitButton.style.backgroundColor = '#065fd4';
    submitButton.style.color = 'white';
    submitButton.style.cursor = 'pointer';

    submitButton.addEventListener('click', () => {
      console.log("提交按钮点击，评论内容：", textBox.value);
      // 可在此添加自定义逻辑，比如本地存储评论等
    });

    container.appendChild(textBox);
    container.appendChild(submitButton);
    commentsOffElement.parentNode.replaceChild(container, commentsOffElement);
    
    // 替换完成后停止监听，避免重复操作
    observer.disconnect();
  } else {
    // 检查评论是否开启
    const addCommentElement = document.querySelector('yt-formatted-string#text[aria-label="Add a comment"]');
    if (addCommentElement) {
      console.log("评论已开启");
      observer.disconnect();
    }
  }
}

// 启动监听
observeCommentsSection();

2. 优化元素选择器 #

• 避免依赖固定ID，改用结合语义属性与文本内容的选择器，提升鲁棒性
• 使用:has()伪类（Chrome 105+、Firefox 121+支持）精准匹配包含特定文本的元素

3. 添加重试机制 #

如果初始找不到评论区容器，设置延迟重试，确保页面动态加载完成后再启动监听。

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