油猴脚本实用指南：教你玩转浏览器自动化

目录

一、油猴插件简介

1.1 什么是油猴插件

二、油猴插件的安装

2.1 安装方式（Chrome）

2.2 简单配置说明

三、脚本的获取与安装

3.1 安装第三方脚本

四、脚本编写入门

4.1 基本结构讲解（`@name`、`@match`、`@grant`等）

✅ 脚本结构示例：

📘 关键字段说明：

4.2 `document.querySelector`与网页操作

✅ 示例 1：选中并点击按钮

✅ 示例 2：隐藏一个广告区域

常用 DOM 选择器技巧：

4.3 示例：自动隐藏百度搜索时右边的热搜榜

一、油猴插件简介

1.1 什么是油猴插件

油猴插件（Tampermonkey）是一款运行在浏览器中的用户脚本管理器插件，它的作用是让用户可以通过自定义 JavaScript 脚本，来修改网页的行为或外观，从而增强浏览体验、自动化操作、移除广告、甚至添加新功能。

二、油猴插件的安装

2.1 安装方式（Chrome）

前往Home | Tampermonkey

点击安装

或通过网盘分享的文件：tampermonkey_stable.crx 链接: https://pan.baidu.com/s/1kvdlOVGM0upqxd-_lhQgqQ 提取码: qxhu

2.2 简单配置说明

点击谷歌浏览器右上角拓展程序 => 管理拓展程序

把下载的油猴拖到空白处加载，并且打开开发者模式

三、脚本的获取与安装

3.1 安装第三方脚本

点击获取新脚本，通过搜索脚本，获取代码（目前没有魔法无法进入）

搜索之后点击源代码，进入复制代码

点击添加新脚本

粘贴刚刚复制的脚本，保存

到这里就可以使用别人写好的脚本了

四、脚本编写入门

也可以在添加新脚本时，自己写一个脚本

4.1 基本结构讲解（`@name`、`@match`、`@grant`等）

油猴脚本本质上是 JavaScript 脚本，但在最上方会有一段特殊的“元信息区”（Meta 信息），用于告诉油猴插件如何运行这个脚本。

✅ 脚本结构示例：

// ==UserScript== // @name 自动点击按钮示例 // @namespace http://tampermonkey.net/ // @version 1.0 // @description 在指定网页自动点击一个按钮 // @author 你的名字 // @match https://example.com/* // @grant none // ==/UserScript== (function() { 'use strict'; // 你的脚本代码写在这里 })();

📘 关键字段说明：

字段含义说明@name脚本名称，出现在油猴管理面板中@namespace用于区分作者/组织的唯一标识（可随意填写）@version当前脚本版本@description简短描述脚本用途@match匹配的网址（决定在哪些页面运行）支持通配符@grant申请的权限（如访问剪贴板、发起请求等），none表示不使用特殊 API

💡 常见替代：也可以使用 @include 或 @exclude 控制匹配范围，但推荐使用 @match。

4.2 `document.querySelector`与网页操作

一旦页面加载完毕，脚本便可以使用原生 JavaScript 操作网页内容，最常见的是使用 document.querySelector() 方法选中 DOM 元素。

✅ 示例 1：选中并点击按钮

let btn = document.querySelector('.btn-primary'); if (btn) { btn.click(); // 模拟点击 }

✅ 示例 2：隐藏一个广告区域

let ad = document.querySelector('#banner-ad'); if (ad) { ad.style.display = 'none'; }

常用 DOM 选择器技巧：

选择方式示例通过类名.className通过ID#elementId标签选择div, button, img 等嵌套选择.container .item img

🧠 提示：如果页面是“动态加载”的（如 SPA），可以使用 setTimeout() 或 MutationObserver 等方式等待元素加载。

4.3 示例：自动隐藏百度搜索时右边的热搜榜

// ==UserScript==

// @name 隐藏百度右侧广告并添加开关按钮

// @namespace http://tampermonkey.net/

// @version 1.0

// @description 默认隐藏百度搜索结果页右侧广告内容，添加按钮控制显示/隐藏

// @author 你的名字

// @match https://www.baidu.com/s*

// @grant none

// ==/UserScript==

(function() {

'use strict';

// 等待页面加载完成

window.addEventListener('load', function () {

const target = document.getElementById('content_right');

if (!target) return;

// 默认隐藏

target.style.display = 'none';

// 创建按钮

const btn = document.createElement('button');

btn.textContent = '显示右侧内容';

btn.style.position = 'fixed';

btn.style.top = '80px';

btn.style.left = '10px';

btn.style.zIndex = '9999';

btn.style.padding = '6px 12px';

btn.style.fontSize = '14px';

btn.style.backgroundColor = '#3385ff';

btn.style.color = '#fff';

btn.style.border = 'none';

btn.style.borderRadius = '4px';

btn.style.cursor = 'pointer';

btn.style.boxShadow = '0 2px 5px rgba(0,0,0,0.2)';

// 切换显示/隐藏

btn.onclick = function () {

if (target.style.display === 'none') {

target.style.display = '';

btn.textContent = '隐藏右侧内容';

} else {

target.style.display = 'none';

btn.textContent = '显示右侧内容';

}

};

document.body.appendChild(btn);

});

})();