在Google Calendar中通过注入JavaScript点击Event按钮失败的问题

问题核心在于依赖不稳定的DOM选择器和固定延迟不可靠：Google Calendar的动态DOM结构会随时变化，硬等2秒无法保证元素处于可交互状态。以下是优化方案：

1. 替换为稳定的选择器 #

放弃嵌套层级的绝对路径，改用语义化属性或文本内容定位：

• 优先用aria-label定位：

  var eventButton = document.querySelector('div[aria-label="Event"]');
  

• 或通过文本匹配定位：

  var eventButton = Array.from(document.querySelectorAll('.uyYuVb div'))
    .find(el => el.textContent.trim() === 'Event');
  

2. 用动态等待替代固定延迟 #

固定setTimeout无法适配DOM加载速度，改用异步逻辑等待元素可见且可交互：

// 工具函数：等待元素出现并可交互
function waitForElement(selector, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const checkInterval = setInterval(() => {
      const element = document.querySelector(selector);
      // 确保元素存在且可见
      if (element && element.offsetParent !== null) {
        clearInterval(checkInterval);
        resolve(element);
      }
    }, 100);

    // 超时兜底
    setTimeout(() => {
      clearInterval(checkInterval);
      reject(new Error('元素超时未出现'));
    }, timeout);
  });
}

// 优化后的主函数
async function openEvent() {
    const createButton = document.querySelector('div[aria-label="Create"]');
    if (!createButton) {
        console.log("未找到Create按钮");
        return;
    }
    createButton.click();
    console.log("已点击Create按钮");

    try {
        // 等待Event按钮就绪
        const eventButton = await waitForElement('div[aria-label="Event"]');
        eventButton.click();
        console.log("已成功点击Event按钮");
    } catch (err) {
        console.log("点击Event按钮失败：", err.message);
    }
}

// 注入执行
const script = document.createElement('script');
script.textContent = `(${openEvent.toString()})();`;
document.head.appendChild(script);

3. 模拟真实用户点击（可选） #

如果直接调用click()仍无效，可模拟原生鼠标事件触发：

function simulateClick(element) {
  const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window
  });
  element.dispatchEvent(clickEvent);
}

将eventButton.click()替换为simulateClick(eventButton)即可。

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