油猴脚本：让浏览器成为你的私人定制工具（手把手入门指南）

原创最新推荐文章于 2026-10-02 11:33:01 发布 2.2k 阅读 AI写同款

普通网友

205粉丝22篇原创

关注

油猴脚本（Tampermonkey Script）是一种用户脚本管理工具 油猴脚本作为一种用户脚本管理工具，具有广泛的应用场景和灵活性。通过油猴脚本，用户可以轻松地修改和增强网页的功能和界面。虽然油猴脚本和浏览器插件在某些方面有相似之处，但它们在开发复杂度、安装管理以及功能范围上有显著区别。通过多种途径，开发者可以利用油猴脚本实现盈利。阅读详情

AI摘要

本文是油猴脚本的入门指南。介绍了全平台安装油猴扩展的方法，首个修改网页标题的脚本示例。剖析了脚本核心结构，通过广告消失术、页面美颜等实战案例展示其应用。还分享调试方法、高级玩法，强调脚本安全伦理，并推荐了私藏脚本。

文章目录

一、浏览器还能这样玩？！

最近有个朋友问我："为什么你的网页总是没有广告？搜索结果还能自动高亮关键词？"我神秘一笑：“全靠这个神奇的小玩意——油猴脚本！”（Tampermonkey的江湖诨名）

二、五分钟快速上车指南

1. 安装油猴扩展（全平台通用）

Chrome用户打开应用商店搜索"Tampermonkey"（认准这只戴眼镜的猴子）
Firefox用户直接访问官网下载
Edge用户点击右上角…→扩展→获取扩展→搜索安装

（超级重要）安装完成后浏览器右上角会出现黑猴图标，右键它→管理面板→创建新脚本，恭喜你进入新世界的大门！

2. 第一个脚本：修改网页标题

// ==UserScript==
// @name        标题修改器
// @match       *://*/*
// ==/UserScript==

document.title = "这是我的专属页面！";

保存后随便打开个网页，看看标题是不是变成了霸气宣言？（Ctrl+S保存后记得刷新页面生效）

三、脚本核心结构解剖课

// ==UserScript==
// @name        脚本名称
// @namespace   你的域名（随便填）
// @version      0.1
// @description 脚本功能说明
// @author       你的大名
// @match        *://*.taobao.com/*
// @grant        GM_xmlhttpRequest
// ==/UserScript==

(function() {
    'use strict';
    // 你的魔法代码写在这里
})();

（敲黑板）@match参数控制脚本生效范围，支持通配符*，比如*://*.bilibili.com/*表示匹配所有B站页面

四、实战案例：打造个性化网页

案例1：广告消失术

// 每隔500ms检查一次广告元素
setInterval(() => {
    document.querySelectorAll('.ad-box').forEach(ad => {
        ad.style.display = 'none';
    });
}, 500);

（原理揭秘）利用CSS选择器精准打击广告元素，比广告拦截插件更灵活！

案例2：页面美颜大师

// 修改背景色和字体
document.body.style.backgroundColor = '#f0f0f0';
document.body.style.fontFamily = '微软雅黑';

// 给所有图片加圆角
document.querySelectorAll('img').forEach(img => {
    img.style.borderRadius = '8px';
});

五、调试宝典：开发者工具妙用

按F12打开开发者工具
切到Console面板查看脚本输出
使用debugger语句设置断点
在Sources面板调试脚本源码

（避坑指南）遇到脚本不生效时：

检查油猴图标是否显示脚本已启用
确认@match规则匹配当前网址
查看控制台报错信息

六、高级玩法解锁

1. 跨域请求神器

GM_xmlhttpRequest({
    method: "GET",
    url: "https://api.example.com/data",
    onload: function(response) {
        console.log("获取到数据：", response.responseText);
    }
});

（注意）需要在@grant声明GM_xmlhttpRequest权限

2. 网页元素监听黑科技

// 创建MutationObserver监听DOM变化
const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        if (mutation.addedNodes.length) {
            // 对新添加的元素进行处理
        }
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});