篡改猴，最强浏览器扩展，英文名Tampermonkey，最早出现在Firefox，名叫油猴（Greasemonkey ），两者有相似的功能和脚本语法，但并非同个扩展。

可以在页面注入JS脚本，实现一些功能。

最早写脚本始于18年玩新浪微博时，由于每次打开都会弹出安装Flash插件的提示，所以写了个脚本把提示窗移除。

本文以修改表格数据列为例，简单介绍篡改猴脚本开发。

目标页面，缺少金额数据，每次查看都要点详情进去，很不方便，更不利于对比，所以想直接显示在外面表格。

本例因涉及集团内部系统，只讲重点代码和注意点，不展示完整代码。

在插件点击【添加新脚本】会创建一个模板

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      2024-05-03
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

内部系统采用React16，要想直接获取数据实在艰难，所以换个思路，拦截ajax请求，拿到数据后直接插入表格，这里涉及http拦截，采用ajaxHooker.js这个库

// @run-at document-start
// @require https://scriptcat.org/lib/637/1.3.4/ajaxHooker.js#sha256=fWw0ORFWJPYQXZqlv9oxxC96PK/oGwgVpiWCDaC3YPU=

需要注意劫持库的加载，劫持发生的时机是其它库引入的时候，至少是http请求之前，因此脚本应运行于document-start阶段

其使用语法如下

ajaxHooker.hook(request => {
    console.log(request);
});

当页面发出ajax请求时，会被劫持，此时可以通过request.url判断是否为所需数据

ajaxHooker.hook(request => {
    if (request.url === '/api/v1/query') {
        request.response = res => {
          // res.responseText 为接口返回数据，可存起来使用
      }
    }
});

取到数据后，不要急着去修改表格，因为此时表格可能还未完成渲染，可以通过setTimeout做延迟修改，也可通过querySelector判断表格是否渲染完成，从而再做修改表格的操作

操作表格就跟平时操作DOM一样，这里不再讲述，值得一提的是像React或Vue这种单页面系统，篡改猴的脚步一旦注入，是一直存在的，要注意变量的使用，在做路由跳转时才不会相互干扰