Question

我想开发Chrome扩展程序，想象一下，当Facebook加载时，您可以在其上添加额外的JS。

但我的问题是我无法修改后来内容的DOM，这意味着当用户向下滚动时出现的新加载的内容。

所以我想用JavaScript检测XHR。

我试过

send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {

    /* Wrap onreadystaechange callback */
    var callback = this.onreadystatechange;
    this.onreadystatechange = function() {             
         if (this.readyState == 4) {
             /* We are in response; do something, like logging or anything you want */
                        alert('test');
         }
         callback.apply(this, arguments);
    }

    _send.apply(this, arguments);
}

但这不起作用..任何想法？

Answer 1

除了Arun的正确评论，你应该使用_send，因为内容脚本的工作原理，你的方法不起作用。

内容脚本中运行的代码在isolated environment中运行，以防止它与页面自己的代码冲突。所以它不像你描述的那样 - 你不仅仅是在页面中添加JS，而是让它独立运行。因此，您的XHR替换只会影响扩展程序内容脚本中的XHR调用，而不会影响页面。

可以inject the code into the page itself。这将影响页面~~中的XHR，但如果相关页面的内容安全策略不允许内联代码，则可能无法在所有页面上运行。似乎Facebook的CSP会允许这样做。~~ Page CSP根据the docs不应该成为问题。所以，这种方法应该有效，请参阅我链接的问题。

那就是说，你并没有专门寻找AJAX调用，你正在寻找插入DOM中的新元素。您无需使用DOM MutationObservers修改网页代码即可检测到该内容。

有关详细信息，请参阅this answer。

Answer 2

要检测网页上的AJAX调用，您必须直接在该页面中注入代码，然后调用.ajaxStart或.ajaxSuccess

示例：

// To Successfully Intercept AJAX calls, we had to embed the script directly in the Notifications page
var injectedCode = '(' + function() {
    $('body').ajaxSuccess(function(evt, request, settings) {
        if (evt.delegateTarget.baseURI == 'URL to check against if you want') {
            // do your stuff
        }
    });
} + ')();';
// Inserting the script into the page
var script = document.createElement('script');
script.textContent = injectedCode;
(document.head || document.documentElement).appendChild(script);
script.parentNode.removeChild(script);

使用javascript检测页面上的XHR

2 个答案: