Chrome扩展开发遇TypeError：无法读取null的addEventListener属性

核心原因 #

报错Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')的本质是：你的popup.js在DOM元素（即那两个按钮）还未被浏览器解析渲染完成时就执行了，导致document.getElementById或类似方法获取不到按钮元素、返回了null，自然无法调用addEventListener方法。

你提到“已排除按钮变量问题”，大概率是只检查了选择器拼写，没考虑代码执行时机的问题。

具体解决方法 #

两种常用方案任选其一即可：

方案1：将JS脚本放在HTML body末尾 #

修改popup.html，把引入popup.js的<script>标签移到</body>标签上方，确保浏览器先渲染完所有DOM元素再执行JS代码：

<!-- popup.html 示例结构 -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button id="convert">convert</button>
  <button id="download">download</button>
  <!-- 把script标签移到此处 -->
  <script src="popup.js"></script>
</body>
</html>

方案2：用DOM加载完成事件包裹JS逻辑 #

如果不想调整script标签位置，就在popup.js里把所有事件绑定逻辑放在DOMContentLoaded事件回调中，确保DOM加载完成后再执行：

// popup.js 修改后代码
document.addEventListener('DOMContentLoaded', function() {
  const convertBtn = document.getElementById('convert');
  const downloadBtn = document.getElementById('download');

  convertBtn.addEventListener('click', function() {
    // 你的convert功能逻辑
  });

  downloadBtn.addEventListener('click', function() {
    // 你的download功能逻辑
  });
});

额外检查点 #

• 再次确认popup.html中按钮的id与popup.js里获取元素的选择器完全一致（ID区分大小写）
• 检查manifest.json是否正确声明弹窗页面，示例如下：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  }
}

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