Chrome扩展开启DevTools时首次加载失效，请求技术排查

这大概率是代码时机问题，而非本地环境或Chrome Bug。

核心原因 #

静态注入的Content Script执行时机，和页面动态渲染元素的时序不匹配：

• 未打开DevTools时，页面JS执行速度快，Content Script运行时目标元素（#board-board内的div）已经渲染完成，因此能读取到36个元素。
• 打开DevTools首次加载页面时，调试器会轻微延迟页面JS的执行时序，导致Content Script运行时，#board-board内的div还未被动态生成，因此输出长度为0。

另外，你使用的getElementsByTagName返回的是动态HTMLCollection，但如果执行代码时子元素还未渲染，它的长度自然为0——这不是API的问题，而是执行时机的问题。

解决方法 #

1. 确保在DOM完全加载后执行代码

用DOMContentLoaded事件包裹你的逻辑，确保页面基础DOM结构渲染完成后再读取元素：

document.addEventListener('DOMContentLoaded', function() {
  const board = document.getElementById('board-board');
  if (!board) return;
  const boardElements = board.getElementsByTagName('div');
  console.log("number of elements in board class:" + boardElements.length);
});

2. 监听动态元素的渲染（更稳妥）

如果目标元素是通过AJAX或异步JS动态生成的，DOMContentLoaded也可能早于元素渲染，此时用MutationObserver监听元素变化：

// 等待目标父元素出现
function waitForElement(selector, callback) {
  let element = document.querySelector(selector);
  if (element) {
    callback(element);
    return;
  }
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      element = document.querySelector(selector);
      if (element) {
        observer.disconnect();
        callback(element);
      }
    });
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

// 监听board元素内部的子节点变化
waitForElement('#board-board', board => {
  const observer = new MutationObserver(() => {
    const boardElements = board.getElementsByTagName('div');
    console.log("number of elements in board class:" + boardElements.length);
    // 确认元素不再新增后，可断开观察者
    observer.disconnect();
  });
  observer.observe(board, { childList: true, subtree: true });
  
  // 先检查一次当前已存在的元素
  const initialCount = board.getElementsByTagName('div').length;
  if (initialCount > 0) {
    console.log("number of elements in board class (initial):" + initialCount);
    observer.disconnect();
  }
});

3. 显式指定Content Script的注入时机

在扩展的manifest.json中，给Content Script设置run_at: "document_idle"（默认值，但显式声明更稳妥），确保页面处于空闲状态时再注入：

{
  "content_scripts": [
    {
      "matches": ["你的目标网站域名"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

排除其他可能性 #

• 本地环境问题：除非你安装了其他干扰页面渲染的Chrome插件，否则概率极低，可通过禁用其他插件测试。
• Chrome Bug：这种时序问题几乎不可能是Chrome本身的Bug，DevTools只是改变了页面执行的时序，暴露了代码中存在的时机漏洞。

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