油猴脚本：浏览器里的瑞士军刀（手把手教你玩转网页定制）

文章目录

前言：这个神奇的小工具能做什么？

你是不是经常遇到这些场景？（疯狂点头.jpg）

想屏蔽视频网站60秒的广告
网页字体太小看着费劲
某些网站总弹出烦人的登录提示
需要自动填充重复的表单内容

（拍桌）油猴脚本(Tampermonkey)就是来解决这些问题的！！！它能让你像给网页做"微整形"一样，想改哪里改哪里。今天就带你从安装到实战，玩转这个浏览器黑科技~

一、5分钟快速上手指南

1. 安装扩展（所有浏览器通用）

访问扩展商店搜索"Tampermonkey"（认准这只戴帽子的猴子🐒）

Chrome用户：Chrome应用商店直达链接
Firefox用户：Firefox插件中心直达

安装完成后，浏览器右上角会出现猴子图标（这就是你的控制中心啦~）

2. 第一个脚本：网页去广告

点击猴子图标 → 创建新脚本 → 清空默认代码 → 粘贴以下代码：

// ==UserScript==
// @name         去广告小能手
// @match        *://*/*
// ==/UserScript==

(function() {
    'use strict';
    // 干掉所有广告元素
    const adSelectors = [
        '.ad-container',
        'iframe[src*="ads"]',
        'div[class*="banner"]'
    ];
    
    adSelectors.forEach(selector => {
        document.querySelectorAll(selector).forEach(el => el.remove());
    });
    
    // 禁止视频前贴片广告
    const video = document.querySelector('video');
    if(video) {
        video.currentTime = 60; // 直接跳到60秒后
    }
})();

按Ctrl+S保存 → 刷新任意网页见证奇迹！（注意：实际效果因网站结构而异）

二、脚本语法核心三要素（附实战案例）

1. 元数据配置（脚本身份证）

// ==UserScript==
// @name        我的定制脚本
// @namespace   http://tampermonkey.net/
// @version     1.0
// @description 这个脚本能帮你...
// @author      你的名字
// @match       *://*.taobao.com/*
// @grant       GM_xmlhttpRequest
// ==/UserScript==

（重要参数说明）

@match：指定脚本生效的网址模式
@grant：声明需要的特殊权限
@require：加载外部JS库

2. DOM操作三板斧

// 修改页面样式
document.body.style.backgroundColor = "#f0f0f0";

// 创建新元素
const tip = document.createElement('div');
tip.innerHTML = '<b>温馨提示：</b>本页面已被脚本优化';
document.body.prepend(tip);

// 监听按钮点击
document.querySelector('#submit-btn').addEventListener('click', () => {
    alert('别急着提交，先检查表单！');
});

3. 高级功能解锁

// 跨域请求示例（需要@grant GM_xmlhttpRequest）
GM_xmlhttpRequest({
    method: "GET",
    url: "https://api.example.com/data",
    onload: function(response) {
        console.log('获取到数据：', response.responseText);
    }
});

// 本地存储配置
GM_setValue('lastLogin', new Date().toISOString());
const lastTime = GM_getValue('lastLogin', '从未登录过');

三、超实用脚本案例库（直接复制使用）

案例1：自动翻页监控

// ==UserScript==
// @name        自动无限滚动
// @match       https://www.zhihu.com/*
// ==/UserScript==

let loading = false;
window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;
    const windowHeight = window.innerHeight;
    const docHeight = document.documentElement.scrollHeight;
    
    if (scrollY + windowHeight > docHeight - 500 && !loading) {
        loading = true;
        document.querySelector('.Pagination button').click();
        setTimeout(() => loading = false, 1000);
    }
});

案例2：网页护眼模式

// ==UserScript==
// @name        护眼小助手
// @match       *://*/*
// @run-at      document-start
// ==/UserScript==

const style = document.createElement('style');
style.textContent = `
    body {
        background: #C7EDCC !important;
        color: #333 !important;
    }
    img {
        opacity: 0.9 !important;
    }
`;
document.head.appendChild(style);

四、调试技巧大全（避坑指南）

常见报错解决：

GM_* functions undefined → 检查@grant声明
元素选择器失效 → 使用MutationObserver监听DOM变化
跨域请求被拦截 → 确保已声明@connect域名

调试神器：

// 开启调试模式
// @grant        GM_log
GM_log('当前页面URL:', window.location.href);

// 控制台日志增强
console.log('%c油猴脚本日志', 'color: green; font-weight: bold;', {
    timestamp: new Date(),
    pageInfo: document.title
});

五、脚本安全须知（必看！！！）

安装脚本时检查代码（警惕要求过多权限的脚本）
定期更新已安装脚本（作者可能修复安全问题）
敏感操作添加二次确认（比如自动提交表单）
重要网站不要使用未知来源脚本（比如银行/支付类网站）

结语：你的浏览器你做主！

通过油猴脚本，我们不仅能把浏览器变成"私人定制版"，还能大幅提升上网效率。从简单的样式修改到复杂的自动化操作，只有想不到没有做不到~（偷偷告诉你，我连公司OA系统都做了脚本优化，每天节省1小时！）

下次想折腾哪个网站？在评论区告诉我，说不定下期就出定制教程！🎉（温馨提示：合法使用才能长久哦~）