Tampermonkey 常见 API 详解

# 1. 理解Tampermonkey

Tampermonkey是一款浏览器插件，旨在通过用户编写脚本来改变网页的行为。它可以在用户访问网页时自动运行用户编写的JavaScript代码，从而实现定制化的功能。通过Tampermonkey，用户可以自定义网页的外观、增强网页的交互性，甚至实现自动化操作。这种灵活性和自定义性使Tampermonkey在网页开发和用户体验优化方面发挥重要作用。透过编写脚本，用户可以实现对网页内容的自定义修改，实现个性化需求。因此，理解Tampermonkey的概念及其作用是学习和使用该工具的第一步。

# 2. 安装Tampermonkey

Tampermonkey 是一款浏览器扩展程序，可以让用户在网页上运行自定义脚本来改变网页的行为。它支持多种浏览器，比如 Chrome、Firefox、Microsoft Edge 等。通过安装 Tampermonkey，用户可以自定义网页的外观和功能，实现个性化的浏览体验。

#### 安装Tampermonkey的步骤

安装 Tampermonkey 相对简单，用户只需要按照以下步骤进行操作：

1. 打开浏览器，在扩展商店中搜索 Tampermonkey。
2. 点击安装 Tampermonkey 扩展，确认添加到浏览器。
3. 安装完成后，在浏览器的扩展栏中找到 Tampermonkey 图标，表示安装成功。

#### Tampermonkey的浏览器兼容性

Tampermonkey 在多种主流浏览器上都有良好的兼容性，以下是 Tampermonkey 支持的一些常见浏览器：

| 浏览器 | 兼容性 |
|-------------|-----------------|
| Chrome | 支持 |
| Firefox | 支持 |
| Safari | 支持 |
| Microsoft Edge | 支持 |
| Opera | 支持 |

Tampermonkey 的跨浏览器兼容性使其成为许多用户喜爱的浏览器扩展之一。用户可以在不同的浏览器上都享受到 Tampermonkey 带来的便捷和乐趣。

# 3. Tampermonkey脚本

Tampermonkey脚本是一种用户自定义的脚本，通过在浏览器中安装Tampermonkey插件，可以运行这些脚本来修改网页的行为和外观，实现个性化定制。下面将详细介绍如何创建Tampermonkey脚本以及脚本编辑器的功能。

#### 创建Tampermonkey脚本

1. 打开浏览器，在Tampermonkey插件中找到“创建新脚本”选项。
2. 在弹出的编辑器中，编写你的脚本代码。例如，可以通过脚本来改变页面背景颜色：

   // ==UserScript==
   // @name         Change Background Color
   // @match        https://example.com/*
   // @grant        none
   // ==/UserScript==

   document.body.style.backgroundColor = 'lightblue';

3. 点击保存并刷新，即可看到脚本生效。

#### 脚本编辑器功能介绍

在Tampermonkey的脚本编辑器中，有许多功能可帮助我们编写和管理脚本。以下是编辑器中一些重要功能的介绍和示例。

##### 脚本的基本结构

脚本以 `// ==UserScript==` 开头，以 `// ==/UserScript==` 结尾。其中 `@name` 是脚本的名称，`@match` 是脚本作用的网址匹配规则，`@grant` 是脚本权限设置，这些都是脚本的元数据。

##### 脚本的元数据设置

在上面的示例中，`@name` 设置了脚本的名称为“Change Background Color”，`@match` 设置了只有在`example.com`网页下生效，`@grant` 设置为`none`表示脚本不需要特殊权限。

通过以上内容，我们实现了一个简单的Tampermonkey脚本，并介绍了脚本编辑器的基本功能和元数据设置。接下来，我们将进一步探讨Tampermonkey的API。

# 4. Tampermonkey API

Tampermonkey 提供了丰富的 API，让用户可以更灵活地开发脚本。下面我们将介绍几个常用的 Tampermonkey API，包括 `GM_info`、`GM_setValue` 和 `GM_getValue`。

#### GM_info

`GM_info` API 允许我们获取脚本的信息，例如脚本的名称、版本、描述等。通过这些信息，我们可以更好地管理和了解我们开发的脚本。

// 获取脚本的信息
const scriptInfo = GM_info.script;
const scriptName = scriptInfo.name;
const scriptVersion = scriptInfo.version;
const scriptDescription = scriptInfo.description;

console.log(`脚本名称：${scriptName}`);
console.log(`脚本版本：${scriptVersion}`);
console.log(`脚本描述：${scriptDescription}`);

通过上述代码，我们可以获取脚本的基本信息，并在控制台输出。这样可以帮助我们在开发过程中更好地管理脚本。

#### GM_setValue

`GM_setValue` API 可以用来在脚本中设置存储的值，这些值可以被脚本在不同时间点调用，方便我们在脚本执行过程中保存需要的数据。

// 设置存储值
GM_setValue('username', 'Alice');
GM_setValue('level', 5);

// 获取存储值
const savedUsername = GM_getValue('username');
const savedLevel = GM_getValue('level');

console.log(`用户名：${savedUsername}`);
console.log(`等级：${savedLevel}`);

在上面的代码中，我们使用 `GM_setValue` 方法设置了用户名和等级的存储值，然后通过 `GM_getValue` 方法获取这些存储值并输出。

#### GM_getValue

`GM_getValue` API 用于获取之前使用 `GM_setValue` 方法设置的存储值。这样我们可以在脚本中方便地获取之前保存的数据。

通过上述介绍的 Tampermonkey API，我们可以更灵活地开发脚本，实现更多功能性的操作。通过这些 API，我们可以更好地管理脚本信息、存储需要的数据，使得脚本具有更强的扩展性和实用性。

# 5. 高级Tampermonkey应用

在这一章节中，我们将介绍一些高级的Tampermonkey应用，包括结合jQuery库、使用Tampermonkey进行网络请求以及美化用户界面等内容。这些高级应用能够进一步拓展Tampermonkey的功能和实用性。

1. **Tampermonkey与jQuery的结合**

- **引入jQuery库：** 在Tampermonkey脚本中结合使用jQuery可以让我们更轻松地操作DOM和实现页面的交互效果。我们可以通过在脚本中引入外部的jQuery库来实现这一目的。
- **jQuery的应用示例：** 以下是一个简单的示例，演示了如何使用Tampermonkey和jQuery来修改页面元素的文本内容：

     // ==UserScript==
     // @name         Change Text with jQuery
     // @match        https://www.example.com/*
     // @grant        GM_addStyle
     // @grant        GM_xmlhttpRequest
     // ==/UserScript==
     // 使用jQuery修改页面元素文本
     $(document).ready(function() {
         $("h1").text("Hello, Tampermonkey!");
     });

2. **Tampermonkey的网络请求功能**

- **使用GM_xmlhttpRequest方法：** Tampermonkey提供了GM_xmlhttpRequest方法用于发起网络请求，这让我们能够在脚本中与服务器进行通信。下面是一个简单的示例：

     // 发送GET请求
     GM_xmlhttpRequest({
         method: "GET",
         url: "https://api.example.com/data",
         onload: function(response) {
             console.log(response.responseText);
         }
     });

这段代码会向"https://api.example.com/data"发起一个GET请求，并在请求成功后将返回的数据打印到控制台上。
- **发送请求示例及处理返回数据：** 在实际应用中，我们可以根据服务器返回的数据来更新页面内容或执行其他操作，以实现更加丰富的功能。
3. **Tampermonkey的用户界面美化**

- **CSS样式的应用：** 通过在Tampermonkey脚本中应用CSS样式，我们可以改变网页的外观和交互效果，使页面更加美观和易用。
- **更改网页外观和交互效果：** 例如，我们可以通过修改页面样式来实现暗黑模式、隐藏广告弹窗等功能，从而改善用户在网页上的浏览体验。

通过这些高级Tampermonkey应用，我们可以进一步扩展Tampermonkey的功能，实现更多有趣和实用的特性，使浏览器使用更加便捷和个性化。