浙江领先的线上培训和职业文化发展平台

Tampermonkey 油猴脚本使用教程

2024-12-17 杨亦涛 浏览量: 202

Tampermonkey（油猴）是一款流行的浏览器扩展，用于管理和运行用户脚本。通过油猴脚本，用户可以自定义和增强网页功能，例如自动填写表单、修改页面元素、屏蔽广告等。以下是Tampermonkey使用教程：

[weixingzh key=”123456″ keyword=”教资”]

 

1. 安装 Tampermonkey 扩展

在 Chrome 中安装：

  1. 打开 Chrome 网上应用店。
  2. 搜索 Tampermonkey，点击“添加到 Chrome”。
  3. 确认安装并等待完成。

在 Firefox 中安装：

  1. 打开 Firefox 附加组件页面。
  2. 点击“添加到 Firefox”，然后确认安装。

2. 创建和管理脚本

创建新脚本：

  1. 安装 Tampermonkey 后，点击浏览器右上角的 Tampermonkey 图标。

  2. 选择 创建新脚本。

  3. 编辑器界面打开后，你可以编写自己的脚本。Tampermonkey 会自动插入一些默认的模板代码，通常是用 @namespace, @description, @match 等注释标记来说明脚本的基本信息和适用网站。

    例如：

    javascript
    // ==UserScript==
    // @name My Custom Script
    // @namespace http://tampermonkey.net/
    // @version 0.1
    // @description A brief description of the script
    // @author Your Name
    // @match https://example.com/*
    // @grant none
    // ==/UserScript==

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

    • @name: 脚本名称
    • @namespace: 脚本的命名空间
    • @version: 脚本版本
    • @description: 脚本的描述
    • @match: 适用的网页 URL（可以用通配符，如 https://*/*）
    • @grant: 请求权限，通常是 none 或一些 API 权限

启用和禁用脚本：

  1. 在 Tampermonkey 面板中，你可以查看所有已安装的脚本。
  2. 每个脚本旁边有一个启用/禁用按钮，点击按钮即可启用或禁用脚本。

编辑已有脚本：

  1. 点击 Tampermonkey 图标，选择 管理面板。
  2. 在脚本列表中，找到你想编辑的脚本，点击编辑按钮进行修改。

3. 使用和调试脚本

安装现成的脚本：

你可以从第三方网站（如 GreasyFork 或 OpenUserJS）下载安装现成的脚本。

  1. 进入脚本下载页面，点击“安装”按钮。
  2. Tampermonkey 会自动提示安装该脚本。

调试脚本：

  1. 在浏览器的开发者工具中，切换到 Console 标签页。
  2. 使用 console.log() 来打印调试信息。
  3. 可以在 Tampermonkey 中的脚本设置中启用调试模式，查看脚本的执行情况。

4. 常见脚本示例

例 1：自动填充表单

javascript
// ==UserScript==
// @name Auto Fill Form
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 自动填写表单
// @author You
// @match https://example.com/form*
// @grant none
// ==/UserScript==

(function() {
'use strict';

// 自动填充表单
document.querySelector('input[name="username"]').value = 'your_username';
document.querySelector('input[name="password"]').value = 'your_password';
})();

例 2：隐藏网页中的广告

javascript
// ==UserScript==
// @name Hide Ads
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 隐藏网页广告
// @author You
// @match https://example.com/*
// @grant none
// ==/UserScript==

(function() {
'use strict';

// 隐藏广告元素
let ads = document.querySelectorAll('.ad-class');
ads.forEach(ad => ad.style.display = 'none');
})();

5. 高级功能

使用 @grant 获取特权 API

Tampermonkey 支持多种 API，允许脚本与页面进行更深度的交互。使用 @grant 来请求相应权限。例如：

  • @grant GM_setValue 和 @grant GM_getValue 用于存储和读取脚本数据。
  • @grant GM_xmlhttpRequest 用于跨域 HTTP 请求。

示例：使用 GM_setValue 和 GM_getValue 存储数据

javascript
// ==UserScript==
// @name Save User Preferences
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 保存用户偏好设置
// @author You
// @match https://example.com/*
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==

(function() {
'use strict';

let userPreference = GM_getValue('theme', 'light'); // 获取存储的主题
document.body.classList.add(userPreference); // 应用主题

// 修改主题按钮点击事件
document.getElementById('themeButton').addEventListener('click', function() {
let newTheme = userPreference === 'light' ? 'dark' : 'light';
GM_setValue('theme', newTheme); // 存储新的主题
document.body.classList.remove(userPreference);
document.body.classList.add(newTheme);
userPreference = newTheme;
});
})();

6. 常见问题

1. 脚本不执行或不起作用

  • 检查 @match 或 @include 是否正确设置，确保脚本应用到的网页匹配。
  • 查看开发者工具中的 Console，检查是否有错误信息。

2. Tampermonkey 无法保存脚本

  • 确保 Tampermonkey 扩展已启用并处于正常工作状态。

通过以上步骤，你可以开始使用 Tampermonkey 来定制和优化浏览器的网页体验。

本文记录一下 Tampermonkey 油猴脚本的使用教程，图文讲解哦~

目录如下：

一、Tampermonkey 油猴脚本是什么？

二、安装 Tampermonkey 油猴脚本扩展（前置条件）

三、安装脚本

四、脚本管理

五、结语

一、Tampermonkey 油猴脚本是什么？

官网介绍如下：

Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器，它支持以下浏览器：

Microsoft Edge

Safari

Opera Next

Firefox

虽然有些受支持的浏览器拥有原生的用户脚本支持，但 Tampermonkey 将在您的用户脚本管理方面提供更多的便利。它提供了诸如便捷脚本安装、自动更新检查、标签中的脚本运行状况速览、内置的编辑器等众多功能， 同时Tampermonkey还有可能正常运行原本并不兼容的脚本。

总之，它可以实现一些神奇强大的功能！你懂得~

二、安装 Tampermonkey 油猴脚本扩展（前置条件）

安装油猴脚本之前，首先你得确保你的浏览器已经安装成功 Tampermonkey 油猴脚本扩展插件，

三、安装脚本

扩展安装成功后，就可以准备安装脚本了。

脚本网站截图：Tampermonkey 油猴脚本使用教程

找到自己想要的脚本后，比如【懒人专用 …】这个脚本，点击【安装此脚本】：Tampermonkey 油猴脚本使用教程

[/weixingzh]