当前位置：首页 > news >正文

手把手教你写一个简单的油猴脚本：以实验室安全考试自动答题为例

news 2026/5/12 17:49:39

从零构建油猴脚本：浏览器自动化实战指南

打开开发者工具时，你是否好奇过那些能自动填写表单、批量下载资源的神秘代码？Tampermonkey（油猴）作为浏览器脚本的瑞士军刀，让普通用户也能用几行JavaScript实现网页操控魔法。本文将以模拟考试系统自动答题为案例，带你从零编写第一个实用脚本，理解DOM操作与事件模拟的核心逻辑。

1. 油猴脚本开发环境搭建

在编写第一个.user.js文件前，需要完成基础环境配置。推荐使用Chromium内核浏览器（如Edge、Chrome）或Firefox，它们对Tampermonkey扩展的支持最为完善。

安装步骤分解：

访问Tampermonkey官网获取对应浏览器的扩展
点击扩展图标 → "创建新脚本"进入编辑器界面
观察自动生成的脚本模板结构

注意：部分企业网络可能限制扩展安装，个人开发建议使用常规网络环境

基础脚本模板包含关键元数据区块，例如：

// ==UserScript== // @name My First Script // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://www.example.com/* // @grant none // ==/UserScript==

其中@match参数决定了脚本的生效范围，支持通配符匹配：

*://*.example.com/*匹配所有协议的子域名路径
https://example.com/user/*精确匹配特定路径

2. 网页元素定位技术解析

实现自动答题的第一步是准确获取题目元素。现代网页主要采用CSS选择器或XPath定位DOM节点，油猴脚本通常使用浏览器原生API：

// 获取所有class包含"question"的div元素 const questions = document.querySelectorAll('div.question'); // 通过XPath查找包含"选择题"文本的节点 const xpathResult = document.evaluate( "//*[contains(text(),'选择题')]", document, null, XPathResult.ANY_TYPE, null );

元素定位实战技巧：

使用开发者工具(Console)测试选择器有效性
优先选择具有唯一性的id或data-*属性
对于动态加载内容，需配合MutationObserver监听DOM变化

下表对比常见定位方法：

方法	优点	缺点
getElementById	性能最佳	仅适用于唯一ID
querySelector	支持CSS3复杂选择	返回首个匹配项
getElementsByClassName	批量获取同类元素	返回动态HTMLCollection
XPath	支持文本内容定位	语法复杂

3. 自动答题核心逻辑实现

基于实验室考试系统的特点，我们需要构建"题目识别→答案匹配→自动填充"的完整流程。以下是简化版实现框架：

function autoAnswer() { // 1. 题目采集 const questionElements = document.querySelectorAll('.shiti'); const questionBank = { "实验室灭火器类型": "干粉灭火器", "酸碱中和原则": "酸入水" }; // 2. 答案匹配 questionElements.forEach(q => { const text = q.textContent.trim(); const matchedAnswer = questionBank[text]; // 3. 自动填充 if (matchedAnswer) { const options = q.querySelectorAll('input[type=radio]'); options.forEach(opt => { if (opt.nextSibling.textContent.includes(matchedAnswer)) { opt.click(); } }); } }); } // 页面加载完成后执行 window.addEventListener('load', autoAnswer);

关键点优化建议：

使用textContent而非innerHTML避免XSS风险
添加setTimeout延迟确保动态内容加载完成
对题目文本进行模糊匹配（如去除标点、空格）

4. 脚本健壮性增强策略

生产环境脚本需要考虑异常处理和兼容性。以下是提升可靠性的实践方案：

// 错误边界处理 try { const unsafeOperation = () => { /*...*/ }; unsafeOperation(); } catch (e) { console.error(`脚本执行失败: ${e.message}`); // 优雅降级方案 alert('自动答题功能暂不可用，请手动作答'); } // 多版本兼容检测 if (typeof Promise !== 'undefined') { // 现代浏览器逻辑 } else { // 传统浏览器备用逻辑 }

健壮性检查清单：

[ ] 添加网络请求超时限制
[ ] 处理iframe嵌套页面场景
[ ] 验证DOM元素存在性再操作
[ ] 提供用户关闭自动化的选项

5. 高级技巧：题库外部化与更新机制

硬编码题库不利于维护，可通过外部资源实现动态加载：

const loadQuestionBank = async () => { const response = await fetch('https://example.com/api/questions'); return response.json(); }; // 配合GM_xmlhttpRequest使用（需声明@grant） GM_xmlhttpRequest({ method: "GET", url: "https://example.com/data.json", onload: function(response) { console.log("题库加载完成", JSON.parse(response.responseText)); } });

版本控制方案对比：

方案	实现难度	可维护性	实时性
脚本内嵌题库	★☆☆☆☆	★★☆☆☆	★☆☆☆☆
JSONP接口调用	★★★☆☆	★★★★☆	★★★★☆
GitHub RAW托管	★★☆☆☆	★★★★☆	★★★☆☆
用户本地存储	★★★☆☆	★★☆☆☆	★☆☆☆☆

在开发者工具的Network面板中，我经常发现某些API请求返回的题库数据格式与预期不符。这时需要添加类型校验：

function validateQuestion(data) { return Array.isArray(data) && data.every(item => typeof item.question === 'string' && Array.isArray(item.answers) ); }

掌握这些技巧后，你可以进一步探索：