开发Google Forms填充Chrome扩展时遇addEventListener未捕获类型错误

首先看你提供的HTML代码里有个明显的语法问题，你的script标签写反了：

</script><script src="popup.js"></script>

应该改成正常的格式：

<script src="popup.js"></script>

不过这只是基础问题，更核心的原因是脚本执行时机不对——当popup.js在head里加载时，页面的DOM还没完全渲染出来，你去获取#fillForm按钮的时候会得到null，这时候调用addEventListener自然会抛出"Cannot read properties of null"的类型错误。

这里有两种靠谱的解决办法：

方法1：把脚本放在body末尾 #

把script标签移到body的最后，这样DOM元素都已经渲染完成，再执行脚本就能正确获取到按钮：

<!DOCTYPE html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
</head>
<body>
<h2>filler</h2>
<button id="fillForm">Fill form</button>
<script src="popup.js"></script>
</body>
</html>

方法2：监听DOMContentLoaded事件 #

如果一定要把脚本放在head里，就在popup.js里包裹一个DOM加载完成的监听事件，确保DOM渲染好之后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
  const fillBtn = document.getElementById('fillForm');
  if (fillBtn) {
    fillBtn.addEventListener('click', function() {
      // 这里写你的填充表单逻辑
      console.log('开始填充表单');
    });
  } else {
    console.error('找不到fillForm按钮元素');
  }
});

另外还要检查Chrome扩展的manifest.json配置，确保popup的路径是正确的，比如基于Manifest V3的配置示例：

{
  "manifest_version": 3,
  "name": "Form Filler",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["activeTab"]
}

按照上面的步骤调整后，应该就能解决那个未捕获的类型错误了。

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