油猴脚本开发全指南：从入门到功能扩展

一、油猴脚本开发基础

油猴脚本（Tampermonkey/Violentmonkey）是浏览器扩展中的用户脚本管理器，允许开发者通过JavaScript动态修改网页行为。其核心优势在于无需修改服务器代码即可实现个性化功能定制，适用于前端调试、广告拦截、数据采集等场景。

1.1 开发环境搭建

安装管理器：主流浏览器扩展商店搜索”用户脚本管理器”安装（如Tampermonkey）
创建新脚本：点击扩展图标→管理面板→添加新脚本
编辑器配置：建议启用语法高亮、自动补全等开发者工具

1.2 脚本元信息规范

每个脚本必须包含标准化的元信息块，用于声明脚本属性和权限：

// ==UserScript==
// @name         页面元素定制器
// @namespace    https://example.com/scripts
// @version      1.0.1
// @description  修改搜索按钮样式和交互逻辑
// @author       Developer
// @match        https://*.example.com/*
// @grant        GM_addStyle
// @require      https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
// ==/UserScript==

关键字段说明：

@match：精确控制脚本生效的URL模式，支持通配符
@grant：声明需要的特殊API权限（如GM_xmlhttpRequest）
@require：引入外部依赖库（需支持CORS）

二、核心开发技术解析

2.1 DOM操作实战

以修改搜索按钮为例，展示元素选择与样式调整：

(function() {
    'use strict';
    // 元素选择与修改
    const searchBtn = document.querySelector('.search-btn');
    if (searchBtn) {
        // 修改文本内容
        searchBtn.value = '立即搜索';
        // 动态样式注入
        GM_addStyle(`
            .search-btn {
                background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
                border-radius: 25px;
                transition: all 0.3s ease;
            }
            .search-btn:hover {
                transform: scale(1.05);
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            }
        `);
    }
})();

技术要点：

使用querySelector进行精准元素定位
通过GM_addStyle实现跨域样式注入（需声明@grant GM_addStyle）
CSS过渡效果增强用户体验

2.2 事件监听与交互增强

实现按钮点击后的二次确认：

searchBtn.addEventListener('click', function(e) {
    if (!confirm('确定要执行搜索吗？')) {
        e.preventDefault();
        e.stopPropagation();
        this.classList.add('shake-animation');
        setTimeout(() => this.classList.remove('shake-animation'), 500);
    }
});
// 添加动画样式
GM_addStyle(`
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        20%, 60% { transform: translateX(-5px); }
        40%, 80% { transform: translateX(5px); }
    }
    .shake-animation {
        animation: shake 0.5s;
    }
`);

2.3 数据持久化方案

利用GM_setValue/GM_getValue实现配置存储：

// 保存用户偏好
function savePreference(key, value) {
    GM_setValue(key, JSON.stringify(value));
}
// 读取配置
function getPreference(key, defaultValue) {
    const val = GM_getValue(key);
    return val ? JSON.parse(val) : defaultValue;
}
// 使用示例
const theme = getPreference('uiTheme', 'light');
document.body.className = theme;

三、高级功能开发

3.1 跨域请求处理

通过GM_xmlhttpRequest实现安全的数据获取：

function fetchData(url, callback) {
    GM_xmlhttpRequest({
        method: "GET",
        url: url,
        onload: function(response) {
            if (response.status === 200) {
                callback(null, JSON.parse(response.responseText));
            } else {
                callback(new Error(`Request failed: ${response.status}`));
            }
        },
        onerror: function(error) {
            callback(error);
        }
    });
}

3.2 模块化开发实践

采用IIFE模式组织代码：

const SearchEnhancer = (function() {
    const PRIVATE_VAR = 'private data';
    function init() {
        _setupUI();
        _bindEvents();
    }
    function _setupUI() {
        // 私有方法实现
    }
    return {
        init: init,
        updateConfig: function(config) {
            // 公共API
        }
    };
})();
// 初始化
SearchEnhancer.init();

3.3 调试与错误处理

日志系统：使用console.log配合@grant GM_log

错误捕获：

try {
 // 危险操作
} catch (e) {
 console.error('Script error:', e);
 GM_notification({
     title: '脚本错误',
     text: e.message,
     timeout: 5000
 });
}

四、最佳实践与安全规范

4.1 性能优化建议

使用MutationObserver监听DOM变化替代轮询

对高频事件进行节流处理：

function throttle(func, limit) {
 let lastFunc;
 let lastRan;
 return function() {
     const context = this;
     const args = arguments;
     if (!lastRan) {
         func.apply(context, args);
         lastRan = Date.now();
     } else {
         clearTimeout(lastFunc);
         lastFunc = setTimeout(function() {
             if ((Date.now() - lastRan) >= limit) {
                 func.apply(context, args);
                 lastRan = Date.now();
             }
         }, limit - (Date.now() - lastRan));
     }
 };
}

4.2 安全注意事项

避免直接执行用户输入的内容
对@match规则进行最小化授权
敏感操作前进行权限确认

4.3 版本管理策略

遵循语义化版本规范（Major.Minor.Patch）
维护CHANGELOG.md记录变更
使用@updateURL实现自动更新

五、完整案例演示

以下是一个完整的搜索页面增强脚本：

// ==UserScript==
// @name         智能搜索增强
// @namespace    https://example.com
// @version      1.2.0
// @description  提供搜索按钮美化、历史记录和快捷输入功能
// @match        https://*.example.com/search*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @grant        GM_registerMenuCommand
// @grant        GM_notification
// ==/UserScript==
(function() {
    'use strict';
    // 配置初始化
    const CONFIG = {
        theme: getPreference('theme', 'dark'),
        historyLimit: getPreference('historyLimit', 5)
    };
    // UI增强
    function enhanceUI() {
        GM_addStyle(`
            body { font-family: 'Segoe UI', sans-serif; }
            .search-container {
                max-width: 800px;
                margin: 2rem auto;
                padding: 2rem;
                border-radius: 10px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            }
            .search-btn {
                /* 样式定义 */
            }
        `);
        document.body.classList.add(CONFIG.theme);
    }
    // 历史记录管理
    class SearchHistory {
        constructor(limit = 5) {
            this.limit = limit;
            this.items = this._load();
        }
        _load() {
            const data = GM_getValue('searchHistory', '[]');
            return JSON.parse(data).slice(-this.limit);
        }
        add(query) {
            this.items.push(query);
            this.items = [...new Set(this.items)].slice(-this.limit);
            GM_setValue('searchHistory', JSON.stringify(this.items));
        }
        getSuggestions() {
            return this.items;
        }
    }
    // 初始化
    function init() {
        enhanceUI();
        const history = new SearchHistory(CONFIG.historyLimit);
        // 快捷菜单
        GM_registerMenuCommand('清除历史记录', () => {
            history = new SearchHistory();
            GM_notification({title: '操作成功', text: '历史记录已清除'});
        });
        // 表单处理
        const form = document.querySelector('#searchForm');
        if (form) {
            form.addEventListener('submit', (e) => {
                const input = form.querySelector('input[name="q"]');
                if (input.value.trim()) {
                    history.add(input.value.trim());
                }
            });
        }
    }
    // 启动
    init();
})();

通过系统学习本文内容，开发者可以掌握从基础DOM操作到高级模块化开发的全流程技术，构建出安全、高效、可维护的用户脚本解决方案。建议结合具体项目需求，逐步实践各技术模块，最终实现完整的网页交互增强功能。