基于Bookmarklet实现Google Meet布局自动化的问题求助

背景与需求 #

我使用Surface平板通过Google Meet进行演示，流程为：用平板创建会议，将连接投影仪的桌面PC加入会议，再共享平板屏幕。手动配置桌面端Google Meet耗时繁琐，希望通过Bookmarklet自动化以下任务：

• 关闭麦克风和摄像头
• 输入访客名称
• 点击“Ask to join”按钮
• 等待10秒以让平板接受请求
• 设置“spotlight”布局并全屏

遇到的问题 #

目前我针对Chromium内核浏览器编写了代码，但遇到核心问题：直接设置输入框值后，“Ask to join”按钮无法激活；手动启用按钮并点击会被Meet判定为异常操作而报错。我知道应使用dispatchEvent()模拟键盘输入（还需用其发送Esc键退出布局菜单），但不掌握该函数的正确用法，例如测试向StackOverflow搜索框发送“a”的代码未生效，恳请提供帮助。

复现环境步骤 #

• 在Chromium内核浏览器中打开https://meet.google.com/new/（模拟平板端，需登录账号）
• 复制生成的会议链接
• 在隐私窗口打开该链接（模拟桌面端，无需登录）
• 输入访客名称即可作为嘉宾参会

1. 正确使用dispatchEvent()模拟用户输入 #

Google Meet的表单元素依赖真实的用户交互事件（如input、change）更新状态，直接修改value不会触发这些事件。以下是模拟键盘输入的通用函数：

function simulateInput(element, text) {
  element.focus();
  element.value = ''; // 清空原有内容
  for (const char of text) {
    const keydownEvent = new KeyboardEvent('keydown', { key: char, bubbles: true });
    const inputEvent = new InputEvent('input', { data: char, bubbles: true });
    const keyupEvent = new KeyboardEvent('keyup', { key: char, bubbles: true });
    
    element.dispatchEvent(keydownEvent);
    element.dispatchEvent(inputEvent);
    element.dispatchEvent(keyupEvent);
  }
  element.dispatchEvent(new Event('change', { bubbles: true })); // 触发表单验证
}

2. 完整自动化Bookmarklet代码 #

将以下代码保存为书签，在桌面端打开Meet会议链接后点击即可执行：

javascript:(function() {
  // 1. 关闭麦克风和摄像头
  function toggleDevice(selector) {
    const button = document.querySelector(selector);
    if (button && button.getAttribute('aria-pressed') === 'true') {
      button.click();
    }
  }
  toggleDevice('button[aria-label*="microphone"]');
  toggleDevice('button[aria-label*="camera"]');

  // 2. 输入访客名称
  const nameInput = document.querySelector('input[type="text"][aria-label*="name"]');
  if (nameInput) {
    simulateInput(nameInput, '桌面演示端'); // 替换为你的访客名称
  }

  // 3. 点击"Ask to join"按钮
  setTimeout(() => {
    const joinButton = document.querySelector('button[aria-label*="Ask to join"]');
    if (joinButton && !joinButton.disabled) {
      joinButton.click();
    }
  }, 1000); // 等待1秒确保输入事件触发完成

  // 4. 等待平板接受请求（10秒）
  setTimeout(() => {
    // 5. 设置Spotlight布局
    const layoutButton = document.querySelector('button[aria-label*="layout"]');
    if (layoutButton) {
      layoutButton.click();
      // 等待布局菜单加载
      setTimeout(() => {
        const spotlightOption = document.querySelector('div[aria-label*="Spotlight"]');
        if (spotlightOption) {
          spotlightOption.click();
          // 发送Esc键关闭菜单
          document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
        }
        // 进入全屏
        const fullscreenButton = document.querySelector('button[aria-label*="full screen"]');
        if (fullscreenButton) {
          fullscreenButton.click();
        }
      }, 1000);
    }
  }, 10000);

  // 模拟输入的辅助函数
  function simulateInput(element, text) {
    element.focus();
    element.value = '';
    for (const char of text) {
      element.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
      element.dispatchEvent(new InputEvent('input', { data: char, bubbles: true }));
      element.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
    }
    element.dispatchEvent(new Event('change', { bubbles: true }));
  }
})();

关键说明 #

• 事件冒泡：所有事件都设置bubbles: true，确保能被Meet的监听器捕获。
• 分步延迟：使用setTimeout确保DOM元素加载完成后再操作，避免元素未渲染导致的错误。
• 真实交互模拟：通过模拟keydown、input、keyup系列事件，让Meet判定为真实用户输入，避免触发异常检测。

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