如何为Google表单的提交/下一步按钮添加有效事件监听器？

Google表单的提交逻辑并非传统的<form>表单提交，完全由JavaScript驱动实现，所以直接监听form的submit事件根本不会触发，再加上提交按钮是嵌套结构的<span>，得换思路处理：

1. 定位提交/下一步按钮 #

Google表单的按钮有特定样式类（类名可能会更新，建议自己在浏览器控制台用元素选择器查看），常见类组合是NPEfkd RveJvd snByac，也可通过按钮文本定位：

// 方式1：通过类名定位（优先）
const submitBtn = document.querySelector('span.NPEfkd.RveJvd.snByac');

// 方式2：通过文本定位（适配多语言场景）
const submitBtn = Array.from(document.querySelectorAll('span'))
  .find(el => el.textContent.trim() === '提交' || el.textContent.trim() === 'Next');

2. 监听按钮点击（处理动态加载） #

Google表单是动态渲染的，直接写代码可能找不到按钮，得用MutationObserver监听页面元素变化，等按钮出现后再绑定事件：

function handleBtnClick(e) {
  // 先阻止按钮默认逻辑，避免表单直接提交
  e.preventDefault();
  e.stopPropagation();

  // 收集表单数据：遍历所有输入元素
  const formData = {};
  // 覆盖文本框、选中的单选框、文本域、下拉框
  document.querySelectorAll('input[type="text"], input[type="radio"]:checked, textarea, select').forEach(input => {
    if (input.name) {
      formData[input.name] = input.value;
    }
  });

  // 本地存储数据（使用浏览器扩展的storage API）
  chrome.storage.local.set({ latestGoogleFormData: formData }, () => {
    console.log('表单数据已保存');
    // 存储完成后，手动触发表单提交
    const nativeClickEvent = new MouseEvent('click', { bubbles: true, cancelable: true });
    e.target.dispatchEvent(nativeClickEvent);
  });
}

// 监听页面元素变化，等待按钮出现
const observer = new MutationObserver((mutations) => {
  const submitBtn = document.querySelector('span.NPEfkd.RveJvd.snByac');
  if (submitBtn) {
    submitBtn.addEventListener('click', handleBtnClick);
    observer.disconnect(); // 找到按钮后停止监听
  }
});

// 启动监听，覆盖整个body的子元素变化
observer.observe(document.body, { childList: true, subtree: true });

3. 关键说明 #

• 原代码无效的原因：Google表单没有触发传统的form.submit()事件，所有提交逻辑都是绑定在按钮点击事件上的JS逻辑，监听form的submit事件自然不会生效。
• 若按钮类名更新，直接打开Google表单，右键点击提交按钮→检查元素，替换代码中的类名即可。

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