Question

Chrome扩展程序可以使用chrome.webRequest.onBeforeRequest拦截对指定网址的所有网络请求。这不仅包括静态资产请求，还包括对AJAX，PJAX，favicons以及介于两者之间的所有内容的请求。

Apple提供了一些近似功能，例如beforeLoad（处理图像，CSS和JS）和beforeNavigate（处理整页加载）事件处理程序，但都没有捕获AJAX请求。我试图重载XMLHttpRequest以试图捕获AJAX加载无效（我可能做错了）。以下是我如何做到这一点的简短示例：

var originalOpen = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function(method, url, async, username, password) {
    console.log("overriden");
    return originalOpen.apply(this, arguments);
}

如何在Safari扩展程序中捕获所有Web请求（AJAX，CSS，JS等）？

Answer 1

更新：您可以在我为TimeCamp跟踪器写的第一个Safari扩展程序中检查整个代码流：https://github.com/qdevro/timecamp.safariextz

我已成功拦截所有AJAX调用（实际上响应对我来说很有趣，因为所有的魔法都发生了），~~但不幸的是我无法找到（还）一个解决方案将其发送回我的注入脚本（我仍然在努力）~~现在完全正常工作 - 将xhr引入注入的脚本：

我已经这样做了：

1）在注入的START脚本中，我已经在DOM中添加了另一个脚本（执行拦截的脚本）：

    $(document).ready(function(){
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = safari.extension.baseURI + 'path/to/your/script/bellow.js';
      document.getElementsByTagName('head')[0].appendChild(script);
    })

2）拦截代码使用this repository作为XMLHttpRequest对象的覆盖，我也稍微调整了一下，以便附加方法，url并向其发送数据以便当回复得到回复时很容易获得。

基本上，我已覆盖open()的{{1}}方法，以附加我在脚本中可能需要的值，并在XMLHttpsRequest方法中添加sentData作为好：

send()

然后，我在响应上添加了一个回调函数，当数据返回时，它会获得修改后的XMLHttpRequest对象，并且包含所有内容：url，method，sentData和responseText以及检索到的数据：

    var RealXHROpen = XMLHttpRequest.prototype.open;
    ...
    // Override open method of all XHR requests (inside wire() method
    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
      this.method = method;
      this.url = url;

       RealXHROpen.apply(this, arguments);
    }
    ...
    // Override send method of all XHR requests
    XMLHttpRequest.prototype.send = function(sentData) {
       ...
       this.sentData = sentData;
       ...
    }

为了将拦截脚本中的XHR对象发送回注入的脚本，我只需要像@Xan建议的那样使用DOM events（谢谢你）：

    AjaxInterceptor.addResponseCallback(function(xhr) {
      console.debug("response",xhr);
      // xhr.method - contains the method used by the call
      // xhr.url - contains the URL was sent to
      // xhr.sentData - contains all the sent data (if any)
      // xhr.responseText - contains the data sent back to the request

      // Send XHR object back to injected script using DOM events
      var event = new CustomEvent("ajaxResponse", {
        detail: xhr
      });

      window.dispatchEvent(event);
    });

    AjaxInterceptor.wire();

我在项目中使用的一些额外提示/（工作流程）优化：

我清理了GET网址并将所有参数（？＆amp;）移到了dataSent属性中;
我已合并此dataSent属性（如果有window.addEventListener("ajaxResponse", function(evt) { console.debug('xhr response', evt.detail); // do whatever you want with the XHR details ... }, false);方法）
我已经在请求发送时添加了一个标识符（时间戳），以便稍后匹配（请参阅下面的内容并了解相关信息）;
我已经向脚本发送了一个自定义事件，名为＆＃34; ajaxRequest＆＃34;为了准备/优化加载时间（我不得不使用CORS向一些外部API请求一些其他数据 - 通过将调用/响应来回传递给能够处理CORS的global.html），所以我没有＆＃39 ; t必须等待原始请求在发送我的API调用之前返回，但只是根据上面的时间戳匹配响应;

在Safari扩展程序中编写与Chrome的onBeforeRequest等效的内容

1 个答案: