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等)?
解决方法
我已成功拦截所有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调用之前返回,而只是根据上面的时间戳匹配响应;