资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

【Tampermonkey】油猴脚本入门

创作时间:

作者:

@小白创作中心

【Tampermonkey】油猴脚本入门

引用

CSDN

https://m.blog.csdn.net/qq_48180611/article/details/144443202

油猴脚本（Tampermonkey script）是一种可以在网页加载时自动运行的自定义JavaScript代码，允许用户修改网页内容或添加新功能，以增强浏览体验。本文将从基础概念、安装方法、脚本编写、发布和获取等方面，为初学者提供一个全面的入门指南。

1. 概括

油猴脚本（Tampermonkey script）是一种可以在网页加载时自动运行的自定义JavaScript代码，允许用户修改网页内容或添加新功能，以增强浏览体验。一句话概括：
油猴脚本是用户编写的小程序，能够在浏览器中自动修改网页行为和外观，从而实现个性化定制和增强功能。

2. 说明

以下教程适用于使用 Chromium内核的浏览器，包括Chrome、Edge等。
Chrome因为插件商店无法访问，还有版本问题无法安装旧插件，所以不建议初学者使用。
下面以Edge为例子，大部分步骤应该是相似的，但界面布局或菜单名称可能会略有不同。

3. 基础

3.1 JavaScript

核心语言：JavaScript 是编写油猴脚本的主要语言。你需要熟悉 JavaScript 的语法、变量、函数、条件语句、循环等基础知识。
DOM 操作：了解如何通过 JavaScript 操作网页的文档对象模型 (DOM)，包括选择元素、修改内容、添加或移除元素等。
事件处理：掌握如何监听和响应用户交互事件，如点击、输入、加载完成等。

3.2 HTML 和 CSS

HTML：理解 HTML 标签和结构，因为你的脚本可能会操作这些标签来修改网页内容。
CSS：虽然油猴脚本主要用 JavaScript 编写，但你可能需要使用 CSS 来美化自定义界面或调整页面样式。

4. 安装

4.1 官网下载

首页 | Tampermonkey

4.1.1 Chrome

Chrome插件商店需要魔法，在Chrome上安装，直接点击灰色按钮在当前页面下载即可，需要最新版本，否则会安装失败。

4.1.2 Edge

推荐使用与Chrome内核相同的Edge浏览器，能够直接访问插件商城，点击获取然后添加扩展既可。

4.2 安装验证

扩展 -> 在工具栏显示，以便后续操作。

5. 第一个脚本

5.1 添加新脚本

5.2 默认代码

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2024-12-13
// @description  try to take over the world!
// @author       You
// @match        https://tongyi.aliyun.com/
// @icon         https://www.google.com/s2/favicons?sz=64&domain=aliyun.com
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    // Your code here...
})();

5.2.1 元数据块（Metadata Block）

元数据块是每个油猴脚本的核心部分，它使用特殊的注释语法来定义脚本的各种属性和配置。

@name
**：脚本的名称。这里可以填写任何你想给脚本的名字。

// @name         新脚本

@namespace
**：命名空间用于避免脚本之间的冲突。通常可以使用你的网站或邮箱地址作为命名空间。

// @namespace    http://tampermonkey.net/

@version
**：脚本的版本号，便于管理和更新。

// @version      0.1

@description
**：对脚本功能的简要描述。

// @description  try to take over the world!

@author
**：脚本作者的名字。

// @author       You

@match
**：指定脚本应该在哪些网址上运行。通配符
:///*
表示匹配所有网址。你可以根据需要添加多个
@match
行来限定脚本运行的具体页面。

// @match        *://*/*

@icon
**：为脚本指定一个图标。这通常是通过提供图标的 URL 来实现的。

// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net

@grant
**：声明脚本所需的权限。
none
表示不需要特殊权限；如果你需要进行跨域请求或其他高级操作，则可能需要指定如
GM_xmlhttpRequest
、
GM_setValue
等权限。

// @grant        none

5.2.2 主函数 (IIFE)

紧接元数据块之后的是一个立即执行函数表达式 (Immediately Invoked Function Expression, IIFE)，它用来封装脚本的主体代码。这种模式有助于防止变量泄漏到全局作用域，并确保代码在合适的上下文中运行。

(function() {
    'use strict';
    // Your code here...
})();

'use strict';
**：启用严格模式，使 JavaScript 引擎以更严格的规则解析代码，有助于发现潜在的错误和提高代码质量。

// Your code here...
**：这是你放置实际 JavaScript 代码的地方。你可以在这里编写逻辑，操作 DOM，监听事件等。

5.3 修改默认代码

假设你想创建一个简单的脚本，在页面顶部显示一条问候信息，可以这样扩展默认代码：

// ==UserScript==
// @name         匹配所有网站
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在页面顶部显示一条友好的问候信息
// @author       新手开发者
// @match        *://*/*
// @grant        none
// ==/UserScript==
(function() {
    'use strict';
    // 创建一个新的 <div> 元素
    let greeting = document.createElement('div');
    greeting.style.position = 'fixed';
    greeting.style.top = '10px';
    greeting.style.left = '10px';
    greeting.style.backgroundColor = '#f9f9f9';
    greeting.style.padding = '10px';
    greeting.style.border = '1px solid #ddd';
    greeting.style.zIndex = '10000';
    // 设置文本内容
    greeting.textContent = '欢迎来到这个页面！';
    // 将新元素添加到文档中
    document.body.appendChild(greeting);
})();

5.4 效果

保存后返回任意网页，点击油猴图标会出现刚才写好的脚本。

在任何页面刷新，左上角出现“欢迎来到这个页面！”字样说明该脚本执行成功。

注：这里的脚本会在所有与表达式:///匹配成功的网站生效，如果只在单一的网站生效，以百度举例，可以写成：http://www.baidu.com*，用通配符*号匹配所有。

6. 更新

6.1 更新元数据块

在每次更新脚本时，确保更新元数据块中的相关信息：

**
@version
**：递增版本号，例如从
0.1
升级到
0.2
。
**
@description
**：更新描述以反映新功能或修复的问题。
其他字段：如果有必要，也可以更新
@name
、
@match
等字段。

// ==UserScript==
// @name         页面问候语
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  在页面顶部显示一条友好的问候信息，并增加了更多样式选项
// @author       新手开发者
// @match        *://*/*
// @grant        none
// ==/UserScript==

6.2 编写更新日志

维护一个更新日志（changelog），记录每次更新的具体内容。这有助于用户了解新版本带来了哪些变化。你可以将更新日志放在脚本的注释部分或者单独创建一个文件保存。

// 更新日志:
// v0.2 - 2024-12-13
//   - 增加了更多的样式选项
//   - 修复了某些浏览器上的兼容性问题
// v0.1 - 2024-12-10
//   - 初始发布

7. 导出/导入

在管理面板中的实用工具里

7.1 导出

7.2 导入

7.3 注意

从油猴导出的文件为txt格式，包含全部脚本，不能直接在GreasyFork 中导入发布。

8. 发布

8.1 Greasy Fork

这里发布以用户使用最多的Greasy Fork为例

Greasy Fork：Greasy Fork - 安全且实用的用户脚本站

由 Jason Barnabe 创建,Jason Barnabe 同时也是Stylish 网站的创办者,在其储存库中有大量的脚本资源。

大量的脚本资源
拥有可以从 Github 中进行脚本同步的功能
非常活跃的开放源代码发展模式

8.2 步骤

8.2.1 登录注册账号

8.2.2 点击用户中心

8.2.3 发布你编写的脚本

8.2.4 直接编辑或者本地上传js文件

8.2.5 添加声明

添加
@license
字段

明确许可证声明，在元数据块中添加
@license
行。

比较常见的许可证声明方式：

8.2.5.1 MIT License

// ==UserScript==
// @name         页面问候语
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  在页面顶部显示一条友好的问候信息，并增加了更多样式选项
// @author       新手开发者
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

8.2.5.2 GPL-3.0 License

GNU 通用公共许可证（GPL）是另一个常用的开源许可证，要求衍生作品也必须以相同的许可证发布。

// ==UserScript==
// @name         页面问候语
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  在页面顶部显示一条友好的问候信息，并增加了更多样式选项
// @author       新手开发者
// @match        *://*/*
// @grant        none
// @license      GPL-3.0
// ==/UserScript==

8.2.5.3 Apache License 2.0

Apache 许可证 2.0 是一个带有专利授权条款的开源许可证，适合那些希望保护自己知识产权但仍希望分享代码的人。

// ==UserScript==
// @name         页面问候语
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  在页面顶部显示一条友好的问候信息，并增加了更多样式选项
// @author       新手开发者
// @match        *://*/*
// @grant        none
// @license      Apache-2.0
// ==/UserScript==

8.2.5.4 Unlicense

如果你希望将代码完全公开，不保留任何权利，可以选择 Unlicense。

// ==UserScript==
// @name         页面问候语
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  在页面顶部显示一条友好的问候信息，并增加了更多样式选项
// @author       新手开发者
// @match        *://*/*
// @grant        none
// @license      Unlicense
// ==/UserScript==

9. 获取别人的脚本

这里面的网站集合了大量别人编写好的脚本，可供自己下载使用

用户脚本 | Tampermonkey

10. 官方文档

文档 | Tampermonkey