Edge扩展按钮点击无响应，如何实现点击后输入框显示Hello World？

问题根源 #

你的popup.js在<head>标签中加载，此时浏览器还未解析渲染<body>内的DOM元素，执行document.getElementById("button1")会返回null，无法完成点击事件绑定，导致按钮点击无反应。

修复方案（两种可选） #

方案1：将脚本移到<body>末尾

把<script src="popup.js"></script>放在<body>的最后，确保DOM元素全部加载完成后再执行JS代码：

<!DOCTYPE html>
<html>
  <head>
    <title>My Extension Popup</title>
  </head>
  <body>
    <input type="text" id="myInput">
    <button id="button1">Button 1</button>
    <button id="button2">Button 2</button>
    <script src="popup.js"></script>
  </body>
</html>

方案2：监听DOM加载完成事件

保持popup.html不变，修改popup.js，通过DOMContentLoaded事件确保DOM加载完成后再绑定事件：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("button1").addEventListener('click', function() {
    let input = document.getElementById("myInput");
    input.value = "Hello, world!";
  });
});

验证方法 #

修改后重新加载扩展，点击弹窗中的Button 1，输入框会正常显示"Hello, world!"。

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