如何实现Chrome扩展中提交按钮点击后禁用及重复提交拦截

针对你的Chrome扩展需求，我们需要实现两个核心功能：页面加载时若已存储Discord ID则自动禁用提交按钮，以及用户点击提交后立即禁用按钮防止重复操作。下面是修改后的完整代码及关键说明：

修改后的popup.js #

function get_discord_id(callback) {
  chrome.storage.sync.get(["discord_id"], (result) => {
    callback(result.discord_id);
  });
}
function set_discord_id(discord_id) {
  chrome.storage.sync.set({ discord_id: discord_id }, () => {});
}
window.addEventListener("DOMContentLoaded", () => {
  // 提前获取DOM元素，避免重复查询
  const submitBtn = document.getElementById("discord-id-button");
  const input = document.getElementById("discord-id-input");

  // 页面加载时检查存储状态，禁用按钮
  get_discord_id((discord_id) => {
    console.log(`Console test:`);
    if (discord_id != null) {
      input.value = "";
      input.placeholder = discord_id;
      // 核心修改1：已存储ID时直接禁用按钮
      submitBtn.disabled = true;
    }
  });

  // 提交按钮点击事件处理
  submitBtn.addEventListener("click", (e) => { 
    // 核心修改2：添加e参数（原代码缺失导致e.target报错）
    const value = input.value.trim();
    // 空输入直接返回，避免无效提交
    if (!value) return;

    // 核心修改3：点击后立即禁用按钮
    e.target.disabled = true;

    input.value = "";
    input.placeholder = value;
    chrome.runtime.sendMessage({ discord_id: value }, function(response) {
      // console.log(response.discord_id);
    });
    set_discord_id(value);
  });
});

关键修改说明 #

1. 页面加载时自动禁用：在get_discord_id的回调逻辑中，当检测到已存储的Discord ID时，直接设置按钮的disabled属性为true，满足已存储ID时按钮不可用的需求。
2. 点击后立即禁用：在点击事件的最前端就执行禁用操作，确保用户点击后按钮立刻失效，彻底杜绝重复提交。同时修复了原代码中未传递e参数导致e.target报错的问题。
3. 输入合法性校验：添加trim()处理输入值，空输入时直接终止后续逻辑，避免无效的存储和消息发送操作。

可选视觉优化（提升用户体验） #

如果需要给禁用状态的按钮添加直观的视觉反馈，可以在CSS中补充以下样式：

#discord-id-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
#discord-id-button:disabled:hover {
  box-shadow: none;
}

这样禁用后的按钮会呈现半透明效果，鼠标悬停时显示禁止光标，让用户清晰感知按钮状态。

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