网页版MS Teams中JavaScript无法获取发送按钮的问题

问题场景 #

在MacOS Ventura 13.6.1系统的Chrome 118.0.5993.117浏览器中，用JavaScript获取网页版MS Teams聊天窗口发送按钮时出现异常：

• 直接在控制台执行遍历按钮的代码，找不到data-tid="newMessageCommands-send"的按钮
• 先通过开发者工具检查该发送按钮，再执行相同代码就能找到目标按钮
• 执行修改按钮样式的代码，仅在检查按钮后生效

遍历按钮的测试代码 #

let buttonArray = document.querySelectorAll('button')
for (let index = 0; index < buttonArray.length; index++) {
  let element = buttonArray[index]
  console.log(`>> data-tid: ${element.getAttribute('data-tid')}`);
}
console.log(`> length: ${buttonArray.length}`);

修改按钮样式的代码 #

document.querySelector('button[data-tid="newMessageCommands-send"]').style.backgroundColor = 'red';

原因分析 #

MS Teams网页版采用Shadow DOM技术，发送按钮被包裹在Shadow Root内部。默认情况下，document.querySelectorAll无法直接访问Shadow DOM内的元素；当用开发者工具检查按钮时，浏览器会自动展开对应的Shadow Root，此时控制台代码才能访问到内部元素。

解决方法 #

1. 递归遍历Shadow DOM查找元素 #

编写递归函数，遍历页面中所有Shadow Root，定位目标按钮：

function findElementInShadowDOM(selector, root = document) {
  // 先在当前根节点查找
  let element = root.querySelector(selector);
  if (element) return element;
  
  // 遍历所有带Shadow Root的元素
  const shadowHosts = root.querySelectorAll('*');
  for (const host of shadowHosts) {
    if (host.shadowRoot) {
      element = findElementInShadowDOM(selector, host.shadowRoot);
      if (element) return element;
    }
  }
  return null;
}

// 使用示例
const sendButton = findElementInShadowDOM('button[data-tid="newMessageCommands-send"]');
if (sendButton) {
  sendButton.style.backgroundColor = 'red';
  console.log('成功找到发送按钮');
} else {
  console.log('未找到目标按钮');
}

2. 配合页面加载时机执行代码 #

由于Teams页面是动态加载的，可等待页面完全加载后再执行查找逻辑：

window.addEventListener('load', () => {
  // 延迟3秒确保Teams聊天界面加载完成（可根据实际情况调整延迟时间）
  setTimeout(() => {
    const sendButton = findElementInShadowDOM('button[data-tid="newMessageCommands-send"]');
    if (sendButton) {
      sendButton.style.backgroundColor = 'red';
    }
  }, 3000);
});

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