javascript - 发生 ajax 请求时运行代码的 Chrome 扩展

Question

那么，对我的问题做一个基本的描述。

我有一个现在(终于)可以使用的扩展，它将电话号码包装在一种标签中。

它现在可以正常工作，但我对基于用户操作或基于 ajax 请求通过 JS 动态加载的任何内容有疑问

例如，如果我单击一封 hotmail 电子邮件并将其打开，该脚本会起作用，但只有在我刷新页面时才会起作用，以便电子邮件加载并调用我的内容脚本。

我考虑过让用户点击扩展图标来解决这个问题，但这并不是真正需要的功能。

如果 Chrome 中有一种方法可以监听 ajax 请求(似乎有)http://code.google.com/chrome/extensions/webRequest.html这就是我想做的，但我不确定如何实现。我把它当作一个倾听者吗？

我想出了另一种方法来根据 DOM 的变化来执行此操作，但这会使加载花费很长时间，DOM 中发生的事情太多而无法以这种方式进行。我需要监听 AJAX 请求并在它们完成后再次运行我的代码。

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

如果这是一个愚蠢的问题，请多多关照，我保证我一直在谷歌和搜索表格中寻找答案，但我似乎找不到任何东西。有可能我还不够了解，甚至无法提出正确的问题。我已经使用 javascript 大约两周了……所以我的学习曲线一直在艰难攀升。

Answer 1

当你说...

I figured out another way to do this based on when the DOM changes, but that made loads take a long time, there is just too much going on in the DOM to do it that way. I need to listen for AJAX requests and run my code again when they finish.

...您在哪里使用 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()+")()");

...这是我在 super 棒上学到的Supper Happy Fun Blog .
但正如您现在可能知道的那样，这对于 ajax 驱动的站点来说还不够。通常你必须为网站写一些特定的东西，或者 Mutation Observer 可能会满足你的需要。