前端面试题宝典

除了cursor，Tampermonkey油猴脚本也能给打工人提效

简介：在浏览器插件中，功能最多的毫无疑问是油猴插件:Tampermonkey。
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~

hello大家好，我是Range。
今天看到这篇介绍 油猴脚本 的文章，不禁感叹，好日子真的在后头啊。刚入前端坑那会儿，自己写个类似的功能，都是通过【浏览器书签】来实现的，一般用户用的是 http 或者 https 这样的URL链接协议的书签，我们开发的是 javascript: 这样协议的书签，还需要在页面里提示用户把一段JavaScript代码，拖到浏览器书签上，下次要在某个网站启用我们的JavaScript功能，就点击对应的书签。
看了下油猴脚本，由于本身是作为浏览器的插件，相当于把浏览器插件的一些API再次封装了 一层，提供给开发者，用起来真的太方便了。
PS：本文也是用的油猴脚本从某金网站复制的
下面是正文部分。

在浏览器插件中，功能最多的毫无疑问是油猴插件:Tampermonkey。它里面可以自定义安装很多插件，一款插件就可以实现很多常用的功能：

  • 网页去广告，去除禁止复制权限
  • 购物比价
  • 网页选词翻译
  • VIP视频播放
  • ......

虽然中间会穿插一些广告，但是用着还是特别的方便的。

而且Tampermonkey允许用户通过编写和安装用户脚本来修改网页内容和行为。用户脚本可以用来修改网页的内容、自动填写表单、添加功能等。我自己也准备写些油猴脚本，来处理一些问题。

而这篇文章介绍如何快速入门编写Tampermonkey脚本。

Tampermonkey简述

Tampermonkey 是一种流行的用户脚本管理器，广泛用于各大浏览器如 Chrome、Firefox、Safari 和 Microsoft Edge。用户脚本是一种用JavaScript编写的浏览器脚本，可以修改网页上的内容、添加新功能或自定义网页行为。

  1. 官网及下载安装地址：Home | Tampermonkey，安装非常简单，与安装普通的插件无异。
  2. 官网文档：www.tampermonkey.net/documentati…。
image-20240621213651719.png

链接直达

Tampermonkey 油猴脚本(篡改猴)是一款功能强大的浏览器扩展功能，拥有超过1000万用户，可以在网站上运行用户脚本，从而提升您的浏览体验。许多中国用户称篡改猴为油猴。 用户脚本是一些小型程序，可以修改页面布局、添加或删除功能以及自动执行操作，个性化您的网络体验。

Tampermonkey可以让用户轻松管理和运行用户脚本，通过简单的安装和配置，用户可以在浏览器中添加各种自定义脚本来改善网页浏览体验。一些常见的用途包括自动化任务、广告屏蔽、界面定制、网页功能增强等。

Tampermonkey提供了一个用户友好的界面，让用户可以方便地添加、编辑、删除和启用/禁用用户脚本。用户还可以根据需要设置脚本的运行时机、匹配的网址规则等。

总的来说，Tampermonkey是一个功能强大且易于使用的用户脚本管理器，为用户提供了丰富的自定义和扩展功能，可以让用户根据个人需求来定制和改进他们的网页浏览体验。

编写油猴脚本步骤

编写油猴（Tampermonkey）脚本是为了在网页上自动化执行特定任务或修改页面行为。

以下是编写油猴脚本的基本步骤：

  1. 安装油猴插件：

    • 首先，确保你的浏览器（如Chrome或Firefox）安装了油猴插件。你可以从浏览器的扩展商店中下载和安装它。
    •  插件地址见第一章简述
      。

  2. 创建新脚本：

    • 在浏览器中打开油猴插件的管理界面。通常可以通过浏览器右上角的油猴图标访问。
动画.gif

  • 在浏览器中打开油猴插件的管理界面。通常可以通过浏览器右上角的油猴图标访问。

image-20240622091749621.png

  1. 编辑脚本：

    • 在编辑器中编写你的油猴脚本。油猴脚本使用JavaScript编写。
    • 编写代码以实现你想要的功能。例如，你可以通过DOM操作修改页面元素、发送Ajax请求与后端交互、监听事件等等。

  2. 定义元数据：

    • 在脚本的开头部分，你需要使用特定的注释来定义脚本的元数据，例如名称、描述、版本号等。这些元数据将在油猴插件中显示，方便你管理脚本。

  3. 保存和应用：

    • 编写完成后，保存你的脚本。通常是通过编辑器界面的保存按钮来完成。
    • 保存后，油猴会自动为你应用脚本。你可以打开一个匹配脚本匹配规则的页面，查看脚本是否按预期执行。

  4. 调试和优化：

    • 在开发过程中，你可能需要调试你的脚本以确保它正常工作。可以使用浏览器的开发者工具（如控制台）来查看错误信息和输出信息。
    • 如果需要，优化你的脚本以提高性能或处理更多情况。

  5. 分享和安装（可选）：

    • 如果你认为你的脚本对其他人有用，你可以选择分享你的脚本。油猴插件提供了分享和安装脚本的功能，让其他人也可以使用你编写的脚本。

通过这些步骤，你可以编写并在浏览器中使用自己定制的油猴脚本，从而增强你的浏览器体验或提高工作效率。

脚本注释/注解

在编写油猴（Tampermonkey）脚本时，注释/注解是非常重要的部分。它们不仅提供了脚本的元数据，还定义了脚本在何时、何地运行以及如何与网页互动。油猴脚本的注释通常放在脚本的开头，使用 @ 符号来标记不同的元数据字段。

那如果我们编写脚本的时候，把脚本的注释全部删掉，会导致什么样的后果呢？

可以将油猴脚本的注释/注解全部删除，但请注意，这会使脚本无法在油猴插件中正确识别和运行。注释/注解包含了脚本的元数据，例如脚本的名称、版本、适用的URL等，这些信息是油猴插件正确运行脚本所必需的。

我们在上一章中，可以看到新建用户脚本时，在脚本的头部已经有一些注释/注解了，那他们都代表什么意思呢？除了这些，还有哪些是比较常用的，他们的用法是怎样的呢？

这个是新建脚本时的头部注解：

// ==UserScript==
// @name         脚本名称
// @namespace    http://tampermonkey.net/
// @version      版本号
// @description  脚本描述
// @author       作者
// @match        适用URL模式
// @grant        所需权限
// ==/UserScript==
  • @name
    ：脚本的名称。该项将显示在页面的标题以及链接内容，必填项。
  • @namespace
    ：@namespace 与 @name 这两个属性被作为脚本的唯一标识符，用户脚本管理器根据它们来判断一个脚本是否已安装。Greasy Fork 也需要这些属性，若用户在更新脚本时改变了两者中的任意一项，将发出警告。
  • @version
    ：脚本的版本标记将使用 Mozilla 版本格式，并显示于脚本的简介页面。Greasy Fork 要求填写该属性，且当用户更新脚本时没有更新版本号或降低了版本号时将发出警告。
  • @description
    ：脚本功能的描述，显示在脚本标题下面，必填项。
  • @author
    ：作者信息。
  • @match
    ：用于指定脚本适用的网页地址或匹配规则，可以使用通配符 * 来匹配多个页面。
  • @grant
    ：指定脚本需要的权限，none 表示不需要任何特殊权限。

更多详细内容参见：用户脚本属性值

匹配规则

这里重点讲一下，脚本的适用的网页地址或匹配规则。

在油猴（Tampermonkey）脚本中，@include、@exclude 和 @match 是用来指定脚本在哪些网页上运行的关键注释。

  1. @match：指定了脚本适用的URL模式。这个模式可以是简单的通配符，也可以是正则表达式，用来匹配页面的URL。

    // @match        https://*.example.com/*
    // @match        http://example.com/*
    // @match        https://example.com/path/to/page*
    • 在上面的示例中，脚本将匹配所有 example.com 域名下的页面，以及特定路径下的页面。

  2. @include：与 @match 类似，也用来指定脚本适用的URL模式。不过，@include 更加灵活，支持使用正则表达式来定义匹配规则。

    // @include      /^https?:\/\/.*\.example\.com\/.*$/
    • 这个例子中的正则表达式会匹配所有以 http 或 https 开头，且域名为 example.com 的页面。

  3. @exclude：用于排除某些URL模式，即使它们符合 @match 或 @include 的规则。通常用于限制脚本运行的范围。

    // @exclude      https://example.com/ignore-this-page
    • 在上面的示例中，脚本将不会在 https://example.com/ignore-this-page 页面上运行，即使它符合其他的匹配规则。

如何选择使用这些注释？

  • @match
     适合简单的URL模式匹配，如果你只需要基本的域名或路径匹配。
  • @include
     更加灵活，可以使用正则表达式来定义复杂的URL匹配规则，特别是对于需要匹配多个域或特定路径格式的情况。
  • @exclude
     可以用来排除特定的URL，以确保脚本不会在这些页面上运行。

综合使用这些注释可以精确控制油猴脚本的运行范围，确保它们只在需要的页面上执行，从而提升用户体验和脚本效率。

@grant:权限

@grant 是油猴脚本中常用的注释指令，用于指定脚本需要的权限或特权。通过 @grant 指令，你可以告诉油猴脚本引擎为你的脚本提供特定的 API 权限，以便你可以在脚本中使用这些 API。

常见的 @grant 指令包括：

  1. none
    ：表示脚本不需要任何特殊权限，默认情况下，脚本只能访问网页的 DOM。
  2. GM_addStyle
    ：表示脚本需要使用 GM_addStyle 函数来添加自定义样式。
  3. GM_getValue
     和 GM_setValue：表示脚本需要使用 GM_getValue 和 GM_setValue 函数来进行数据存储和读取。
  4. GM_listValues
    ：允许脚本列出所有已存储的值的键名。
  5. GM_xmlhttpRequest
    ：表示脚本需要使用 GM_xmlhttpRequest 函数来进行跨域请求。
  6. GM_notification
     ： 允许脚本显示桌面通知。
  7. unsafeWindow
    ：表示脚本需要访问页面的 unsafeWindow 对象，这是一个潜在的安全风险，需要谨慎使用。

根据你的需求，你可以在 @grant 指令中选择适当的权限，以便脚本能够访问所需的功能和资源。在使用特定的 API 之前，请确保为脚本授予了相应的权限。

@require:加载外部的JS库或文件

@require 用于在油猴脚本中引入外部脚本或库文件。通过 @require 指令，你可以告诉油猴脚本引擎在执行脚本之前先加载指定的外部脚本或库文件，以便在脚本中使用这些外部资源。

  1. 加载外部JavaScript库：

    // @require      https://code.jquery.com/jquery-3.6.0.min.js
    • 你可以使用 @require 注释来加载外部的JavaScript库。需要确保引用的URL指向一个有效的JavaScript文件。

  2. 加载多个库：

    // @require      https://code.jquery.com/jquery-3.6.0.min.js
    // @require      https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js
    • 你可以通过多个 @require 注释来加载多个库。它们会按顺序加载，前一个库加载完成后再加载下一个库。

使用 @require 指令可以方便地引入外部脚本或库文件，扩展脚本的功能和灵活性。请注意，在使用 @require 指令引入外部资源时，确保资源的可用性和合法性，以避免安全风险和依赖问题。

🔔注意事项🔔：

  • 外部资源
    : 可以在 @require 中指定任何需要的外部资源，如其他 JavaScript 库、CSS 文件等。这些资源可以是通过 URL 引用的，通常是通过 CDN 或者其他网络地址。
  • 加载顺序
    : 外部资源会在脚本执行之前加载，确保脚本在运行时可以依赖和使用这些资源。
  • 版本控制
    : 建议在 @require 中指定具体的版本号，以确保脚本始终使用相同版本的外部资源，避免由于资源更新导致的不兼容问题。
  • 网络连接
    : 脚本在加载外部资源时需要网络连接，如果网络不稳定或资源无法访问，可能会影响脚本的正常执行。
  • 库的大小
    ：加载大型库可能会增加页面加载时间。尽量只加载必要的库，并考虑性能影响。

@resource:引入外部资源

@resource 注释用于预加载外部资源并将其嵌入到脚本中。常见的资源类型包括CSS文件、图像、JSON文件等。预加载这些资源可以使脚本在运行时更高效，并且可以在没有网络连接的情况下使用这些资源。

  1. 加载外部资源：

    • 使用 @resource 注释来指定资源的名称和URL。
// @resource     customCSS https://example.com/style.css
// @resource     logo https://example.com/logo.png
  1. 访问加载的资源
    ：
    • 使用 GM_getResourceURL 或 GM_getResourceText 函数来获取资源的内容或URL。
const cssURL = GM_getResourceURL('customCSS');
const logoURL = GM_getResourceURL('logo');
const cssText = GM_getResourceText('customCSS');

🌰完整示例🌰

下面是一个包含 @resource 注释的完整油猴脚本示例，它预加载了一个CSS文件和一个图像，并在页面上应用这些资源：

// ==UserScript==
// @name         My Resource Tampermonkey Script
// @namespace    http://tampermonkey.net/
// @version      1.0.0
// @description  A script that uses preloaded resources.
// @author       John Doe
// @match        https://*.example.com/*
// @grant        GM_getResourceURL
// @grant        GM_getResourceText
// @grant        GM_addStyle
// @resource     customCSS https://example.com/style.css
// @resource     logo https://example.com/logo.png
// ==/UserScript==

(function() {
'use strict';

// 加载并应用预加载的CSS
const cssText = GM_getResourceText('customCSS');
GM_addStyle(cssText);

// 加载并添加预加载的图像
const logoURL = GM_getResourceURL('logo');
const img = document.createElement('img');
    img.src = logoURL;
document.body.appendChild(img);
})();

🔔注意事项🔔

  • 资源名称
    ：@resource 注释中的资源名称应该是唯一的，避免与其他资源冲突。
  • URL有效性
    ：确保资源URL有效且可访问。如果资源不可用，脚本将无法正常加载这些资源。
  • 缓存和性能
    ：资源会被缓存，以提高性能。请注意资源的大小，因为过大的资源文件可能会影响页面加载时间。
  • 资源类型
    ：确保资源类型适合预加载。例如，CSS文件、图像、JSON文件等是常见的预加载资源类型。
  • 跨域限制
    ：某些浏览器和资源服务器可能会对跨域请求施加限制。如果资源服务器禁止跨域访问，预加载资源可能会失败。

通过使用 @resource 注释，你可以在油猴脚本中预加载和嵌入外部资源，从而提高脚本的效率和自给自足能力。

在这一章中，我们主要学习了油猴脚本常见的头部的注释/注解的含义和用法，在下一章，我们节开始介绍油猴常见的API，讲述如何编写脚本。

油猴API

油猴提供了一组丰富的API，用于开发和管理用户脚本。这些API可以帮助脚本与页面交互、修改页面内容、访问外部资源等。

下面简单介绍一下grant指令那里可以填写的一些权限，详情请查看油猴脚本文档。这里就简单介绍几个常用的，可以调用的函数全部以GM_作为开头。

GM_ 前缀代表 "Greasemonkey"，这是一种用于用户脚本的 API 标准。

以下是一些常用的油猴 API：

  1. GM_log: 输出调试信息到控制台，类似于console.log。

  2. GM_info: 返回当前脚本的元数据信息，如脚本名称、版本号等。

    var scriptInfo = GM_info.script;

  3. GM_setValue 和 GM_getValue: 用于在用户脚本之间存储和获取持久化数据。

    // 存储值
    GM_setValue('myKey', 'myValue');

    // 获取值
    const value = GM_getValue('myKey');
    GM_log('Stored value:', value);

  4. GM_deleteValue 和 GM_listValues:删除存储的数据和列出所有存储的键。

    // 删除值
    GM_deleteValue('myKey');

    // 列出所有键
    const keys = GM_listValues();
    console.log('Stored keys:', keys);

  5. GM_addStyle: 用于动态添加样式规则到页面中。

    GM_addStyle(`
        body {
            background-color: #f0f0f0;
        }
    `    );

  6. GM_xmlhttpRequest: 用于发送跨域的 XMLHTTPRequest 请求。

    GM_xmlhttpRequest({
    method: 'GET',
    url: 'https://api.example.com/data',
    onload: function(response) {
    console.log(response.responseText);
        },
    onerror: function(error) {
    console.error('Request failed:', error);
        }
    });

  7. GM_registerMenuCommand: 用于在油猴菜单中添加自定义命令。

    GM_registerMenuCommand('Show Alert', function() {
    alert('Hello, world!');
    });

  8. GM_openInTab: 用于在新标签页或新窗口中打开指定的 URL。

    GM_openInTab('https://example.com', { active: true });

  9. GM_notification: 用于显示桌面通知。

    GM_notification({
    text: 'This is a notification',
    title: 'Notification Title',
    timeout: 4000
    });

  10. GM_setClipboard: 用于将文本复制到剪贴板。

    // 设置一个固定文本到剪贴板中
    GM_setClipboard("Hello, world!");

    // 使用变量设置剪贴板内容
    var data = "This is the data I want to copy.";
    GM_setClipboard(data);

除了上述 API，油猴还提供了许多其他功能和方法，用于处理网页事件、修改页面内容、获取页面信息等。你可以根据具体需求查阅油猴的官方文档以获取更详细的信息。

下面是两个也算比较常用的，不以GM_开头的API。

  1. unsafeWindow:

    • 直接访问页面的全局对象，允许脚本与页面的 JavaScript 代码进行交互。但使用 unsafeWindow 需要注意安全性。

  2. window:

    • 常规的 JavaScript window 对象，同样适用于油猴脚本。

总结

以下是按功能分类的 GM_* API 和其他相关的用户脚本 API，细化了每个分类及其主要用途：

🛠️WEB请求类🛠️：

  • GM_xmlhttpRequest(details)
    ：发起 HTTP 请求。
  • GM_webRequest(rules, listener)
    ：监听和修改网络请求（通常需要特定权限）。

🛠️Cookie操作🛠️：

  • GM_cookie.list(details[, callback])
    ：列出匹配的 cookies。
  • GM_cookie.set(details[, callback])
    ：设置 cookie。
  • GM_cookie.delete(details, callback)
    ：删除 cookie。

🛠️Tab选项卡操作🛠️：

  • GM_getTab(callback)
    ：获取当前 tab 的数据。
  • GM_saveTab(tab)
    ：保存当前 tab 的数据。
  • GM_getTabs(callback)
    ：获取所有 tab 的数据。

🛠️键值对操作🛠️：

  • GM_setValue(key, value)
    ：存储键值对。
  • GM_getValue(key, defaultValue)
    ：获取存储的值。
  • GM_deleteValue(key)
    ：删除存储的键值对。
  • GM_listValues()
    ：列出所有存储的键。
  • GM_addValueChangeListener(key, (key, old_value, new_value, remote) => void)
    ：监听值的变化。
  • GM_removeValueChangeListener(listenerId)
    ：移除值变化监听器。

🛠️修改DOM🛠️：

  • GM_addElement(tag_name, attributes)
    ：添加一个新的 DOM 元素。
  • GM_addElement(parent_node, tag_name, attributes)
    ：在指定的父节点下添加一个新的 DOM 元素。

🛠️添加样式🛠️：

  • GM_addStyle(css)
    ：动态添加 CSS 样式。

🛠️下载🛠️：

  • GM_download(details)
    ：下载文件。
  • GM_download(url, name)
    ：通过指定 URL 下载文件并命名。

🛠️获取@resource引入的资源文件🛠️：

  • GM_getResourceText(name)
    ：获取引入的资源文件的文本内容。
  • GM_getResourceURL(name)
    ：获取引入的资源文件的源地址。

🛠️控制台打印🛠️：

  • GM_log(message)
    ：在控制台输出日志信息。

🛠️屏幕通知🛠️：

  • GM_notification(details, ondone)
    ：显示桌面通知。
  • GM_notification(text, title, image, onclick)
    ：显示桌面通知。

🛠️打开新选项卡🛠️：

  • GM_openInTab(url, options)
    ：在新选项卡中打开 URL。
  • GM_openInTab(url, loadInBackground)
    ：在后台新选项卡中打开 URL。

🛠️菜单注册和注销🛠️：

  • GM_registerMenuCommand(name, callback, accessKey)
    ：向用户脚本命令菜单添加命令。
  • GM_unregisterMenuCommand(menuCmdId)
    ：注销之前注册的菜单命令。

🛠️设置剪切板🛠️：

  • GM_setClipboard(data, info)
    ：将内容复制到剪贴板。

🛠️Windows窗体操作🛠️：

  • window.onurlchange
    ：监听窗口地址的变化。
  • window.close()
    ：关闭窗口。
  • window.focus()
    ：聚焦窗口。

🛠️执行页面上的Window🛠️：

  • unsafeWindow
    ：直接访问页面的全局对象。

🛠️计算对比引入文件的hash值（Subresource Integrity）🛠️：

  • Subresource Integrity
    ：确保外部资源（如脚本）的完整性和来源的可信性，防止加载被篡改的资源。

本地调试技巧

有时候我们想要使用外部编辑器编辑js脚本，此时可以在油猴插件中添加下面的脚本内容，引用外部实际的脚本文件路径 注意match、run-at、grant等属性从引用的实际脚本内容中复制。 另外需要在浏览器中开启油猴插件的允许访问文件网址。

// ==UserScript==
// @name         测试
// @description  通过这种方式，可以使用外部编辑器修改js文件。
// @version      1.0.0
// @match        https://*.yourwebsite.com/*
// @require      file://E:\path\to\your\test.user.js
// ==/UserScript==

编写一个简单的油猴脚本

可以去去油猴中文网看看或学习，里面有很多的参考素材。

下面我们编写一个简单的油猴脚本，打开掘金的文章，可以自己编辑，利用document.body.contentEditable = true;

// ==UserScript==
// @name         Make Juejin Articles Editable
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Make articles on Juejin editable
// @author       Your Name
// @match        https://juejin.cn/*
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
'use strict';
// Wait for the DOM to fully load
window.addEventListener('load', function() {
// Select the main content area of the Juejin article
let articleBody = document.querySelector('#article-root');  // Adjust the selector as needed
if (articleBody) {
            articleBody.contentEditable = 'true';
        }
    });
})();
动画.gif

这个需求比较简单，后面会参考一些比较热门的油猴脚本，根据具体的需求，实现相应的油猴脚本编写。

参考文章

Tampermonkey油猴脚本编写快速入门

Chrome插件与油猴脚本


最后

欢迎大家访问我们的刷题网站（https://fe.ecool.fun/）或者小程序 前端面试题宝典 进行刷题，1200多道全网最全的前端面试题，让你一网打尽。近期还有会员卡免费领，全场打折的活动不容错过！刷题会员周卡免费送

有会员购买、辅导咨询的小伙伴，可以通过下面的二维码，联系我们的小助手。

图片

原文链接：https://juejin.cn/post/7384256110281146420