油猴脚本开发指北

前言

油猴（Tampermonkey）是一款强大的浏览器扩展，它允许用户通过编写 JavaScript 脚本来定制网页的行为。无论是修改页面样式、增强网站功能，还是自动化重复性操作，油猴脚本都能轻松胜任。本文将带你入门油猴脚本开发，让你掌握基础知识，开启你的脚本定制之旅。

准备工作

安装油猴

首先，你需要安装油猴扩展。它支持多种浏览器，包括 Chrome、Firefox、Safari 等。你可以从浏览器的扩展商店搜索 "Tampermonkey" 并安装。

了解 JavaScript

油猴脚本的核心是 JavaScript。如果你不熟悉 JavaScript，建议先学习一些基础知识，例如变量、数据类型、函数、DOM 操作等。网上有很多免费的 JavaScript 教程，例如 菜鸟教程。

油猴脚本基础

脚本结构

一个基本的油猴脚本通常包含以下几个部分：

1. 头部元数据（Metadata）：以 // ==UserScript== 开始，以 // ==/UserScript== 结束，用于描述脚本的信息，例如名称、描述、匹配的网址等。
2. 脚本代码：JavaScript 代码，用于实现脚本的功能。

一个简单的油猴脚本示例：

// ==UserScript==
// @name Hello World
// @namespace http://yourwebsite.com
// @version 0.1
// @description 一个简单的油猴脚本示例
// @author Your Name
// @match http://example.com/
// @grant none
// ==/UserScript==
(function() {
'use strict';
console.log("Hello, World! This is a Tampermonkey script.");
alert("Hello, World! This is a Tampermonkey script.");
})();

头部元数据详解

以下是一些常用的头部元数据：

• @name：脚本的名称。
• @namespace：脚本的命名空间，通常是你的网站或个人域名。
• @version：脚本的版本号。
• @description：脚本的描述。
• @author：脚本的作者。
• @match：指定脚本生效的网址，可以使用通配符 *。
• @include：与 @match 类似，但使用正则表达式匹配网址。
• @exclude：指定脚本不生效的网址。
• @require：引入外部 JavaScript 文件。
• @resource：引入外部资源文件，例如 CSS、图片等。
• @grant：指定脚本使用的 GM API 权限。
• @run-at：指定脚本的执行时机，例如 document-start、document-end、document-idle。

GM API

油猴提供了一些特殊的 API，称为 GM API，用于增强脚本的功能。常用的 GM API 包括：

• GM_getValue(name, defaultValue)：获取存储的值。
• GM_setValue(name, value)：存储值。
• GM_deleteValue(name)：删除存储的值。
• GM_xmlhttpRequest(details)：发送 HTTP 请求。
• GM_addStyle(css)：添加 CSS 样式。
• GM_getResourceText(name)：获取资源文件的文本内容。
• GM_getResourceURL(name)：获取资源文件的 URL。
• GM_openInTab(url, openInBackground)：在新标签页打开 URL。
• GM_setClipboard(data, type)：复制数据到剪贴板。
• GM_notification(details, ondone)：显示通知。

要使用 GM API，需要在头部元数据中添加 @grant 声明，例如 @grant GM_getValue。

DOM 操作

DOM（Document Object Model）是 HTML 文档的结构化表示。油猴脚本可以通过 JavaScript 操作 DOM，修改网页的内容和样式。

获取元素

常用的获取元素的方法包括：

• document.getElementById(id)：通过 ID 获取元素。
• document.getElementsByClassName(className)：通过类名获取元素集合。
• document.getElementsByTagName(tagName)：通过标签名获取元素集合。
• document.querySelector(selector)：通过 CSS 选择器获取第一个匹配的元素。
• document.querySelectorAll(selector)：通过 CSS 选择器获取所有匹配的元素集合。

修改元素

获取元素后，可以修改元素的属性、内容和样式：

• element.innerHTML：修改元素的 HTML 内容。
• element.textContent：修改元素的文本内容。
• element.setAttribute(name, value)：设置元素的属性。
• element.getAttribute(name)：获取元素的属性。
• element.style.property = value：设置元素的样式。
• element.classList.add(className)：添加元素的类名。
• element.classList.remove(className)：移除元素的类名。

添加和删除元素

• document.createElement(tagName)：创建新的元素。
• element.appendChild(childElement)：将子元素添加到父元素。
• element.insertBefore(newElement, referenceElement)：在参考元素之前插入新元素。
• element.removeChild(childElement)：移除子元素。
• element.remove()：移除元素自身。

事件监听

可以通过事件监听器来响应用户的操作：

• element.addEventListener(event, function)：添加事件监听器。
• element.removeEventListener(event, function)：移除事件监听器。

常用的事件包括：click、mouseover、mouseout、keydown、keyup、submit 等。

实例演示

示例 1：修改页面标题

// ==UserScript==
// @name Change Title
// @namespace http://yourwebsite.com
// @version 0.1
// @description 修改页面标题
// @author Your Name
// @match http://example.com/
// @grant none
// ==/UserScript==
(function() {
'use strict';
document.title = "New Title";
})();

示例 2：添加自定义按钮

// @name Add Button
// @namespace http://yourwebsite.com
// @version 0.1
// @description 添加自定义按钮
// @author Your Name
// @match http://example.com/
// @grant none
// ==/UserScript==
(function() {
'use strict';
var button = document.createElement("button");
button.innerHTML = "Click Me";
button.style.position = "fixed";
button.style.top = "20px";
button.style.left = "20px";
button.style.zIndex = "9999";
button.addEventListener("click", function() {
alert("Button Clicked!");
});
document.body.appendChild(button);
})();

示例 3：使用 GM API 存储数据

// ==UserScript==
// @name Store Data
// @namespace http://yourwebsite.com
// @version 0.1
// @description 使用 GM API 存储数据
// @author Your Name
// @match http://example.com/
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
(function() {
'use strict';
var count = GM_getValue("clickCount", 0);
count++;
GM_setValue("clickCount", count);
alert("Clicked " + count + " times.");
})();

进阶技巧

异步操作

在油猴脚本中，经常需要进行异步操作，例如发送 HTTP 请求。可以使用 async/await 或 Promise 来处理异步操作。

// 使用 async/await
async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
}
fetchData();
// 使用 Promise
fetch("https://api.example.com/data")
.then(response => response.json())
.then(data => console.log(data));

模块化

当脚本变得复杂时，可以使用模块化来组织代码。可以将代码拆分成多个文件，然后使用 @require 引入。

调试

可以使用浏览器的开发者工具来调试油猴脚本。在开发者工具的 "Sources" 面板中，可以找到油猴脚本的代码，并设置断点进行调试。

总结

本文介绍了油猴脚本开发的基础知识，包括脚本结构、头部元数据、GM API、DOM 操作等。通过学习这些知识，你可以开始编写自己的油猴脚本，定制你的网页浏览体验。希望本文能帮助你入门油猴脚本开发，开启你的脚本定制之旅。