Chrome扩展开发中如何实现等待按钮可点击并设置最长1秒超时

步骤1：封装等待元素可点击的通用函数 #

function waitForElementClickable(selector, timeout = 1000) {
  const startTime = Date.now();
  return new Promise((resolve) => {
    // 每50ms检查一次元素状态，平衡灵敏度和性能消耗
    const checkInterval = setInterval(() => {
      const el = document.querySelector(selector);
      // 可点击判定条件：元素已存在、可见、未禁用
      const isClickable = el && el.offsetParent !== null && !el.disabled;
      
      // 元素可点击或超时都结束等待
      if (isClickable || Date.now() - startTime >= timeout) {
        clearInterval(checkInterval);
        resolve();
      }
    }, 50);
  });
}

步骤2：替换原有硬编码等待逻辑 #

mouseEventClick('#search'); // 点击搜索按钮

// 替换原有的await sleep(250)，最长等待1秒#buy按钮可点击
await waitForElementClickable('#buy', 1000);

try {
  mouseEventClick('#buy'); // 点击购买按钮
} catch {
  await sleep(750);
  mouseEventClick('#back'); // 无搜索结果时返回搜索页
}

逻辑说明 #

• 轮询间隔设为50ms，能快速响应元素加载完成的状态，不会出现明显的执行延迟
• 元素可点击的判断覆盖了DOM存在、可见、未禁用三个核心条件，避免点击无效报错
• 最长等待时间固定为1秒，超时后无论元素是否存在都会进入后续try代码块，完全符合需求

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