Chrome扩展开发使用querySelector报错无法监听元素点击问题求助

你遇到的问题来自两个独立的错误，和扩展权限配置完全无关，不需要新增permissions项：

• 语法错误：querySelector方法要求传入字符串格式的CSS选择器，你写的document.querySelector(one)里的one是未定义的变量，不是合法的选择器参数
• 运行上下文错误：Manifest V3的background是Service Worker运行环境，不存在window、document等DOM API，你将操作popup页面DOM的代码放在了background的service worker文件中，必然无法执行

1. 调整JS文件引用逻辑
   你需要将DOM操作相关的代码从background的/js/app.js中移出，单独存为/js/popup.js，然后在popup对应的index.html文件的</body>标签之前引入该文件：

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

background service worker仅用于处理后台运行、全局事件监听等不需要操作DOM的逻辑。

2. 修正querySelector语法
   按照你HTML中按钮的标识方式，给querySelector传入带引号的合法选择器，比如你的按钮用id标识为one、two，就写为：

document.addEventListener('DOMContentLoaded', () => {
  const one = document.querySelector('#one');
  one.addEventListener('click', event => {
    // 点击逻辑
  });
  // 其余数字按钮的选择器同理修改
  const two = document.querySelector('#two');
  // ...
})

外层加DOMContentLoaded监听是为了确保DOM完全加载后再执行选择器查询，避免拿到null。

你当前为每个数字单独声明变量、绑定事件的写法冗余度很高，可以用批量绑定的方式简化代码：

1. 给所有数字按钮添加统一的class和自定义属性，HTML示例：

<button class="num-btn" data-num="1">1</button>
<button class="num-btn" data-num="2">2</button>
<!-- 其余数字按钮同理设置 -->

2. JS批量绑定事件：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.num-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const currentNum = btn.dataset.num;
      // 直接拿到当前点击的数字，执行计算器逻辑即可
      console.log('点击的数字：', currentNum);
    })
  })
})

该写法只需要一次查询、一次事件绑定即可覆盖所有数字按钮，后续新增按钮也不需要修改JS逻辑。

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