油猴脚本在动态获取页面中的利用

起因:

有个网页上的内容我想借助 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!
            }
        }
    });
});

推荐阅读:

为XHR对象所有方法和属性提供钩子 全局拦截AJAX

Ajax-hook

Tag:javascripttampermonkeyXMLHttpRequest Published under (CC) BY-NC-SA
comments powered by Disqus