在ajax请求发生时运行代码的Chrome扩展程序

Question

所以,给出我的问题的基本描述.

我有一个现在正在工作的扩展(最后),它将一个标签包装在一起.

它现在正在工作,但我遇到的问题是基于用户操作或基于ajax请求通过JS动态加载的任何内容

例如,如果我单击一个Hotmail电子邮件并打开它,该脚本可以正常工作,但只有当我刷新页面以便电子邮件加载并调用我的内容脚本时.

我想通过让用户单击扩展的图标来解决这个问题,但这并不是所要求的功能.

如果Chrome中有一种方法可以收听ajax请求(似乎有)http://code.google.com/chrome/extensions/webRequest.html 这就是我想要做的,但我不知道如何实现这一点.我会把它当作听众吗？

我想出了另一种基于DOM何时更改的方法来实现这一点,但是这会使得加载需要很长时间,因此在DOM中进行的操作太多了.我需要监听AJAX请求并在完成后再次运行我的代码.

任何帮助甚至是正确方向的指针都会很棒=)

如果这是一个愚蠢的问题,请保持友好,我保证我一直在谷歌和搜索表格的答案,我似乎找不到任何东西.有可能我甚至不知道问正确的问题.我已经使用javascript大约两个星期了...所以我的学习曲线一直在攀爬.

Answer 1

当你说...

我想出了另一种基于DOM何时更改的方法来实现这一点,但是这会使得加载需要很长时间,因此在DOM中进行的操作太多了.我需要监听AJAX请求并在完成后再次运行我的代码.

...你在哪里使用Mutation Events或Mutation Observers？因为我认为Observers在哪里解决这个问题.我以前从未对Observers做过任何事情,并使用了Mutation Summary.它似乎能够做你想要的,除非它没有开始观察,直到文件准备好/闲置(不确定是哪个),所以你可能必须扫描文件准备好然后解雇观察者.
这是我的测试代码的样子(在内容脚本中)......

handleChanges = function(summaries) {
    // There may be more things to ignore
    var ignore = {
        SCRIPT: true,
        NOSCRIPT: true, 
        CDATA: true,
        '#comment': true
    }
    summaries.forEach(function(summary) {
        summary.added.forEach(function(node) {
            if (!ignore[node.nodeName] || (node.parentNode && !ignore[node.parentNode.nodeName]) && node.nodeValue.trim()) {
                node.nodeValue='PAEz woz ere - '+node.nodeValue;
            }
        })
    })

}

var observer = new MutationSummary({
    callback: handleChanges,
    // required
    rootNode: document,
    // optional, defaults to window.document
    observeOwnChanges: false,
    // optional, defaults to false
    queries: [{
        characterData: true
    }]
});

另一种检查XMLHttpRequest的方法是劫持它,只是它看起来像(在文档开头的内容脚本中).....

function injectScript(source) {

    var elem = document.createElement("script"); //Create a new script element
    elem.type = "text/javascript"; //It's javascript
    elem.innerHTML = source; //Assign the source
    document.documentElement.appendChild(elem); //Inject it into the DOM
}

injectScript("("+(function() {

    function bindResponse(request, response) {
        request.__defineGetter__("responseText", function() {
            console.warn('Something tried to get the responseText');
            console.debug(response);
            return response;
        })
    }

    function processResponse(request,caller,method,path) {
        bindResponse(request, request.responseText);
    }

    var proxied = window.XMLHttpRequest.prototype.open;
    window.XMLHttpRequest.prototype.open = function(method, path, async) {
            var caller = arguments.callee.caller;
            this.addEventListener('readystatechange', function() {
                if (this.readyState === 4)
                    processResponse(this,caller,method,path);
            }, true);
        return proxied.apply(this, [].slice.call(arguments));
    };
}).toString()+")()");

...我在非常棒的晚餐快乐趣味博客中学到的东西.
但正如你现在可能知道的那样,这对于ajax驱动的网站来说还不够.通常你必须为网站写一些特定的东西,或者Mutation Observer可能会满足你的需求.