目录导航

油猴脚本深度讲解：定制你的浏览体验

释放浏览器潜能，让网页听你指挥

引言：什么是油猴脚本？

在日常的网页浏览中，我们常常会遇到一些不尽如人意的地方：广告过多、功能缺失、界面不美观等等。如果能像魔法一样，随意修改网页的呈现和行为，那该多好？“油猴脚本”（Tampermonkey 或 Greasemonkey）正是这样一款强大的浏览器扩展，它允许用户通过安装和运行JavaScript脚本，深度定制和增强网页功能，从而极大地提升你的上网体验。

简单来说，油猴脚本就是一段在特定网页加载时自动运行的JavaScript代码。这段代码可以修改页面内容、添加新功能、自动化重复任务，甚至绕过某些限制。它为普通用户打开了浏览器定制的“潘多拉魔盒”，无需成为专业的开发者，也能享受到个性化的浏览乐趣。

本教程将带你深入了解油猴脚本的世界，从安装到编写，助你成为一名合格的“脚本大师”。

第一步：安装油猴扩展

油猴脚本本身是一个浏览器扩展，你需要先在你的浏览器中安装它。目前，Tampermonkey 是最流行且功能最全面的油猴扩展，支持主流浏览器。

支持的浏览器

  • Google Chrome
  • Mozilla Firefox (Greasemonkey 也是一个不错的选择)
  • Microsoft Edge
  • Opera
  • Safari
  • Brave 等基于 Chromium 的浏览器

安装步骤 (以Chrome为例)

  1. 打开你的Chrome浏览器。
  2. 访问Chrome网上应用店，或直接搜索“Tampermonkey”。
  3. 找到Tampermonkey扩展，点击“添加至Chrome”。
  4. 在弹出的确认窗口中点击“添加扩展程序”。
  5. 安装完成后，浏览器右上角会出现一个油猴图标（通常是一个黑色的圆形，中间有一个两个眼睛的猴子）。
Tampermonkey Installation Screenshot

点击油猴图标，你可以看到一个下拉菜单，其中包含“获取新脚本”、“管理面板”等选项。恭喜你，已经成功迈出了油猴脚本的第一步！

第二步：查找和安装现有脚本

油猴脚本的魅力在于其庞大的社区。有成千上万的开发者贡献了各种各样的脚本，解决各种需求。

主要的脚本来源

  • Greasy Fork : 最流行、脚本数量最多的平台，提供多种语言和分类。
  • OpenUserJS : 另一个高质量的脚本社区，对开发者友好。
  • GitHub: 许多开发者也会直接在GitHub上分享他们的脚本。

安装脚本的流程

  1. 访问 Greasy Fork 或 OpenUserJS。
  2. 使用搜索功能找到你感兴趣的脚本，例如“百度网盘直链下载”、“去除知乎广告”等。
  3. 点击进入脚本详情页，仔细阅读脚本描述、评价和代码（如果可以）。
  4. 点击“安装”或“Install”按钮。Tampermonkey 会自动弹出安装界面。
  5. 在Tampermonkey的安装界面中，点击“安装”确认。
  6. 安装成功后，你可以在Tampermonkey的“管理面板”中看到新安装的脚本。

重要提示： 脚本具有与你浏览网页相同的权限，包括读取和修改页面内容、发送网络请求等。因此，务必只安装你信任的脚本，并警惕恶意脚本。

第三步：管理你的脚本

Tampermonkey 提供了一个直观的管理面板，让你轻松控制所有已安装的脚本。

管理面板概览

  • 启用/禁用： 每个脚本旁边都有一个开关，可以随时启用或禁用脚本。
  • 编辑： 点击脚本名称可以进入编辑模式，查看和修改脚本代码。
  • 更新： Tampermonkey 会定期检查脚本更新。你也可以手动点击更新按钮。
  • 删除：： 不再需要的脚本可以轻松删除。
  • 设置： 配置Tampermonkey的全局行为，如更新频率、下载目录等。

在浏览特定网页时，Tampermonkey 浏览器图标上的数字会显示当前页面有多少个脚本正在运行。点击图标，你可以快速查看、启用或禁用当前页面的脚本。

第四步：编写你的第一个油猴脚本

掌握了安装和管理，是时候进入更高级的阶段——编写自己的脚本了！

脚本基本结构

一个油猴脚本通常以一个特殊的注释块开始，称为“元数据块”（Metadata Block），它告诉Tampermonkey脚本的名称、作者、匹配的网站等信息。 

// ==UserScript==
// @name         我的第一个油猴脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  尝试编写一个简单的油猴脚本
// @author       你的名字
// @match        https://www.google.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 你的JavaScript代码将在这里运行
    console.log("Hello from my first Tampermonkey script!");

})();

让我们逐一解析元数据块中的关键指令：

  • @name: 脚本的名称，显示在管理面板中。
  • @namespace: 脚本的命名空间，通常是作者的网站或GitHub地址，用于区分不同作者的脚本。
  • @version: 脚本的版本号，用于更新。
  • @description: 脚本的简短描述。
  • @author: 脚本作者。
  • @match / @include / @exclude:
    • @match: 指定脚本将在哪些URL模式下运行。支持通配符 *。例如 https://www.google.com/* 表示在所有Google域名的页面上运行。
    • @include: 类似于 @match，但功能稍弱，推荐使用 @match。
    • @exclude: 排除某些URL模式，即使它们符合 @match 或 @include。
  • @grant: 这是一个非常重要的指令，它声明了脚本所需的特殊权限。如果脚本需要使用Tampermonkey提供的API（如GM_setValue、GM_xmlHttpRequest），就必须在这里声明。如果不需要任何特殊API，可以写 none。

实战：修改Google搜索结果

让我们创建一个脚本，它会在Google搜索结果页面的标题后添加一个自定义文本。

  1. 打开Tampermonkey管理面板，点击“创建新脚本”按钮（通常是一个加号图标）。
  2. 将以下代码粘贴到编辑器中，替换掉默认模板：
// ==UserScript==
// @name         Google搜索结果增强
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  在Google搜索结果标题后添加自定义文本
// @author       你的名字
// @match        https://www.google.com/search?*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 确保页面加载完成后再执行
    window.addEventListener('load', function() {
        const searchResults = document.querySelectorAll('h3.LC20lb'); // Google搜索结果标题的CSS选择器

        searchResults.forEach(function(titleElement) {
            if (titleElement) {
                const originalText = titleElement.innerText;
                titleElement.innerText = originalText + ' [由油猴增强!]';
                titleElement.style.color = '#B45309'; // 修改颜色，更醒目
            }
        });
        console.log("Google搜索结果已增强！");
    });
})();
  1. 点击编辑器左上角的“文件”菜单，选择“保存”。
  2. 访问Google并进行搜索。你会发现每个搜索结果的标题后都多了一段文字，并且颜色发生了变化！

这个例子展示了油猴脚本如何通过简单的DOM操作来修改网页内容。你可以利用JavaScript的强大功能，对页面进行几乎任何你想要的修改。

第五步：常用 Tampermonkey API (@grant)

除了标准的JavaScript API，Tampermonkey还提供了一些特殊的全局函数（以 GM_ 开头），它们被称为“Greasemonkey API”，可以实现一些浏览器原生JavaScript无法完成的功能，例如跨域请求、持久化存储等。使用这些API时，必须在 @grant 指令中声明。

数据存储：GM_setValue 和 GM_getValue

允许脚本在浏览器中存储和读取持久化数据，即使页面刷新或浏览器关闭也不会丢失。 

// ==UserScript==
// @name         存储示例
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  演示GM_setValue和GM_getValue
// @author       你的名字
// @match        https://*.example.com/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function() {
    'use strict';

    const visitCountKey = 'pageVisitCount';
    let count = GM_getValue(visitCountKey, 0); // 获取值，如果没有则默认为0
    count++;
    GM_setValue(visitCountKey, count); // 存储新值

    console.log(`你已经访问此页面 ${count} 次。`);

    // 可以在页面上显示出来
    const counterElement = document.createElement('div');
    counterElement.style.cssText = 'position: fixed; top: 10px; right: 10px; background: #fff; padding: 5px 10px; border: 1px solid #ccc; z-index: 9999;';
    counterElement.innerText = `访问次数: ${count}`;
    document.body.appendChild(counterElement);
})();

网络请求：GM_xmlHttpRequest

允许脚本发起跨域HTTP/HTTPS请求，这在浏览器原生JavaScript中通常受到同源策略的限制。非常适合从其他网站获取数据。 

// ==UserScript==
// @name         跨域请求示例
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  演示GM_xmlHttpRequest获取外部数据
// @author       你的名字
// @match        https://*.example.com/*
// @grant        GM_xmlHttpRequest
// ==/UserScript==

(function() {
    'use strict';

    GM_xmlHttpRequest({
        method: "GET",
        url: "https://api.ipify.org?format=json", // 一个公共的IP查询API
        onload: function(response) {
            if (response.status === 200) {
                const data = JSON.parse(response.responseText);
                console.log("你的IP地址是: ", data.ip);

                const ipDisplay = document.createElement('div');
                ipDisplay.style.cssText = 'position: fixed; top: 40px; right: 10px; background: #fff; padding: 5px 10px; border: 1px solid #ccc; z-index: 9999;';
                ipDisplay.innerText = `你的IP: ${data.ip}`;
                document.body.appendChild(ipDisplay);
            } else {
                console.error("请求失败: ", response.status);
            }
        },
        onerror: function(response) {
            console.error("请求错误: ", response.error);
        }
    });
})();

样式注入：GM_addStyle

方便地向页面注入CSS样式，而无需创建 <style> 标签。 

// ==UserScript==
// @name         样式注入示例
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  演示GM_addStyle注入CSS
// @author       你的名字
// @match        https://*.example.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        body {
            background-color: #f0f8ff !important; /* 淡蓝色背景 */
        }
        h1 {
            color: #8B0000 !important; /* 深红色标题 */
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }
        .my-custom-class {
            border: 2px dashed #008000;
            padding: 10px;
        }
    `);

    // 假设页面上有一个h1
    const h1Element = document.querySelector('h1');
    if (h1Element) {
        h1Element.innerText += ' (样式已修改)';
    }

    // 动态添加一个元素并应用新样式
    const div = document.createElement('div');
    div.className = 'my-custom-class';
    div.innerText = '这是一个通过油猴脚本添加并应用了自定义样式的div。';
    document.body.prepend(div);
})();

还有其他许多 GM_ API，例如 GM_notification (发送桌面通知), GM_openInTab (在新标签页打开URL), GM_info (获取脚本信息) 等。查阅 Tampermonkey 官方文档是了解所有API的最佳方式。

安全注意事项

油猴脚本的强大功能伴随着一定的安全风险。以下是一些重要的安全提示：

  • 只安装来自可信来源的脚本： 优先选择 Greasy Fork、OpenUserJS 等知名平台，并查看脚本的评价、更新频率和源代码。
  • 审查脚本代码： 如果你具备JavaScript基础，尝试阅读脚本代码。警惕那些请求过多不必要权限、或者看起来可疑的代码。
  • 及时更新： 确保你的Tampermonkey扩展和脚本都保持最新版本，以修复潜在的安全漏洞。
  • 谨慎使用 GM_xmlHttpRequest： 恶意脚本可能利用它向第三方服务器发送你的敏感数据（如Cookies、浏览历史）。
  • 禁用不使用的脚本：： 减少运行的脚本数量，降低潜在风险。

总结与进阶

通过本教程，你已经掌握了油猴脚本的基础知识，包括安装、使用、管理以及编写你的第一个脚本。油猴脚本的世界远不止于此，你可以：

  • 学习更多JavaScript： 深入理解DOM操作、事件处理、异步编程等。
  • 探索更多 @grant API： 了解Tampermonkey提供的所有强大功能。
  • 阅读优秀脚本的源码： 从实际项目中学习最佳实践和巧妙的解决方案。
  • 参与社区： 在Greasy Fork或OpenUserJS上分享你的脚本，帮助他人。

油猴脚本是一个强大的工具，它赋予了用户前所未有的自由度，去塑造自己的网络世界。祝你在定制浏览体验的旅程中玩得开心！

Tampermonkey 官方文档 访问 Greasy Fork

互动区域

登录后可以点赞此内容

参与互动

登录后可以点赞和评论此内容，与作者互动交流

登录 注册