javascript - 快速检测 JS 事件(如 Facebook 消息)

Question

我需要从 Greasemonkey 脚本中设置什么样的处理程序/ Hook 来捕获小的变化，例如添加新的页面元素(考虑 FB 消息..)？我可以在绘制元素之前更改样式和innerhtml吗？

Answer 1

您可以覆盖许多 native 函数。如果是元素创建，您将覆盖 document.createElement:

//Remember the old function refference
var old_createElement = document.createElement; 
//Override the native function
document.createElement = function(tagName) {
    //Our own script for the function
    if(!confirm("Element "+tagName+" is being created. Allow?")) 
         throw new Error("User denied creation of a element.");
    else 
        //And eventual call for the original function
        return old_createElement(tagName);
}

关于DOM元素，似乎有no means of capturing the DOM parser element creation 。 (从 HTML 字符串创建)

类似地，您可以覆盖 AJAX 方法，事实上我已经在 facebook 上这样做了，以查看消息是如何发送的 - 我注意到它们与大量其他数据一起发送。

这是我用于此目的的greasemonkey 脚本的一部分:

function addXMLRequestCallback(event, callback){
    var oldSend, i;
    if( XMLHttpRequest.callbacks!=null ) {
        // we've already overridden send() so just add the callback
          //XMLHttpRequest.callbacks.push( callback );
        if(XMLHttpRequest.callbacks[event]!=null)
          XMLHttpRequest.callbacks[event].push(callback);
    } else {
        // create a callback queue
        XMLHttpRequest.callbacks = {send:[], readystatechange:[]};
        if(XMLHttpRequest.callbacks[event]!=null)
          XMLHttpRequest.callbacks[event].push(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.send.length; i++ ) {
                XMLHttpRequest.callbacks.send[i].apply( this, arguments );
            }
            /*if(typeof this.onreadystatechange == "function")
              callbacks.readystatechange.push(this.onreadystatechange);*/
            var old_onreadystatechange = this.onreadystatechange;
            this.onreadystatechange = function(event) {
              for( i = 0; i < XMLHttpRequest.callbacks.readystatechange.length; i++ ) {
                  try {
                    XMLHttpRequest.callbacks.readystatechange[i].apply( this, arguments );
                  }
                  catch(error) {
                    console.error(error);
                  }
              }
              if(typeof old_onreadystatechange == "function") {
                  old_onreadystatechange.apply(this, arguments)
              }
            }
            // call the native send()
            oldSend.apply(this, arguments);
        }
    }
}
//Usage
addXMLRequestCallback( "send", function(data) {
   console.log(data);
});
addXMLRequestCallback( "onreadystatechange", ...);

我也经常使用MutationObserver在用户脚本中。 At 允许监视属性或子节点，并为每个添加/删除的节点调用回调。我不确定性能有多好以及连接正确的节点有多容易。

如果您最终成功捕获 Facebook 聊天消息容器和/或墙上帖子的创建，我真的很想看看您是如何做到的。很长一段时间，我都在考虑添加 Markdown在Facebook上。很多 friend 在这里分享源代码，但它几乎不可读。