Chrome扩展addEventListener报错Cannot read properties of null

抛出Cannot read properties of null (reading 'addEventListener')的根本原因是：执行document.getElementById('spellCheck')时，文档中尚未加载/渲染出id为spellCheck的DOM元素，方法返回值为null，对null调用事件绑定方法就会触发该报错。
常见触发场景：

• JS脚本引入位置在目标DOM元素之前，脚本执行时浏览器还没解析到对应元素
• 扩展popup页、选项页的脚本未等待DOM加载完成就直接执行DOM查询逻辑
• HTML中目标元素的id拼写错误、大小写不匹配，或者误把class属性当成id属性设置

选择任意一种方案即可解决问题：

方案1：调整脚本加载位置 #

将JS脚本的引入标签放到HTML文档</body>闭合标签之前，保证所有DOM元素解析完成后再执行脚本逻辑：

<body>
  <!-- 其余页面元素 -->
  <button id="spellCheck">启动拼写检查</button>

  <!-- 脚本放在所有DOM节点的最后 -->
  <script src="popup.js"></script>
</body>

方案2：等待DOM加载完成后再执行绑定逻辑 #

如果不方便调整脚本位置，可将DOM查询、事件绑定的逻辑包裹在DOMContentLoaded事件回调中，确保DOM树构建完成后再执行操作，同时增加非空校验提前捕获id拼写错误的问题：

document.addEventListener('DOMContentLoaded', () => {
  const spellCheckBtn = document.getElementById('spellCheck')
  if (!spellCheckBtn) {
    console.error('未找到id为spellCheck的元素，请检查HTML中id属性拼写是否正确')
    return
  }

  spellCheckBtn.addEventListener('click', async () => {
    const [tab] = await chrome.tabs.query({
      active: true,
      currentWindow: true
    });

    const winWidth = 600;
    const winHeight = 550;
    const leftPos = (screen.width / 2) - (winWidth / 2);
    const topPos = (screen.height / 2) - (winHeight / 2);

    chrome.windows.create({
      url: 'onboarding.html',
      type: 'popup',
      width: winWidth,
      height: winHeight,
      left: leftPos,
      top: topPos
    }, (newWindow) => {})
  })
})

扩展场景额外排查 #

如果上述方案未生效，检查扩展的manifest配置：如果是content script中操作页面DOM，需要将content script的run_at字段配置为document_idle或document_end，避免脚本注入时机过早，无法获取到页面元素。

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