开发Chrome扩展实现Google Form自动填充：如何获取输入框ID？

Google Form的输入框通常不会自带原生ID，但可以通过以下几种可靠方式定位元素，结合你提供的代码片段，具体方案如下：

• 利用aria-labelledby属性关联定位
  输入框的aria-labelledby="i6"指向对应问题标题的ID，先找到标题元素再反向定位输入框，这种方式稳定性更高（标题ID和表单问题绑定，不易随UI更新变动）：

  // 定位问题标题元素，再逐层找到对应的输入框
  const questionLabel = document.getElementById('i6');
  const targetInput = questionLabel?.closest('.aXBtI.Wic03c')?.querySelector('input.whsOnd.zHQkBf');
  if (targetInput) {
    targetInput.value = '需要填充的内容';
    // 触发输入事件，确保表单识别值已更新
    targetInput.dispatchEvent(new Event('input', { bubbles: true }));
  }
  

• 直接使用jsname属性选择
  Google Form会给核心元素分配唯一的jsname标识，你的输入框带有jsname="YPqjbf"，可以直接通过属性选择器定位：

  const targetInput = document.querySelector('input[jsname="YPqjbf"]');
  if (targetInput) {
    targetInput.value = '需要填充的内容';
    targetInput.dispatchEvent(new Event('input', { bubbles: true }));
  }
  

• 结合层级结构与类名定位
  通过多层容器类名缩小范围，避免单个类名变动导致选择失效：

  const targetInput = document.querySelector('.aCsJod.oJeWuf .aXBtI.Wic03c .Xb9hP input.whsOnd.zHQkBf');
  if (targetInput) {
    targetInput.value = '需要填充的内容';
    targetInput.dispatchEvent(new Event('input', { bubbles: true }));
  }
  

注意 #

Google Form的类名、jsname可能随版本更新变化，优先推荐第一种基于aria-labelledby的方案，关联的问题标题ID相对更稳定。

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