MutationObserver实战：让浏览器扩展智能监听DOM变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === "childList") {
      const inputBox = document.querySelector(
        'div[data-placeholder="分享此刻的想法..."]'
      )
      if (inputBox) {
        console.log("知乎输入框已出现，开始填充内容")
        simulateUserInput(
          inputBox,
          content,
          'div[data-placeholder="分享此刻的想法..."]'
        )
        observer.disconnect()
      }
    }
  })
})
 
observer.observe(document.body, {
  childList: true,
  subtree: true
})

const waitForAnyElement = (selectors: string[], timeout = 15000) => {
  return new Promise<{ element: Element; selector: string } | null>(
    (resolve) => {
      // 先快速检查一下是否已经有元素存在
      for (const selector of selectors) {
        const element = document.querySelector(selector)
        if (element) {
          return resolve({ element, selector })
        }
      }
 
      // 如果没有，就设置MutationObserver监听变化
      const observer = new MutationObserver(() => {
        for (const selector of selectors) {
          console.error(`检查元素: ${selector}`)
          const element = document.querySelector(selector)
          if (element) {
            console.error(`通过观察器找到元素: ${selector}`)
            observer.disconnect()
            resolve({ element, selector })
            return
          }
        }
      })
 
      observer.observe(document.body, {
        childList: true,    // 监听元素添加/删除
        subtree: true,      // 监听所有后代元素
        attributes: true    // 监听属性变化
      })
 
      // 安全网：超时机制
      setTimeout(() => {
        console.error(`等待元素超时，尝试了 ${selectors.length} 个选择器`)
        observer.disconnect()
        resolve(null)
      }, timeout)

const observer = new MutationObserver(() => {
  // DOM变化时立即检查所有选择器
  for (const selector of selectors) {
    console.error(`检查元素2: ${selector}`)
    const element = document.querySelector(selector)
    if (element) {
      console.error(`通过观察器找到元素: ${selector}`)
      observer.disconnect()  // 找到后立即停止监听
      resolve({ element, selector })  // 返回找到的元素
      return  // 提前退出循环
    }
  }
})
 
observer.observe(document.body, {
  childList: true,    // 监听元素添加/删除
  subtree: true,      // 监听所有后代元素
  attributes: true    // 监听属性变化
})
 
// 安全网：超时机制
setTimeout(() => {
  console.error(`等待元素超时，尝试了 ${selectors.length} 个选择器`)
  observer.disconnect()  // 清理监听器
  resolve(null)          // 返回null表示超时
}, timeout)