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

cloudpilot

于 2025-05-15 14:42:41 发布

阅读量1.2k

点赞数 11

CC 4.0 BY-SA版权

文章标签：其他

本文链接：https://blog.csdn.net/cloudpilot/article/details/147982972

文章目录

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

最近有个朋友问我："为什么你的网页总是没有广告？搜索结果还能自动高亮关键词？"我神秘一笑：“全靠这个神奇的小玩意——油猴脚本！”（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
});