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 官网下载
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
MIT 许可证是一个非常宽松的开源许可证，允许几乎任何用途，包括商业用途，但需要保留版权声明和许可声明。
// ==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. 获取别人的脚本
这里面的网站集合了大量别人编写好的脚本，可供自己下载使用
扫一扫
1539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
