资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

油猴脚本入门教程：从零开始打造个性化浏览器扩展

创作时间:

作者:

@小白创作中心

油猴脚本入门教程：从零开始打造个性化浏览器扩展

引用

CSDN

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

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

基础知识

JavaScript

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

HTML 和 CSS

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

安装

官网下载

Chrome

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

Edge

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

安装验证

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

第一个脚本

添加新脚本

默认代码

// ==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...
})();

元数据块（Metadata Block）

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

@name：脚本的名称。这里可以填写任何你想给脚本的名字。
@namespace：命名空间用于避免脚本之间的冲突。通常可以使用你的网站或邮箱地址作为命名空间。
@version：脚本的版本号，便于管理和更新。
@description：对脚本功能的简要描述。
@author：脚本作者的名字。
@match：指定脚本应该在哪些网址上运行。通配符 *://*/* 表示匹配所有网址。你可以根据需要添加多个 @match 行来限定脚本运行的具体页面。
@icon：为脚本指定一个图标。这通常是通过提供图标的 URL 来实现的。
@grant：声明脚本所需的权限。none 表示不需要特殊权限；如果你需要进行跨域请求或其他高级操作，则可能需要指定如 GM_xmlhttpRequest、GM_setValue 等权限。

主函数 (IIFE)

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

'use strict';：启用严格模式，使 JavaScript 引擎以更严格的规则解析代码，有助于发现潜在的错误和提高代码质量。
// Your code here...：这是你放置实际 JavaScript 代码的地方。你可以在这里编写逻辑，操作 DOM，监听事件等。

修改默认代码

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

// ==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);
})();

效果

保存后返回任意网页，点击油猴图标会出现刚才写好的脚本。在任何页面刷新，左上角出现“欢迎来到这个页面！”字样说明该脚本执行成功。注：这里的脚本会在所有与表达式 *://*/* 匹配成功的网站生效，如果只在单一的网站生效，以百度举例，可以写成：http*://www.baidu.com*，用通配符 * 号匹配所有。

更新

更新元数据块

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

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

编写更新日志

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

导出/导入

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

导出

导入

注意

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

发布

Greasy Fork

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

Greasy Fork：Greasy Fork - 安全且实用的用户脚本站
由 Jason Barnabe 创建,Jason Barnabe 同时也是Stylish 网站的创办者,在其储存库中有大量的脚本资源。

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

步骤

登录注册账号

点击用户中心

发布你编写的脚本

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

添加声明

添加 @license 字段
明确许可证声明，在元数据块中添加 @license 行。比较常见的许可证声明方式：

MIT License

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

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==

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==

Unlicense

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

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

获取别人的脚本

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

用户脚本 | Tampermonkey

官方文档

文档 | Tampermonkey