script to overwrite fetch is not working using chrome.scripting.executeScript

Question

I am trying to run a script to intercept fetch requests from background.js. I am using chrome.scripting.executeScript in order to run the script.

chrome.contextMenus.onClicked.addListener((info, tab) => {
chrome.scripting
    .executeScript({
        target : {tabId : tab.id},
        files : [ "scr.js" ],
    })
    .then(() => console.log("script injected"));
})

In the script scr.js, I am trying to process the response which is not working. When I am running this same code from debug console, it runs perfectly fine.

const ofetch = window.fetch;
window.fetch = async(...args) => {
var result = await ofetch(...args);
result
  .clone()
  .json()
  .then(body => console.log(body)); // intercept response here
return result;
};
alert("hi")

Note: alert('hi') for debugging which is running fine, but the fetch method is not overwritten. This whole code again runs fine from the console, including the fetch part.