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