we are looking to read/save a POST REQUEST’s body/payload through chrome extension.

Scenario: a target webpage will submit a post request to server once in a while.
Requirement: chrome extension’s popup.html has a button with id=’startIntercept’ and upon clicked we need to save the next firing post request’s all details(headers, payload) to a session variable.

we only need to save what post request is been sent from current tab. we are not bothered what response we received for the post request.

through a source we came to know a way to achieve it by “Overwriting window.XMLHttpRequest.prototype.open method” by saving old open method to a variable and create a new open method to intercept any request and save it then pass parameters to old open method to get usual expected page functionality.

code used:

//popup.js
let startIntercept = document.getElementById("startIntercept");

startIntercept.addEventListener("click", async () => {
    let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
    chrome.scripting.executeScript({
        target: { tabId: tab.id },
        files: ["startWork.js"],
    });
});


//startWork.js
let oldXHROpen = window.XMLHttpRequest.prototype.open;
console.log('script injected');
window.XMLHttpRequest.prototype.open = function() {
  this.addEventListener("load", function() {
    const responseBody = this.responseText;
    sessionStorage.setItem('payload', responseBody );
  });
  return oldXHROpen.apply(this, arguments);
};

//manifest.json
    "name": "extTracker",
    "description": "want to save post request details",
    "version": "1.0",
    "manifest_version": 3,
    "background": {
        "service_worker": "background.js"
    },
    "host_permissions": ["<all_urls>"],
    "permissions": ["storage", "activeTab", "scripting"],
    "web_accessible_resources": [{
        "resources": ["/assets/media/blinkSd.mp3"],
        "matches": ["<all_urls>"],
        "use_dynamic_url": true
    }],
    "action": {
        "default_popup": "popup.html",
    },

*once we have a working model we will enhance manifest file/filter requests to intercept accordingly

the above code fails to save/intercept any request made from current tab even through script ‘startWork.js’ is successfully injected.

why it fails?? any better approach to achieve this functionality?

Your Expertise and Time are very much appreciated. Thank You