未捕获的类型错误：无法读取 null 的属性“addEventListener”。上下文 _generated_background_page.html答案

【问题标题】：Uncaught TypeError: Cannot read property 'addEventListener' of null. Context _generated_background_page.html未捕获的类型错误：无法读取 null 的属性“addEventListener”。上下文 _generated_background_page.html
【发布时间】：2020-04-17 13:55:08
【问题描述】：

我正在编写一个 chrome 扩展，并试图通过外部 JS 文件将事件侦听器绑定到 HTML 按钮。

事件监听器工作，但是 Chrome 抛出以下错误：

这是按顺序排列的 manifest.json、background.js 和 popup.html 文件：

{ “名称”：“滴”， “版本”：“1.0”， “清单版本”：2， "description": "DRIP 是一种用于购买有限物品的自动化工具", “权限”：[“存储”，“标签”]，

"browser_action": {
    "default_popup": "popup.html"
},

"background": {
    "scripts": ["background.js"]
}

}

    function myAlert(){
  alert('hello world')
}

  document.addEventListener('DOMContentLoaded', function () {
      document.getElementById('alertButton').addEventListener('click', myAlert);
  });

<html>
<head>
    <title>Test</title>

</head>
<body>
    <form name='testForm'>
        <input type='button' id='alertButton' value='click me'>
    </form>
    <script language='javascript' src='background.js' defer></script>
</body>

如果我的格式不是很好，我很抱歉。非常感谢您的输入！

【问题讨论】：

您是否尝试将脚本放入head 标记中？
@Ayfri 是的，我试过了，但仍然出现同样的错误。
@Sam，您希望在页面加载时打开警报吗？它在这里工作codepen.io/Maniraj_Murugan/pen/QWjNaNQ
@ManirajMurugan 我希望在单击按钮时打开警报。我的扩展程序成功地做到了，但我得到了上述错误并想摆脱它。

标签： javascript html

【解决方案1】：

删除

"background": {
    "scripts": ["background.js"]
}

用于在后台运行任务并加载后台页面。它在空白页_generated_background_page.html（它为您生成）上运行。请注意，您可以根据需要设置背景页面的 html。
弹出窗口是一个单独的背景页面，其 html 设置为 default_popup 值。那是您单击图标并弹出窗口时所获得的页面。

参考官方文档：https://developer.chrome.com/extensions/background_pages

【讨论】：