Chrome扩展弹窗表单提交无响应问题排查求助

问题根源 #

1. 后台脚本无法访问弹窗DOM：你将app.js配置为Service Worker（后台脚本），但后台脚本运行在独立的上下文环境，完全无法访问弹窗页面的DOM元素，导致表单提交事件根本没被绑定。
2. 表单默认提交行为未阻止：即便绑定了事件，表单默认会触发页面跳转，弹窗会直接关闭，你自然看不到任何反馈。
3. chrome.storage.get取值错误：代码里用result.key获取存储值，但实际存储的键是grade，应该用result.grade。

修复步骤 #

1. 分离弹窗脚本与后台脚本 #

新建一个专门用于弹窗的脚本文件（比如popup.js），不要复用后台的app.js。

2. 修正manifest.json #

确保后台配置和权限声明正确，弹窗的脚本由HTML自行引入：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "action": {
    "default_popup": "index.html"
  },
  "background": {
    "service_workers": ["app.js"]
  },
  "permissions": ["storage"] // 必须添加该权限才能使用chrome.storage
}

3. 修改index.html引入弹窗脚本 #

在</body>标签前添加脚本引入，确保DOM加载完成后执行脚本：

<!doctype html>
<html>
<body>
  <form id="form">
    <input id="grade" type="text" placeholder="grade">
    <input id="score" type="text" placeholder="score">
    <input type="submit" value="Save">
  </form>
  <script src="popup.js"></script>
</body>
</html>

若添加脚本触发CSP报错，检查manifest.json是否自定义了CSP规则——Manifest V3默认允许加载本地脚本，无需额外配置。

4. 编写popup.js脚本 #

修正事件绑定与逻辑：

document.addEventListener('DOMContentLoaded', function () {
  const form = document.getElementById("form");
  form.addEventListener('submit', function(e) {
    // 阻止表单默认提交行为，避免弹窗关闭
    e.preventDefault();
    
    const grade = document.getElementById("grade").value;
    const score = document.getElementById("score").value;

    alert(`Grade: ${grade}, Score: ${score}`);

    // 存储数据到同步存储
    chrome.storage.sync.set({ grade, score }, function() {
      console.log('数据已保存');
    });

    // 获取存储的数据
    chrome.storage.sync.get(['grade', 'score'], function(result) {
      console.log(`当前存储值：Grade=${result.grade}, Score=${result.score}`);
    });
  });
});

调试技巧 #

• 右键点击弹窗选择「检查」打开开发者工具，查看Console面板的报错与日志。
• 若chrome.storage无响应，确认manifest.json已添加"permissions": ["storage"]。

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