网页自由改造计划：用油猴脚本实现这些神奇功能你有没有遇到一些网页你需要改造，但又不能改变源码？又或者想为经常访问的网站做

关注我的公众号：【编程朝花夕拾】，可获取首发内容。

01 引言

你有没有遇到一些网页你需要改造，但又不能改变源码？又或者想为经常访问的网站做一些Tips等一些想法呢？

如果你有这些想法或者类似的场景，这篇文章将可能带给你一些思路。

02 油猴

上面的场景可以使用油猴插件解决。上面的场景你可能陌生，但是网站去除广告、全网VIP视频去除广告、解除网站不能复制等脚本一定听说过。

这些都是油猴的脚本，安装即可。

2.1 简介

篡改猴 (Tampermonkey) 是拥有超过 1000 万用户的最流行的浏览器扩展之一。它适用于 Chrome、Microsoft Edge、Safari、Opera Next和Firefox。有些人也会把篡改猴(Tampermonkey)称作油猴。

它允许用户自定义并增强您最喜爱的网页的功能。用户脚本是小型 JavaScript 程序，可用于向网页添加新功能或修改现有功能。使用篡改猴，您可以轻松在任何网站上创建、管理和运行这些用户脚本。

官网地址：www.tampermonkey.net/

2.2 用户脚本

官网提供了四个脚本网站，用户可以随意下载使用。

现成的脚本我们就不讲了，搜索安装即可。我们着重介绍一下定制脚本。

03 脚本定制

3.1 入口

直接在浏览器上点击添加脚本即可。

进入之后，会有脚本的模版，正常编写即可。

3.2 语法说明

这里面的注释并非简单的注释，又是具有实际业务意义的。即被UserScript包裹的部分。

脚本的标题含义官方也给出了解释：

我这里整理一下常用的标题：

@name：油猴脚本的名字
@namespace：命名空间，用来区分相同名称的脚本，一般写成作者名字或者网址
@version：脚本的版本号
@icon：可以指定脚本的图标，显示在脚本管理器中
@description：描述
@author：作者
@match：匹配脚本要运行的网页地址。可以使用通配符和正则表达式
@exclude：与match属性相反，指定脚本不应运行的网页地址
@grant：用于指定脚本需要的特定浏览器权限，如GM_addStyle等
@require：可以使用require指令引入js，如jquery

04 使用场景

为什么会想着自定义脚本呢。因为我们的项目接入了arthas平台，方便追踪线上日志以及性能分析。

当我们所有系统接入的时候，出现满屏的应用和服务，找起来比较麻烦。于是就想着这能不能使用油猴的脚本解决。

为了演示的需要，我本地启动了一个服务，为了模拟真实业务服务，同样使用油猴脚本处理一下。先看看处理之前的效果：

4.1 多项目脚本

经过页面的分析，无非就是多添加几个td标签即可

脚本标题

// ==UserScript==
// @name         模拟多项目
// @namespace    http://tampermonkey.net/
// @version      2026-01-20
// @description  try to take over the world!
// @author       ws
// @match        http://127.0.0.1:9000/apps.html
// @icon         https://pic.rmb.bdstatic.com/bjh/news/3fe6db1a8d291be39192f9a06c74ce99.png
// @require      https://code.jquery.com/jquery-3.7.1.js
// @grant        none
// ==/UserScript==

@name 脚本名字

@match 这里我直接制定了地址，也就是脚本只会在当前地址生效。

@require 这里引入了jquery，因为我习惯jquery的操作

脚本

脚本比较简单，就是复制已有的td，然后克隆出来，修改里面的text即可。

let node = $("#app").find(".hover");
node.find("a").text("boot-arthasV1-01");
$("#app").find("tbody").append(node.clone());
node.find("a").text("boot-arthasV1-02");
$("#app").find("tbody").append(node.clone());
node.find("a").text("boot-arthasV1-03");
$("#app").find("tbody").append(node.clone());

let node2 = node.clone()
node2.find("a").text("boot-arthasV2-01");
$("#app").find("tbody").append(node2.clone());
node2.find("a").text("boot-arthasV2-02");
$("#app").find("tbody").append(node2.clone());
node2.find("a").text("boot-arthasV2-03");
$("#app").find("tbody").append(node2.clone());

let node3 = node.clone()
node3.find("a").text("boot-arthasV3-01");
$("#app").find("tbody").append(node3.clone());
node3.find("a").text("boot-arthasV3-02");
$("#app").find("tbody").append(node3.clone());
node3.find("a").text("boot-arthasV3-03");
$("#app").find("tbody").append(node3.clone());

let node4 = node.clone()
node4.find("a").text("boot-arthasV4-01");
$("#app").find("tbody").append(node4.clone());
node4.find("a").text("boot-arthasV4-02");
$("#app").find("tbody").append(node4.clone());
node4.find("a").text("boot-arthasV4-03");
$("#app").find("tbody").append(node4.clone());

但是编写过程中总是不识别$,说明不识别jquery

需要在脚本之前增加一下脚本：

/* globals jQuery, $, waitForKeyElements */

然而发现，并不生效。经过分析发现，是因为脚本执行过早，页面还没有渲染，需要等待页面渲染之后才可以。于是，我们需要通过方法：

window.addEventListener('load', function() {
    // 脚本
}, false);

最终脚本：

页面效果

4.2 Arthas聚合器

上面模拟出来的结果就是线上的真实场景，应用服务太多，查找太麻烦，于是我们需要通过脚本定制页面，能够分组聚合，并且能够筛选。

脚本标题

脚本

脚本遇到的问题和之前的一样，所以我们直接使用即可。

(function() {
    'use strict';
    /* globals jQuery, $, waitForKeyElements */
    // 等待网页完成加载
    window.addEventListener('load', function() { 
    	// 页面脚本
    }, false);     
})();

这里的脚本就基础JS交互，场景不同，写法不同，没有复用性，就不在展示了。

我们直接来看看效果：

05 小结

油猴脚本开发可以根据自己的意愿随意定制符合自己要求的页面，可以极大地提升网页浏览和工作效率。