from–https://blog.xavierskip.com/2019-04-20-hook-xhr/
起因：
有个网页上的内容我想借助 Tampermonkey 脚本进行修改，但是这个网址的页面基本上都是使用 ajax 动态获取的，页面 URL 就是一个首页URL总是不变的，油猴脚本生效的时候页面内容还没有得到无法完成操作，我要等到获取到这个页面的内容后才能进行修改，该如何利用 Tampermonkey实现呢？
思考：
开始我发现了获取这个页面内容的 js 函数，想通过 hook 这个函数来到达目的，试了一番发现这个函数也是 ajax动态加载的，看来只有 hook XMLHttpRequest 喽！
解决：
显然这种问题别人已经遇到过了
Add a “hook” to all AJAX requests on a page
因为我们想要编辑的页面上是通过 ajax 获取的，而且获取页面的 js 函数也是动态获取的，也没法通过提前 hook 函数的方式来改变或者加 callback，所以我们只有 hook ajax requests了。
不过是 hook 了所有的 ajax requests，但是我们可以根据xhr.responseURL 来判断是不是执行了我们需要的位置。
疑问：
有时候接口 URL 是相同的，只是提交的数据 request form data 不同，该如何区分呢？
javascript 的 apply 函数的作用没想清楚！
function addXMLRequestCallback(callback){
var oldSend, i;
if( XMLHttpRequest.callbacks ) {
// we've already overridden send() so just add the callback
XMLHttpRequest.callbacks.push( callback );
} else {
// create a callback queue
XMLHttpRequest.callbacks = [callback];
// store the native send()
oldSend = XMLHttpRequest.prototype.send;
// override the native send()
XMLHttpRequest.prototype.send = function(){
// process the callback queue
// the xhr instance is passed into each callback but seems pretty useless
// you can't tell what its destination is or call abort() without an error
// so only really good for logging that a request has happened
// I could be wrong, I hope so...
// EDIT: I suppose you could override the onreadystatechange handler though
for( i = 0; i < XMLHttpRequest.callbacks.length; i++ ) {
XMLHttpRequest.callbacks[i]( this );
}
// call the native send()
oldSend.apply(this, arguments);
}
}
}
addXMLRequestCallback( function( xhr ) {
xhr.addEventListener("load", function(){
if ( xhr.readyState == 4 && xhr.status == 200 ) {
// console.log( xhr.responseURL );
if ( xhr.responseURL.includes("url") ) {
console.log(xhr);
//do something!
}
}
});
});