Chrome扩展实现YouTube直播聊天发消息：无法定位正确输入元素求助

你的问题出在选择器太笼统，#input和#button在YouTube页面是全局重复的ID，被其他元素（比如图标、迷你播放器）占用了。要定位直播聊天的输入框和发送按钮，得用更精准的选择器，结合YouTube直播聊天的DOM结构：

正确的元素定位方式 #

YouTube直播聊天的输入区域和发送按钮，都包裹在ytd-live-chat-message-input-renderer这个自定义元素里：

• 聊天输入框：是一个带有contenteditable="true"的div，通常还带有id="contenteditable-root"
• 发送按钮：是该元素下的按钮，aria-label属性包含“发送”（英文环境为"Send"）

修改后的代码 #

const sendMessage = async (message) => {
  console.log('Sending message:', message);
  
  // 等待目标元素加载完成的工具函数
  const waitForElement = (selector) => {
    return new Promise(resolve => {
      if (document.querySelector(selector)) {
        return resolve(document.querySelector(selector));
      }
      const observer = new MutationObserver(() => {
        if (document.querySelector(selector)) {
          observer.disconnect();
          resolve(document.querySelector(selector));
        }
      });
      observer.observe(document.body, { childList: true, subtree: true });
    });
  };

  try {
    // 获取直播聊天输入容器
    const inputRenderer = await waitForElement('ytd-live-chat-message-input-renderer');
    // 获取输入框
    const chatInputBox = inputRenderer.querySelector('#contenteditable-root');
    console.log('Chat input box:', chatInputBox);
    
    chatInputBox.focus();
    chatInputBox.textContent = message;
    // 触发输入事件，让YouTube识别内容变化
    chatInputBox.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
    
    // 获取发送按钮（适配中文环境，英文环境替换为 'button[aria-label*="Send"]'）
    const sendButton = inputRenderer.querySelector('button[aria-label*="发送"]');
    console.log('Send button:', sendButton);
    
    if (sendButton) {
      console.log('Clicking send button');
      sendButton.click();
    } else {
      console.error('Could not find send button');
    }
  } catch (error) {
    console.error('Error sending message:', error);
  }
};

关键说明 #

1. 动态元素等待：用MutationObserver监听DOM变化，确保直播聊天区域加载完成后再获取元素，避免异步加载导致的元素找不到问题
2. 精准选择器：通过ytd-live-chat-message-input-renderer限定范围，再找内部的输入框和发送按钮，不会和页面其他重复ID/元素冲突
3. 输入事件触发：设置内容后必须触发input事件，否则YouTube前端不会识别输入内容，发送按钮可能保持禁用状态
4. 多语言适配：用aria-label*="发送"模糊匹配，英文环境替换为aria-label*="Send"即可

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