Chrome扩展开发遇Cannot read property 'addEventListener' of null报错问询

• JS执行时DOM尚未加载完成，document.querySelector('button')获取到的结果为null，调用addEventListener方法时触发类型错误
• 提供的代码末尾存在冗余的}, false)片段，存在语法错误

1. 调整JS执行时机，保证DOM渲染完成后再执行绑定逻辑，两种可选方案：
   • 将JS对应的script标签放在HTML文件body标签的末尾，确保按钮元素先被解析完成
   • 将JS代码包裹在DOMContentLoaded事件回调中，参考代码如下：

   document.addEventListener('DOMContentLoaded', function () {
     const targetBtn = document.querySelector('button')
     // 增加空值判断增强健壮性
     if (targetBtn) {
       targetBtn.addEventListener('click', onclick, false)
     }
   
     function onclick () {
       chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
         chrome.tabs.sendMessage(tabs[0].id, {createDiv: {width: "100px", height: "100px", innerHTML: "Hello"}}, function(response) {
             console.log(response.confirmation);
         });
       });
     }
   })
   

2. 删除原代码末尾多余的}, false)片段，修正语法错误
3. 可按照上述示例增加空值判断，避免同类问题出现时直接抛出异常，方便排查定位

修改完成后重新加载Chrome扩展，触发按钮点击逻辑，查看控制台是否还存在报错，通信逻辑是否正常执行。

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