Chrome扩展设置innerHTML报Cannot set properties of null错误

控制台抛出的Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')由两个层面的问题共同导致：

• DOM获取时机错误：代码执行document.getElementById('countdown')时，页面中id为countdown的元素还未完成渲染，返回值为null。后续setInterval每1秒触发一次更新函数，尝试给null对象设置innerHTML属性，就会重复抛出该错误。Chrome扩展开发中如果脚本注入时机配置为document_start、或者脚本标签放在页面<head>中未做加载等待，必然会触发这类问题。
• 函数内部逻辑顺序错误：updateCountdown函数第一行就引用minutes、seconds变量，但两个变量在该行之后才完成声明赋值，受JavaScript变量提升规则影响，执行渲染逻辑时两个变量值均为undefined，就算DOM正常获取，页面也会显示异常的undefined:undefined。

1. 调整初始化逻辑，确保DOM加载完成后再获取元素、启动定时器
   • 普通页面场景：将脚本标签移到HTML文件的</body>闭合标签前，或把初始化逻辑包裹在DOMContentLoaded事件回调中执行。
   • Chrome扩展场景：在manifest配置中将content script的run_at字段设为document_idle（默认配置，DOM加载完成后注入脚本），不要使用document_start配置。
2. 修正倒计时函数的执行顺序，先计算时间值再渲染页面，同时增加空值校验避免极端场景报错

修复后的完整可运行代码：

const startingMinutes = 30;
let time = startingMinutes * 60;
let countdownTimer = null;

document.addEventListener('DOMContentLoaded', () => {
  const countdownEl = document.getElementById('countdown');
  // 元素不存在时直接终止初始化，避免报错
  if (!countdownEl) return;

  // 确认元素存在后再启动定时器
  countdownTimer = setInterval(updateCountdown, 1000);

  function updateCountdown() {
    // 先计算分、秒数值
    const minutes = Math.floor(time / 60);
    let seconds = time % 60;
    seconds = seconds < 10 ? `0${seconds}` : seconds;
    // 数值计算完成后再写入DOM
    countdownEl.innerHTML = `${minutes}:${seconds}`;

    time--;
    time = time < 0 ? 0 : time;
    if (time === 0) {
      triggerAlert();
      time = startingMinutes * 60;
    }
  }
})

function triggerAlert() {
  alert("!");
  // 如需倒计时结束后停止计时，取消下方注释即可
  // clearInterval(countdownTimer);
}

优化说明：将弹窗函数移到事件回调外部，避免每次执行计时更新都重复声明函数；增加元素空值校验，就算后续页面结构调整移除了倒计时节点，也不会抛出控制台错误。

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