Question

所以，给出我的问题的基本描述。

我有一个现在正在运行的扩展程序（最后），它将phonenumbers包装在一种标记中。

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

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

我想通过让用户点击扩展程序的图标来解决这个问题，但这实际上不是所请求的功能。

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

我想出了另一种方法，可以根据DOM的变化来实现这一点，但是这会导致加载需要很长时间，因此在DOM中进行的操作太多了。我需要监听AJAX请求并在完成后再次运行我的代码。

Anyhelp甚至指向正确方向的指针都很棒=）

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

Answer 1

当你说...

根据DOM更改的时间，我想出了另一种方法但这使得负载需要很长时间，而且还有太多的问题在DOM中这样做。我需要监听AJAX请求和完成后再次运行我的代码。

...你在哪里使用Mutation Events或Mutation 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()+")()");

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

Answer 2

这是使用MutationObserver的更新答案，因为MutationSummary不再起作用：

var observer = new MutationObserver(function(mutationsList) {
  console.log(`Something has changed`);
});

observer.observe(document.querySelector('.whatever'), {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true
});

请确保将.whatever选择器更改为您感兴趣的任何类/ id。
如果您对选择器的子级修改感兴趣，请确保在true/false选项中指定subtree。

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

2 个答案: