如何动态获取Chrome扩展中弹窗（Modal）的元素？

动态弹窗是页面加载后才生成的DOM元素，直接调用document.querySelector()会因元素尚未渲染返回null，以下是两种实用的解决方法：

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

通过监听DOM树的节点新增事件，在弹窗元素被添加到页面时立即获取目标元素。

示例代码：

// 替换为你要获取的弹窗输入框的准确选择器
const targetInputSelector = '.popup-modal .event-title-input';

// 创建MutationObserver实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 检查是否有新节点被添加到DOM
    if (mutation.addedNodes.length) {
      const inputElement = document.querySelector(targetInputSelector);
      if (inputElement) {
        // 成功获取元素，可读取值或绑定事件
        console.log('输入框当前值:', inputElement.value);
        
        // 若无需持续监听，可断开观察者避免资源浪费
        observer.disconnect();
      }
    }
  });
});

// 配置监听范围：监听body下所有层级的子节点变化
observer.observe(document.body, {
  childList: true,
  subtree: true
});

方案二：绑定弹窗触发事件的回调 #

如果弹窗是通过点击日程元素触发的，可在点击事件后等待DOM更新完成再查询元素。

示例代码：

// 替换为日程元素的选择器
const calendarEventSelector = '.calendar-event-item';

document.addEventListener('click', (e) => {
  // 判断点击的是否是日程元素（包含子元素）
  if (e.target.closest(calendarEventSelector)) {
    // 用requestAnimationFrame等待下一帧DOM渲染完成
    requestAnimationFrame(() => {
      const inputElement = document.querySelector('.popup-modal .event-title-input');
      if (inputElement) {
        console.log('输入框当前值:', inputElement.value);
      }
    });
    
    // 若弹窗渲染较慢，可改用短暂延迟
    // setTimeout(() => {
    //   const inputElement = document.querySelector('.popup-modal .event-title-input');
    //   if (inputElement) console.log(inputElement.value);
    // }, 100);
  }
});

额外注意事项 #

• 确认选择器准确性：检查弹窗元素的实际class/id，避免因选择器错误导致匹配失败。
• 处理Shadow DOM场景：如果弹窗嵌套在Shadow DOM内，需先获取ShadowRoot再查询元素，例如document.querySelector('.popup-container').shadowRoot.querySelector('.event-title-input')。
• 扩展脚本注入时机：在manifest.json中设置"run_at": "document_idle"，确保内容脚本在页面DOM加载完成后注入。

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