概述

Tampermonkey是一款免费的浏览器扩展程序，可以用于管理和运行用户脚本。这些用户脚本是编写好的JavaScript代码，可以修改、添加、删除网站或网页的功能，以便更好地满足个人需求。Tampermonkey主要应用于浏览器，可以轻松实现网页的定制化功能。

Tampermonkey具有以下特点：

  1. 可以自定义编写脚本，并对其进行管理、编辑、删除等操作，满足不同的需求。

  2. 可以让用户脚本自动运行，而不需要手动启动，省去了操作步骤。

  3. 带有编辑器和调试工具，可以方便地编写和测试用户脚本的代码。

  4. 广泛的用户社区，方便用户分享和讨论用户脚本。

Tampermonkey本质上是浏览器插件，按照用户要求，将JavaScript代码植入到网页中运行。类似于外挂程序，使用者可以通过Tampermonkey对目标网页进行修改，可以进行：操作dom、调用接口、数据获取等操作。

相比于浏览器插件，Tampermonkey的发布更加方便，如果要将浏览器插件发布需要科学上网访问谷歌商店，还需要额外支付5美元。而Tampermonkey只需要将脚本文件复制就可以直接使用。Tampermonkey社区也提供免费的脚本商店供大家分享脚本。

Tampermonkey脚本开发

这是一个基础的模板

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://juejin.cn/post/7138346293042085924
// @icon         https://www.google.com/s2/favicons?sz=64&domain=juejin.cn
// @grant        none
// ==/UserScript==

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

Tampermonkey脚本分为两部分：

1、头部

头部即为注释部分，这里记录的是脚本的配置，上面的代码配制分别为：

配置

说明

@name

脚本名称

@namespace

脚本命名空间

@version

版本号

....

....

完整的配置项文档：官方文档 中文文档

2、脚本

脚本文件可以理解为：你在别人的网页上新增了一个<script></script>，脚本可以直接访问dom、bom、为所欲为！

开发框架

vite-plugin-monkey是一个 vite 插件，用来辅助开发 Tampermonkey脚本引擎

  • 支持 Tampermonkey, Violentmonkey, Greasemonkey, ScriptCat 等脚本引擎的辅助开发

  • 打包自动注入脚本配置头部注释

  • 当 第一次启动 或 脚本配置注释改变时 自动在默认浏览器打开脚本安装

  • 利用 @require 配置库的 cdn 的方案, 减少构建脚本大小

  • 利用 @resource 配置外部资源 cdn 的方案, 额外减少构建脚本大小

  • 通过 ESM 导入的方式使用 GM_api, 附带类型提示

  • 智能收集使用到的 GM_api, 自动配置 @grant 注释

  • 支持 top level await 和单文件下的 dynamic import

  • 预览模式下自动打开浏览器安装构建好的脚本

  • 完全的 Typescript 和 Vite 的开发体验，比如模块热替换,秒启动

文档地址：vite-plugin-monkey

实践

东华大学教育平台自动刷课程序（2023年春季学期）

项目源码：GitHub