篡改猴Tampermonkey的使用

八青妹
3,364 阅读5分钟

1. 篡改猴是什么

篡改猴（Tampermonkey）就是一个浏览器的扩展。常用的浏览器谷歌、火狐、Edge都可以安装该扩展。它允许用户在网页上运行自定义的 JavaScript 脚本（虽然这句话描述的有点平淡简约，但却是这个插件拥有1000万用户的根本所在）。

通过在网页上运行自定义的js脚本，可以实现的功能:

  1. 用户脚本管理: Tampermonkey 提供了一个方便的界面,让用户可以轻松地管理自己编写的脚本或者从网上下载的脚本。包括安装、更新、启用/禁用等操作。
  2. 脚本编写: Tampermonkey 内置了一个代码编辑器,用户可以在这里编写自定义的 JavaScript 脚本。它支持自动补全、语法高亮等功能,方便编写和调试。
  3. 脚本运行控制: 用户可以精细地控制脚本在哪些网页上运行。通过配置包含和排除的 URL 模式,可以实现很灵活的控制。
  4. 跨域访问: Tampermonkey 可以让脚本访问跨域的资源,突破了浏览器的同源策略限制。这为构建跨站应用程序提供了便利。
  5. 事件钩子: Tampermonkey 提供了许多内置的事件钩子,如页面加载、DOM 变化等,让用户可以在关键时间点运行自己的代码。
  6. 第三方库支持: Tampermonkey 支持在脚本中引用各种第三方 JavaScript 库,极大地扩展了用户的开发能力。

2. 篡改猴的安装

举例chroium内核浏览器（chrome、Edge、Arc） 打开chrome应用商店,在搜索栏中输入Tampermonkey或者篡改猴，选择如下图所示的第一个：

image.png

点击添加到浏览器中，添加成功后，会自动打开下面的页面。（浏览器扩展嘛，安装起来都这个套路！）

image.png

3. 脚本编辑

首先，可以先打开想要"篡改"的网页，在篡改猴插件工具上找到添加新脚本

image.png

点击后，默认打开了新建用户脚本的页面，脚本展示如下：

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

(function() {
    'use strict';

    // Your code here...
})();
  • @name:表示你的脚本的名称。
  • @match：就是要篡改的目标网页。
  • @icon：显示在脚本列表中的icon。

4.举例演示

4.1 篡改网页背景色

就先拿掘金的网页举例吧，咱篡改下试试。就拿这篇吧创作者训练营 · 助力创作者写出自己的技术好文!

// ==UserScript==
// @name         更改背景色
// @namespace    http://tampermonkey.net/
// @version      2024-08-08
// @description  try to take over the world!
// @author       You
// @match        https://juejin.cn/post/7383374760577826835?searchId=20240808112859C976525878BFFE42AF88
// @icon         https://www.google.com/s2/favicons?sz=64&domain=juejin.cn
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // Your code here...
    // 获取页面的body元素
    const body = document.body;
    // 定义新的背景色
    const newBackgroundColor = '#ff00ff'; // 这里使用紫红色作为示例，你可以根据需要更改
    // 更改背景色
    body.style.backgroundColor = newBackgroundColor;
    // 可选：添加一个控制台日志来确认脚本已运行
    console.log('背景色已更改为：', newBackgroundColor);
})();

这里就是将网页的背景色更改为亮丽显眼的紫红色，看下效果，效果没出来的，可以看下控制台有没有log出来。

image.png

4.2 篡改显示区域

好吧，八青妹承认了，篡改背景色这个功能无聊透顶,原本的背景色正常一些！接下来我们换个玩法，还是上述那篇文章，左侧有点赞评论收藏等功能，不想展示这块。例如我们经常访问一些网页的时候，会有广告区域，如何去掉广告区域，还自己的浏览器一片净土呢？

其实很简单，打开开发者控制台，找到对应的元素特征，然后拿到其dom元素，将其remove掉。

   // 在页面加载完成后执行
     window.addEventListener('load', function() {
           // 查找并删除 class 为 'article-suspended-panel' 的元素
        const suspendedPanel = document.querySelector('.article-suspended-panel');
        if (suspendedPanel) {
            suspendedPanel.remove();
            console.log('已删除 article-suspended-panel 元素');
        } else {
            console.log('未找到 article-suspended-panel 元素');
        }
    });

效果如下所示： image.png

4.3 增加交互

点击文章的标题，展示一个简易面板，提供四个水果的选项，选择后，将选择的内容填充的搜索栏。

 window.addEventListener('load', function() {
const titleElement = document.querySelector('.article-title');
const searchInput = document.querySelector('.search-input');
const fruits = ['苹果🍎', '香蕉🍌', '橘子🍊', '蓝莓🫐'];

if (titleElement && searchInput) {
    titleElement.addEventListener('click', function() {
        // 创建面板
        const panel = document.createElement('div');
        panel.style.position = 'absolute';
        panel.style.top = (titleElement.offsetTop + titleElement.offsetHeight) + 'px';
        panel.style.left = titleElement.offsetLeft + 'px';
        panel.style.backgroundColor = 'white';
        panel.style.border = '1px solid black';
        panel.style.padding = '10px';
        panel.style.zIndex = '1000';

        // 添加选项
        fruits.forEach(fruit => {
            const option = document.createElement('div');
            option.textContent = fruit;
            option.style.cursor = 'pointer';
            option.style.padding = '5px';
            option.addEventListener('click', function() {
                searchInput.value = fruit;
                document.body.removeChild(panel);
            });
            panel.appendChild(option);
        });

        // 添加面板到页面
        document.body.appendChild(panel);

        // 点击面板外部时关闭面板
        document.addEventListener('click', function closePanel(e) {
            if (!panel.contains(e.target) && e.target !== titleElement) {
                document.body.removeChild(panel);
                document.removeEventListener('click', closePanel);
            }
        });
    });
     });
}

image.png

5. 总结

虽然八青妹举的例子有点无聊，但是在实际工作和生活中，篡改猴是真的有用的。例如在开发后台管理平台的时候，有很多的登录权限，我们的浏览器能记住账号和密码，但是账号所对应的角色并没有自动跟随保存，这个时候，我们可以利用篡改猴录入对应账号对应的角色，在进行账号切换后且在登录前，就能知道该账号是什么环境下的什么角色。

再例如，我们在UI交互中，有时候需要经过一些复杂的UI交互之后，才能到达所要定位的状态。为了避免重复的操作这些UI交互，可以将这部分交给篡改猴的脚本。

avatar
文章
阅读
粉丝