Chrome扩展popup代码执行完毕后自动刷新、按钮状态不保留问题求助

问题原因 #

你的按钮放在<form>标签内部，HTML规范中<button>元素如果不显式声明type属性，默认值为submit，点击后会触发表单的默认提交行为，而表单提交默认会重载当前页面，这就是popup被刷新、状态和控制台日志都被重置的核心原因。

解决方法 #

任选以下任意一种方案即可修复：

• 给按钮显式指定type="button"，修改popup.html里的按钮代码：

<button type="button" id="startlabel">Récupérer les données</button>

• 在点击事件回调中阻止默认事件，修改popup.js的startOfScript函数：

const startOfScript = (e) => {
  e.preventDefault(); // 阻止表单默认提交行为
  optionsForm.startlabel.style.display = "none";
  console.log("test");
};
optionsForm.startlabel.addEventListener("click", startOfScript);

• 直接移除多余的<form>标签，如果你不需要用到表单的提交、序列化等特性，直接删除按钮外层的form标签即可彻底避免提交刷新问题。

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