ajax – 在Safari扩展程序中写一个与Chrome的onBeforeRequest等价的内容

前端之家收集整理的这篇文章主要介绍了ajax – 在Safari扩展程序中写一个与Chrome的onBeforeRequest等价的内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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等)?

解决方法

更新:您可以在我为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并向其发送数据,以便在响应返回时轻松可用.

基本上,我已经覆盖XMLHttpsRequest的open()方法来附加我在脚本中可能需要的值,并在send()方法添加sentData:

var RealXHROpen = XMLHttpRequest.prototype.open;
    ...
    // Override open method of all XHR requests (inside wire() method
    XMLHttpRequest.prototype.open = function(method,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;
       ...
    }

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

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

为了将XHR对象从拦截脚本发送回注入的脚本,我只需要像@Xan建议的那样使用DOM events(谢谢):

window.addEventListener("ajaxResponse",function(evt) {
      console.debug('xhr response',evt.detail);
      // do whatever you want with the XHR details ...
    },false);

我在项目中使用的一些额外提示/(工作流)优化:

>我已经清理了GET url并将所有参数(?&)移动到dataSent属性中;>如果有的话,我已经合并了这个dataSent属性(在send(data)方法中)>我已经在请求发送(时间戳)上添加了一个标识符,以便以后匹配它(请参阅下面的点并获得想法);>我已经向名为“ajaxRequest”的脚本发送了一个自定义事件,以便准备/优化加载时间(我不得不使用CORS向一些外部API请求一些其他数据 – 通过将调用/响应来回传递给全局.html能够处理CORS),所以我不必等待原始请求在发送我的API调用之前返回,而只是根据上面的时间戳匹配响应;

猜你在找的Ajax相关文章