How can I retrieve the request that are being send and received from the server.
For example, when I look at the chrome devtool, I can see under network all the fetch/XHR requests being send and received.
What I want to be able to do is through my chrome extension, I want my inject.js to print these on the console but I can’t seem to be able to get a handle on it. Anyone knows how t have a simple script to catch request and print it on the console?
My manifest contains the following:
"host_permissions": [
"https://*.abc.com/path/*"
],
"content_scripts": [
{
"matches": ["https://*.abc/path/*"],
"js": ["inject.js"]
}
],
"web_accessible_resources": [
{
"resources": ["inject.js"],
"matches": ["<all_urls>"]
}
],
my inject.js is this
(function() {
// Intercept fetch requests
const originalFetch = window.fetch;
window.fetch = function(...args) {
console.log('Intercepted fetch request:', args);
return originalFetch(...args).then(response => {
const clonedResponse = response.clone();
// Read response body
clonedResponse.text().then(text => {
console.log('Fetch response text:', text);
});
return response;
}).catch(error => {
console.error('Fetch error:', error);
});
};
// Intercept XMLHttpRequest
const originalOpen = XMLHttpRequest.prototype.open;
const originalSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.open = function(method, url, ...rest) {
this._url = url;
this.addEventListener('load', function() {
console.log('Intercepted XMLHttpRequest:', {
method: method,
url: this._url,
responseText: this.responseText
});
});
originalOpen.apply(this, [method, url, ...rest]);
};
XMLHttpRequest.prototype.send = function(...args) {
console.log('Intercepted XMLHttpRequest send:', args);
originalSend.apply(this, args);
};
})();
Many thanks in advance