油猴插件开发学习：从零编写你的第一个浏览器增强脚本

无需浏览器扩展开发经验，仅需基础JavaScript能力即可定制化增强任何网站功能

一、油猴插件是什么？为什么它值得学习？

油猴（Tampermonkey）是用户脚本管理器，允许你为任何网站注入自定义JavaScript代码。根据调研数据，全球超过200万开发者使用油猴脚本：

核心原理：在网页加载时注入自定义JS逻辑（非浏览器插件）
对比传统插件：无需审核、无需打包、即时生效、单文件维护
开发成本：掌握基础JS即可开发（相比Chrome插件开发降低80%门槛）

实际应用场景：

graph LR A[广告屏蔽] --> B[网页样式美化] C[数据自动填充] --> D[功能增强] E[跨网站操作] --> F[自动化任务]

二、环境搭建：5分钟快速准备

1. 安装油猴扩展

浏览器	安装地址	版本推荐
Chrome	Chrome应用商店	Stable版
Edge	Edge扩展商店	最新版
Firefox	Firefox插件库	Beta版

离线安装方案 ：访问GreasyFork下载.crx文件，浏览器开启开发者模式拖入安装

2. 开发环境配置

编辑器：VSCode + Tampermonkey Snippets扩展（代码提示增强）
调试工具：浏览器开发者工具（Ctrl+Shift+I）

辅助资源 ：

bash 复制代码

# 油猴API文档
https://www.tampermonkey.net/documentation.php
# 脚本示例库
https://greasyfork.org/zh-CN/scripts

三、创建你的第一个脚本：屏蔽网页广告

1. 新建脚本模板

点击浏览器右上角油猴图标 → "创建新脚本" → 自动生成元数据模板

javascript 复制代码

// ==UserScript==
// @name         广告拦截助手
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  屏蔽百度搜索广告
// @author       YourName
// @match        https://www.baidu.com/*
// @grant        none
// ==/UserScript==

元数据参数解析：

@match：脚本生效的URL规则（支持通配符*）
@grant：声明需要的API权限（如GM_xmlhttpRequest）
@require：引入外部JS库（如jQuery）

2. 编写广告屏蔽逻辑

javascript 复制代码

(function() {
    'use strict';
    
    // 每2秒检测一次广告元素
    setInterval(() => {
        // 百度广告特征：class包含ec_tuiguang
        const ads = document.querySelectorAll('.ec_tuiguang, .c-ad-container');
        ads.forEach(ad => ad.style.display = 'none');
        
        // 移除广告占位空白
        const placeholders = document.querySelectorAll('.gap-right');
        placeholders.forEach(el => el.remove());
    }, 2000);
})();

3. 保存与调试

Ctrl+S保存脚本
刷新百度搜索页
按F12打开控制台查看日志
观察广告是否被移除

效果验证：广告区域变为空白，搜索结果为纯内容展示

四、核心API详解：油猴的10大武器库

1. DOM操作增强

javascript 复制代码

// 创建浮动按钮
const btn = document.createElement('button');
btn.innerHTML = '一键下载';
btn.style = 'position:fixed; right:20px; bottom:20px; z-index:9999';
document.body.appendChild(btn);

// 监听按钮点击
btn.addEventListener('click', () => {
    GM_notification({ title: '提示', text: '开始处理下载...' });
});

2. 跨域请求 (GM_xmlhttpRequest)

javascript 复制代码

// 获取跨域数据
GM_xmlhttpRequest({
    method: "GET",
    url: "https://api.example.com/data",
    onload: function(response) {
        const data = JSON.parse(response.responseText);
        console.log('跨域数据:', data);
    }
});

3. 数据存储 (GM_setValue/GM_getValue)

javascript 复制代码

// 保存用户配置
GM_setValue('theme', 'dark');

// 读取配置
const theme = GM_getValue('theme', 'light'); // 默认值light

// 应用配置
document.body.classList.toggle('dark-mode', theme === 'dark');

五、实战案例：论坛增强工具开发（带搜索免扣分）

基于搜索结果中论坛需求，实现免积分搜索功能：

javascript 复制代码

// ==UserScript==
// @name         论坛搜索增强
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  添加谷歌搜索按钮避免扣积分
// @match        https://bbs.example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    // 定位原搜索框
    const searchForm = document.getElementById('search_form');
    
    // 创建谷歌搜索按钮
    const googleBtn = document.createElement('button');
    googleBtn.textContent = '谷歌搜索';
    googleBtn.className = 'search-btn';
    googleBtn.style.marginRight = '10px';
    
    // 插入到原搜索按钮前
    searchForm.insertBefore(googleBtn, searchForm.querySelector('button'));
    
    // 处理搜索事件
    googleBtn.addEventListener('click', () => {
        const keywords = document.getElementById('search_input').value;
        if(keywords) {
            window.open(`https://www.google.com/search?q=site:bbs.example.com ${keywords}`);
        }
    });
})();

效果对比：

搜索方式	消耗积分	速度	结果质量
原论坛搜索	每次-1	较慢	⭐⭐
谷歌搜索	免费	毫秒级	⭐⭐⭐⭐

六、调试技巧：高效排错策略

日志输出 ：

javascript 复制代码

console.log('[Script] 脚本已加载', new Date());

断点调试 ：
- Sources → Tampermonkey脚本 → 设置断点

性能监控 ：

javascript 复制代码

// 记录执行耗时
const start = performance.now();
// ...执行代码
console.log(`耗时：${performance.now() - start}ms`);

错误捕获 ：

javascript 复制代码

try {
  riskyOperation();
} catch (e) {
  console.error('脚本错误:', e);
  GM_notification('脚本运行出错，请查看控制台');
}

七、发布与维护：共享你的作品

1. 发布到GreasyFork

注册 greasyfork.org 账号
点击"发布脚本"粘贴代码
设置描述/标签/兼容性
提交审核（通常1小时内通过）

2. 版本更新流程

javascript 复制代码

// @updateURL   https://yourdomain.com/myscript.meta.js
// @downloadURL https://yourdomain.com/myscript.user.js

用户自动接收更新推送

八、高级进阶：油猴 + AI 结合实战

结合ChatGPT实现智能文本处理：

javascript 复制代码

// 调用OpenAI API（需API key）
function aiRewrite(text) {
    return new Promise((resolve) => {
        GM_xmlhttpRequest({
            method: "POST",
            url: "https://api.openai.com/v1/chat/completions",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer YOUR_API_KEY"
            },
            data: JSON.stringify({
                model: "gpt-4",
                messages: [{role: "user", content: `润色这段话并保留原意：${text}`}]
            }),
            onload: (res) => {
                const data = JSON.parse(res.responseText);
                resolve(data.choices[0].message.content);
            }
        });
    });
}

// 使用示例
document.querySelector('#rewrite-btn').addEventListener('click', async () => {
    const text = document.getElementById('input').value;
    const result = await aiRewrite(text);
    document.getElementById('output').value = result;
});

九、常见问题解决

问题现象	原因	解决方案
脚本不生效	@match配置错误	检查URL匹配规则
GM函数报权限错误	未声明@grant	添加// @grant GM_xmlhttpRequest
页面样式冲突	CSS污染	使用Shadow DOM封装
跨域请求被拦截	CORS限制	使用GM_xmlhttpRequest代替fetch
动态内容无法操作	元素加载延迟	用MutationObserver监听DOM变化

十、学习资源推荐

官方文档 ：Tampermonkey文档
中文教程 ：油猴开发指南
脚本市场 ：GreasyFork中文站
案例库 ：GitHub - awesome-tampermonkey

实战建议：从修改常用网站的小功能起步，例如：

为知乎添加夜间模式

给B站视频下载按钮

自动跳过视频网站广告逐步积累经验后再开发复杂脚本

最后成果展示：

pie title 油猴脚本开发技能树 "基础DOM操作" : 35 "API使用":25 "跨域处理": 20 "UI构建":15 "性能优化" : 5

掌握油猴开发，你将拥有定制互联网的超能力------每个网站都是你的画布，JavaScript是你的画笔。立即动手编写你的第一个脚本，体验"浏览器黑客"的乐趣吧！