React.js micro frontend subscribe to main app network requests

Question

I have a React.js app (chrome extension micro frontend) that is injected into another frontend app.

I have no permissions to alter the main app code.

Is it possible to subscribe and see the HTTP requests made by the main app?

Thanks.

Answer 1

Here's how you can see what HTTP requests does the main app do:

const windowFetch = window.fetch

window.fetch = function (reqestUrl) {
  console.log('reqestUrl: ' + reqestUrl)
  console.log('arguments: ' + JSON.stringify(arguments)) // method, headers, body

  return windowFetch.apply(this, arguments)
}

Update:

It works when the code is simply pasted into the page console, but unfortunately for the content script, "The window object the content script sees is not the same window object that the page sees."

Solution credit:

https://gist.github.com/devjin0617/3e8d72d94c1b9e69690717a219644c7a

Inspired by:

Access window variable from Content Script

Aditional setup:

manifest.json (V2)

{
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["inject.js"],
      "all_frames": true
    }
  ],
  "web_accessible_resources": [
    "content.js"
  ]
}

content.js

console.log(window);

inject.js

/**
 * injectScript - Inject internal script to available access to the `window`
 *
 * @param  {type} file_path Local path of the internal script.
 * @param  {type} tag The tag as string, where the script will be append (default: 'body').
 * @see    {@link http://stackoverflow.com/questions/20499994/access-window-variable-from-content-script}
 */
function injectScript(file_path, tag) {
    var node = document.getElementsByTagName(tag)[0];
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', file_path);
    node.appendChild(script);
}
injectScript(chrome.extension.getURL('content.js'), 'body');

For Manifest V3:

Changes in Manifest:

 "web_accessible_resources": [
   {
     "resources": ["content.js"],
     "matches": ["https://*.anywebsite.com/*"]
   }
 ]

Changes in Inject.js

injectScript(chrome.runtime.getURL('content.js'), 'body');