解锁油猴脚本进阶技能，轻松实现表单自动填写

在日常网络操作中，重复填写表单是一项耗时任务。通过油猴脚本（TamperMonkey），我们可以轻松实现自动化，提升效率。本文将从基础到进阶，系统讲解如何使用油猴脚本定位页面元素并自动填写表单，尤其适用于频繁登录、数据录入或重复提交的场景。

准备工作

安装TamperMonkey

步骤：
1. 访问Chrome Web Store，安装TamperMonkey扩展。
2. 安装完成后，点击浏览器右上角的TamperMonkey图标，选择“创建新脚本”。

脚本头示例：

// ==UserScript==
// @name         表单自动填写工具
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  自动填写目标网页的表单
// @author       YourName
// @match        https://example.com/form-page
// @grant        none
// ==/UserScript==

@match指定脚本运行的网页URL，支持通配符（如*://*.example.com/*）。

开发环境

使用浏览器开发者工具（按F12或右键“检查”），检查目标网页的HTML结构。
推荐工具：Chrome DevTools、Firefox Developer Tools。

核心技术：定位页面元素

自动填写表单的关键在于准确找到目标元素。以下是HTML结构的常见属性及定位方法：

1. 理解HTML结构

打开目标网页，按F12查看HTML。假设表单代码如下：

<form id="loginForm">
  <input type="text" id="username" name="user" placeholder="用户名">
  <input type="password" class="pass-field" name="pass" placeholder="密码">
  <select id="role">
    <option value="admin">管理员</option>
    <option value="user">用户</option>
  </select>
  <button type="submit">提交</button>
</form>

关键属性：
- id：全局唯一，如username。
- class：可重复，如pass-field。
- name：表单元素标识，如user。
- tag：标签类型，如input。
- 其他：type（如text）、placeholder等。

2. 定位方法详解

JavaScript提供多种DOM操作方法，以下是常用技巧：

2.1 使用ID定位

let element = document.getElementById('username');
element.value = 'testuser';

特点：最快、最可靠，适合唯一元素。
场景：表单中的username和role。

2.2 使用Name定位

let elements = document.getElementsByName('pass');
elements[0].value = '123456';

特点：返回NodeList，需指定索引。
场景：表单控件，如密码输入框。

2.3 使用Class定位

let element = document.querySelector('.pass-field');
element.value = '123456';
// 或批量操作
document.querySelectorAll('.pass-field').forEach(el => el.value = '123456');

特点：支持CSS选择器，灵活性高。
场景：多个相同样式的元素。

2.4 使用标签名定位

let inputs = document.getElementsByTagName('input');
inputs[0].value = 'testuser';

特点：返回HTMLCollection，适合无明确属性时使用。
场景：批量处理所有input元素。

2.5 使用CSS选择器

let element = document.querySelector('input[placeholder="用户名"]');
element.value = 'testuser';

特点：支持复杂条件（如属性、层级）。
场景：定位特定类型的输入框。

方法	语法	返回类型	优点	场景
getElementById	`document.getElementById('id')`	Element	唯一、高效	唯一ID元素
getElementsByName	`document.getElementsByName('name')`	NodeList	表单控件常用	name属性元素
querySelector	`document.querySelector('selector')`	Element	灵活、支持CSS语法	精确匹配
querySelectorAll	`document.querySelectorAll('selector')`	NodeList	批量操作	多元素操作
getElementsByTagName	`document.getElementsByTagName('tag')`	HTMLCollection	简单、无需额外属性	按标签批量定位

操作表单：填写与提交

1. 设置值

文本/密码输入：

document.getElementById('username').value = 'testuser';

下拉菜单：

document.getElementById('role').value = 'admin';

单选框：

document.querySelector('input[name="gender"][value="male"]').checked = true;

复选框：

document.querySelector('input[type="checkbox"]').checked = true;

2. 触发事件

某些表单元素需模拟用户交互：

let select = document.getElementById('role');
select.value = 'admin';
select.dispatchEvent(new Event('change')); // 触发change事件

3. 提交表单

document.getElementById('loginForm').submit();

或模拟按钮点击：

document.querySelector('button[type="submit"]').click();

进阶技巧

1. 验证元素存在

避免脚本因元素未找到而报错：

function fillElement(selector, value) {
  let element = document.querySelector(selector);
  if (element) {
    element.value = value;
    console.log(`Filled ${selector} with ${value}`);
  } else {
    console.warn(`Element ${selector} not found`);
  }
}
fillElement('#username', 'testuser');

2. 处理动态加载

动态网页可能延迟加载元素，使用延时或观察器：

延时执行：

setTimeout(() => {
  document.getElementById('username').value = 'testuser';
}, 2000); // 等待2秒

MutationObserver：

let observer = new MutationObserver(() => {
  let element = document.getElementById('username');
  if (element) {
    element.value = 'testuser';
    observer.disconnect(); // 找到后停止观察
  }
});
observer.observe(document.body, { childList: true, subtree: true });

3. 使用开发者工具调试

在开发者工具的“元素”面板选中目标元素，右键“Copy selector”获取CSS选择器。
在控制台测试：document.querySelector('#username')，验证是否返回元素。

完整脚本示例

以下是一个针对示例表单的油猴脚本：

// ==UserScript==
// @name         智能表单填写助手
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  自动填写并提交登录表单
// @author       YourName
// @match        https://example.com/form-page
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  function fillForm() {
    // 定义填充数据
    const data = {
      username: 'testuser',
      password: '123456',
      role: 'admin'
    };

    // 填写表单
    let username = document.getElementById('username');
    if (username) username.value = data.username;

    let password = document.querySelector('.pass-field');
    if (password) password.value = data.password;

    let role = document.getElementById('role');
    if (role) {
      role.value = data.role;
      role.dispatchEvent(new Event('change'));
    }

    // 提交表单
    let form = document.getElementById('loginForm');
    if (form) form.submit();
  }

  // 页面加载后执行
  window.addEventListener('load', () => {
    setTimeout(fillForm, 1000); // 延时1秒确保元素加载
  });
})();

应用场景与注意事项

1. 适用场景

重复登录：如内部系统、测试环境。
数据录入：批量填写表格。
自动化测试：模拟用户输入。

2. 注意事项

安全性：避免硬编码敏感信息，可结合浏览器存储（如localStorage）动态读取。
```
let password = localStorage.getItem('savedPassword') || 'default';
```
兼容性：测试脚本在Chrome、Firefox等浏览器上的表现。
网页更新：定期检查目标网页的HTML结构，更新选择器。

3. 扩展功能

多表单支持：通过@match配置多个URL。

条件执行：根据URL参数或元素状态动态运行。

if (window.location.href.includes('login')) {
  fillForm();
}

总结

通过油猴脚本自动填写表单，不仅能提升效率，还能深入理解DOM操作和JavaScript编程。从基本的ID定位到复杂的CSS选择器，再到动态加载处理，本文提供了一套完整的学习路径。借助开发者工具调试和优化脚本，你将轻松应对各种表单自动化需求。开始编写你的第一个脚本吧，释放双手，享受技术带来的便捷！

参考资源

原文 https://blog.csdn.net/2301_79518550/article/details/145061562