Start Chat
Search
Ithy Logo

如何编写一个油猴脚本（Tampermonkey Script）

Can't rename or create more than one custom userscript script in ...

简介

油猴（Tampermonkey）是一款强大的浏览器扩展，允许用户自定义和增强网页功能。通过编写自定义的用户脚本，你可以修改网页的外观、自动化任务、添加新功能等。本文将详细介绍如何从安装油猴扩展到创建、调试和分享你的第一个油猴脚本。

步骤一：安装油猴扩展

支持的浏览器

油猴扩展支持多种现代浏览器，包括：

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Safari（需要使用油猴的官方版或第三方适配版本）

安装方法

根据你所使用的浏览器，按照以下链接下载安装油猴扩展：

安装完成后，你会在浏览器的工具栏中看到一个带有黑色猴子图标的图标，表示油猴已成功安装。

步骤二：创建新脚本

启动油猴并创建脚本

点击浏览器工具栏中的油猴图标，然后选择“添加新脚本”，这将打开一个内置的脚本编辑器窗口。

脚本编辑器界面

在编辑器中，你会看到一个预先填充的脚本模板，包括一些基本的元数据和一个立即执行的函数表达式（IIFE）。这是编写用户脚本的起点。

步骤三：编写脚本代码

理解基本结构

一个典型的油猴脚本包含两部分：

  • 元数据块：位于脚本顶部，用于指定脚本的名称、版本、匹配的网页等信息。
  • 脚本逻辑：实际执行的JavaScript代码，用于修改网页或添加新功能。

示例脚本

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


// ==UserScript==
// @name         我的第一个油猴脚本
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  修改网页标题为“Hello, World!”
// @author       你的名字
// @match        https://www.example.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    document.title = 'Hello, World!';
})();

该脚本将在匹配的网页上运行，并将网页标题修改为“Hello, World!”。

常用API和功能

油猴脚本可以利用多种JavaScript API和功能来实现复杂的操作：

  • DOM 操作：通过选择和修改网页元素来改变页面内容和样式。
  • 事件监听：响应用户的交互，如点击、输入等。
  • 网络请求：使用 XMLHttpRequest 或 fetch 与服务器进行通信，获取或发送数据。
  • 存储数据：利用 GM_setValue 和 GM_getValue 来存储和读取用户数据。

高级脚本示例

以下是一个更复杂的示例，自动填写表单：


// ==UserScript==
// @name         自动填写表单
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  在指定网站上自动填写表单
// @author       你的名字
// @match        https://www.example.com/form
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    document.querySelector('input[name="username"]').value = 'yourUsername';
    document.querySelector('input[name="password"]').value = 'yourPassword';
    document.querySelector('form').submit();
})();

这个脚本将在指定的表单页面自动填写用户名和密码，并提交表单。

步骤四：配置元数据

元数据块详解

元数据块位于脚本的顶部，用于定义脚本的基本信息和运行条件。以下是常用的元数据标签：

  • @name: 脚本的名称。
  • @namespace: 为脚本指定一个唯一的命名空间，避免与其他脚本冲突。
  • @version: 脚本的版本号，帮助跟踪更新。
  • @description: 对脚本的简短描述。
  • @author: 脚本的作者。
  • @match: 指定脚本应在哪些网页上运行。支持通配符，如*。
  • @include: 与@match类似，用于指定运行网页。
  • @exclude: 排除特定网页不运行脚本。
  • @grant: 指定脚本需要的权限，如 none 表示不需要额外权限。
  • @require: 引入外部脚本库。
  • @resource: 引入外部资源，如CSS文件。

示例元数据块


// ==UserScript==
// @name         自动点击按钮
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  自动点击指定的网页按钮
// @author       你的名字
// @match        https://www.example.com/page*
// @grant        none
// @require      https://code.jquery.com/jquery-3.6.0.min.js
// ==/UserScript==

步骤五：调试和测试脚本

调试工具

浏览器的开发者工具（通常通过按 F12 或右键选择“检查”打开）是调试油猴脚本的强大工具。你可以使用以下功能：

  • 控制台: 查看日志输出和错误信息。
  • 断点调试: 在脚本代码中设置断点，逐步执行代码。
  • 元素检查: 查看和修改网页元素的属性和样式。

调试步骤

  1. 保存并安装你的油猴脚本。
  2. 打开你脚本匹配的网页。
  3. 按 F12 打开开发者工具，切换到“控制台”标签。
  4. 查看是否有日志输出或错误信息。
  5. 根据需要在脚本中添加 console.log() 语句，以跟踪代码执行情况。
  6. 使用断点在关键位置暂停执行，检查变量值和程序流程。

常见问题及解决方法

  • 脚本未运行：检查@match或@include标签是否正确匹配目标网页URL。
  • 权限不足：确保@grant标签声明了所需的权限，或适当设置为none。
  • 脚本错误：使用控制台查看错误信息，检查语法或逻辑错误。
  • 脚本影响页面性能：优化代码，避免不必要的循环和繁重的DOM操作。

步骤六：分享和发布脚本

发布到脚本共享平台

分享你的油猴脚本，可以帮助其他用户从中受益。常见的共享平台包括：

发布步骤

  1. 访问上述平台并注册一个账号。
  2. 在平台上选择“发布新脚本”或类似选项。
  3. 填写脚本的详细信息，包括名称、描述、版本等。
  4. 粘贴你的脚本代码，并根据平台要求添加标签和分类。
  5. 提交审核，等待脚本上线。

共享注意事项

  • 代码质量: 确保脚本代码整洁、注释清晰，易于他人理解和使用。
  • 更新维护: 定期更新脚本以适应目标网站的变化，并修复潜在的bug。
  • 版权和授权: 尊重他人创作，必要时在脚本中注明使用的外部代码来源和许可证。

进一步学习和资源

学习JavaScript

掌握JavaScript是编写高级油猴脚本的基础。以下是一些推荐的学习资源：

油猴官方文档和社区

深入了解油猴脚本编写，可以参考以下资源：

示例项目和模板

通过查看和分析已有的油猴脚本，可以快速学习和掌握编写技巧。以下是一些示例项目：

  • GitHub上的示例项目: 搜索“Tampermonkey scripts”即可找到大量开源项目。
  • Greasy Fork示例脚本: 浏览并分析高评分的脚本，了解其实现方式。

最佳实践与优化

代码优化

  • 避免频繁操作DOM，尽量批量修改。
  • 使用事件委托来提高性能。
  • 尽量使用现代JavaScript特性，如let、const、箭头函数等。

安全性考虑

  • 避免在脚本中暴露敏感信息，如密码和API密钥。
  • 使用HTTPS协议引入外部资源，防止中间人攻击。
  • 限制脚本的@match范围，避免不必要的权限请求。

用户体验

  • 确保脚本不会对网页的正常功能造成负面影响。
  • 提供可配置选项，让用户根据需要启用或禁用特定功能。
  • 在必要时提供错误处理和反馈，提升脚本的可靠性。

结语

编写油猴脚本是一项非常实用且富有创造力的技能，能够极大地提升你的网页浏览体验。通过本文的详细步骤和资源指南，希望你能顺利入门，并逐步编写出功能强大、实用的脚本。记住，多练习、多尝试，以及积极参与社区讨论，都是提升编程能力的有效途径。祝你在油猴脚本编写的道路上取得成功！


Last updated January 5, 2025
Ask Ithy AI
Download Article
Delete Article
Help|Privacy|Terms