I'm in the process of creating a basic Chrome extension, where I need to actively monitor the AJAX calls being made on the page.
Here is the code snippet I have implemented to listen to AJAX calls:
var isAjaxWorking = false;
//timeout
var timeout;
//create new AJAX listener
var s_ajax = new Object();
//override the send() method of XMLHttpRequest
s_ajax.tempSend = XMLHttpRequest.prototype.send;
s_ajax.callback = function (event){
isAjaxWorking = true;
timeout = 500; //5 seconds
var cycle = setInterval(function(){
timeout--;
if(timeout > 0){
if(event.readyState === 4){
isAjaxWorking = false;
clearInterval(cycle);
}
}
else{
console.log('s_ajax.callback : timeout');
clearInterval(cycle);
isAjaxWorking = null;
}
}, 10);
}
XMLHttpRequest.prototype.send = function(a, b) {
if (!a) var a = '';
if (!b) var b = '';
s_ajax.tempSend.apply(this, arguments);
s_ajax.callback(this);
}
When I directly inject this script into the console of the desired page, it works perfectly. However, when I attempt to execute it using chrome.tabs.executeScript() within my Chrome extension, it seems like everything gets erased right after the script execution. I suspect it's a simple oversight on my part, but I'm unable to identify the issue. I appreciate any guidance on this matter. Thank you in advance.