Javascript 当ajax请求发生时运行代码的Chrome扩展

所以，给我的问题一个基本的描述

我有一个扩展，现在正在工作（最后），它将电话号码包装在一种标签中

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

例如，如果我单击一封hotmail电子邮件并将其打开，脚本就会工作，但只有当我刷新页面以便电子邮件加载并调用我的contentscript时，脚本才会工作

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

如果Chrome中有办法监听ajax请求（似乎有） 这就是我想要做的，但我不知道如何实现这一点。我把它当作听众吗

我找到了另一种基于DOM更改的方法，但这会导致加载花费很长时间，DOM中有太多的事情无法这样做。我需要监听AJAX请求，并在它们完成后再次运行代码

任何帮助，甚至是一个指向正确方向的指针都会很好=）

如果这是一个愚蠢的问题，请客气一点，我保证我一直在用谷歌搜索表单，寻找答案，但我似乎什么也找不到。有可能是因为我知道的还不够多，甚至连正确的问题都提不出来。我已经使用javascript大约两周了。。。所以我的学习曲线一直是艰难的

当你说

我找到了另一种基于DOM变化的方法， 但是，这使得装载需要很长时间，只是发生的事情太多了 在DOM中这样做。我需要倾听AJAX请求和 完成后再次运行我的代码

…在哪里使用突变事件或突变观察者？因为我想我应该解决这个问题。我以前从未和观察者做过任何事情，也从未使用过。它似乎可以做你想做的事情，只是在文档准备就绪/空闲（不确定是哪一个）之前它才开始观察，所以你可能需要扫描文档准备就绪，然后启动观察程序。
下面是我的测试代码（在内容脚本中）的样子

检查XMLHttpRequest的另一种方法是劫持它，只是它看起来像（在文档开始的内容脚本中）

…这是我在超级棒中学不到的。

---

但正如您现在可能知道的，这对于ajax驱动的站点来说是不够的。通常情况下，您必须为该站点编写特定的内容，否则突变观察者可能会满足您的需要。

这是使用

MutationObserver

更新的答案，因为

MutationSummary

不再工作：

var observer=新的MutationObserver（函数（mutationsList）{
log（`Something has change`）；
});
observer.observe（document.querySelector（'.whatever'）{
属性：正确，
characterData:true，
儿童名单：是的，
子树：真
});

• 确保将

  .which

  选择器更改为您感兴趣的类/id
• 确保在

  子树

  选项中指定

  true/false

  ，以防您对选择器的子项修改感兴趣或不感兴趣

---

chrome.webRequest.onCompleted.addListener（函数（）{/*此处的代码*/}）怎么样放在背景页。这是我的草稿答案：。对于德里克和罗布·W，我已经试着用你描述的方式实现了这一点。我首先在background.js中尝试了这一点：“chrome.webRequest.onCompleted.addListener（function（）{chrome.tabs.executeScript（null，{file:“typenex_contentscript.js”}）；”但这似乎并没有改变什么，我随后实施了Rob的方法，但没有结果。我是否需要将消息发送到我的内容脚本而不是执行它？我仍然不确定这方面的规则。另外，像hotmail.com这样的网站能够像他们那样更新网站的唯一方法就是使用XHRs，对吗？没有别的办法了？我确实给了我的扩展权限tabs@njfife如果你想让人们在评论中提到他们时得到通知，你需要在他们的名字前加上

@

符号。很抱歉，我花了很长时间才接受这个答案，我只是在一个不同的问题上才意识到该怎么做！所以我回来为你接受了，非常感谢！

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
    }]
});

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()+")()");