Chrome扩展中JavaScript循环导致页面无法加载问题求助

根因说明 #

你编写的同步while循环会完全阻塞浏览器主线程，JavaScript单线程运行机制下，主线程被循环占住后，页面的后续渲染、接口请求、动态内容注入逻辑全部无法执行，永远不可能等到目标字符串出现，自然页面就会卡住无法加载。

可行实现方案 #

方案1：定时轮询（写法简单易维护） #

通过定时器间隔检查目标内容，不会阻塞主线程正常运行：

// 封装等待目标内容的通用函数，checkInterval为检查间隔，单位毫秒
function waitForTargetText(targetStr, checkInterval = 200) {
  return new Promise((resolve) => {
    const checkTimer = setInterval(() => {
      const currentTextSegment = document.documentElement.innerText.split(",")[5]
      if (currentTextSegment === targetStr) {
        clearInterval(checkTimer)
        resolve()
      }
    }, checkInterval)
  })
}

// 核心业务逻辑写在then回调中
waitForTargetText(" 2021 - June 25").then(() => {
  // 此处替换为你的原有核心脚本代码
  console.log("目标内容已加载，开始执行核心逻辑")
})

方案2：MutationObserver监听（性能更优） #

只有DOM发生变化时才触发检查，无需频繁轮询，资源消耗更低：

function waitForTargetText(targetStr) {
  return new Promise((resolve) => {
    // 先检查一次当前页面是否已经加载完目标内容，避免无意义监听
    let currentTextSegment = document.documentElement.innerText.split(",")[5]
    if (currentTextSegment === targetStr) {
      resolve()
      return
    }
    // 监听整个文档的DOM变动
    const domObserver = new MutationObserver(() => {
      currentTextSegment = document.documentElement.innerText.split(",")[5]
      if (currentTextSegment === targetStr) {
        domObserver.disconnect()
        resolve()
      }
    })
    domObserver.observe(document.documentElement, {
      childList: true,
      subtree: true,
      characterData: true
    })
  })
}

// 调用方式和方案1一致
waitForTargetText(" 2021 - June 25").then(() => {
  // 核心业务逻辑写在这里
})

优化建议 #

• 不建议依赖固定下标[5]判断内容，页面结构变动后很容易失效，可以直接全局匹配目标字符串，判断逻辑改为document.documentElement.innerText.includes("2021 - June 25")兼容性更强
• 可以增加超时逻辑，比如超过30秒未匹配到目标内容就终止等待，避免无意义的资源消耗

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