零基础油猴脚本保姆级学习计划，7天快速入门

「零基础油猴脚本」保姆级学习计划，共7天完成。所有步骤保证清晰无术语，附带案例和验证方法，确保小白也能跑通。

─── 第1天：认识油猴 & 完成第一个脚本 ───

1. 安装油猴（Tampermonkey）

   • Chrome：打开应用商店 → 搜索Tampermonkey → 安装
   • Firefox：附加组件商店 → 搜索安装
   • Edge：同Chrome操作

2. 创建第一个脚本

   • 点击油猴图标 → 创建新脚本
   • 删除默认代码，粘贴以下内容：

     // ==UserScript==
     // @name         Hello World
     // @match        *://*/*
     // ==/UserScript==
     
     alert('我的第一个油猴脚本！');
     

   • 按Ctrl+S保存 → 访问任意网站查看弹窗效果

3. 验证成功标准：访问百度时出现弹窗提示

─── 第2天：理解脚本结构 & 修改网页内容 ───

1. 修改网页文字（实战案例）

   // 在原有基础上添加：
   document.body.innerHTML = document.body.innerHTML.replace(/百度/g, '油猴');
   

   • 保存后访问百度，观察所有"百度"字样被替换

2. 修改标题（理解DOM操作）

   document.title = "已被油猴修改";
   

3. 验证：访问任意网页，查看标题变化

─── 第3天：元素选择器 & 操作页面元素 ───

1. 隐藏广告（实战案例）

   // 隐藏百度LOGO
   document.getElementById('logo').style.display = 'none';
   

2. 修改按钮文字

   document.querySelector('input[value="百度一下"]').value = '油猴一下';
   

3. 验证：访问百度，查看LOGO是否消失，搜索按钮文字是否变化

─── 第4天：自动操作 & 定时任务 ───

1. 自动点击按钮（以B站为例）

   // @match        *://www.bilibili.com/*
   setInterval(() => {
     let btn = document.querySelector('.like-button');
     if(btn) btn.click();
   }, 3000);
   

   （注：实际需根据元素调整选择器）

2. 自动填充表单

   document.getElementById('username').value = '自动填充';
   

─── 第5天：AJAX请求 & 数据获取 ───

1. 获取天气数据（案例）

   GM_xmlhttpRequest({
     method: "GET",
     url: "http://wttr.in/Beijing?format=3",
     onload: function(res) {
       alert('北京天气：' + res.responseText);
     }
   });
   

2. 注意：需在脚本头部添加权限声明：

   // @grant        GM_xmlhttpRequest
   

─── 第6天：综合案例1-网页自动化助手 ───
实现功能：

1. 自动展开所有「查看更多」按钮
2. 高亮重点内容
3. 移除广告元素

// 展开按钮
document.querySelectorAll('.show-more').forEach(btn => btn.click());

// 黄色高亮
document.querySelectorAll('.important').forEach(el => {
  el.style.backgroundColor = 'yellow';
});

// 移除广告
document.querySelectorAll('.ad').forEach(ad => ad.remove());

─── 第7天：终极案例-淘宝比价助手 ───
功能实现：

1. 获取所有价格
2. 显示历史低价
3. 添加比价提醒

// 获取价格
let prices = Array.from(document.querySelectorAll('.price'))
                .map(el => parseFloat(el.innerText.replace('¥','')));

// 计算最低价
let minPrice = Math.min(...prices);

// 显示提示
document.querySelectorAll('.price').forEach(el => {
  if(parseFloat(el.innerText.replace('¥','')) === minPrice) {
    el.innerHTML += ' (历史最低价!)';
  }
});

─── 学习验证 checklist ───
✅ 每天完成代码运行并看到效果
✅ 修改3个不同网站的页面元素
✅ 实现至少1个自动操作脚本
✅ 成功调用外部API获取数据
✅ 完成最终综合案例

遇到问题时：

1. 按F12打开开发者工具
2. 查看Console面板报错信息
3. 检查脚本@match域名是否匹配
4. 确认元素选择器是否正确

进阶建议：

1. 学习CSS选择器语法
2. 掌握JavaScript基础语法
3. 研究常用网站的DOM结构
4. 参考开源油猴脚本（Greasy Fork）

按照这个流程走，即使完全零基础，7天后也能写出实用的网页自动化脚本！每个步骤都配有可视化验证方法，确保学习效果可见。