React.js 微前端订阅主应用网络请求

Question

我有一个 React.js 应用程序（chrome 扩展微前端）被注入到另一个前端应用程序中。

我无权更改主应用程序代码。

是否可以订阅并查看主应用发出的 HTTP 请求？

谢谢。

Answer 1

您可以通过以下方式查看主应用执行的 HTTP 请求：

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)
}

更新：

当代码简单地粘贴到页面控制台时它可以工作，但不幸的是对于内容脚本，”内容脚本看到的window对象是不一样的window 页面看到的对象。"

解决方案来源：

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

灵感来自：

Access window variable from Content Script

附加设置：

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 
 */
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');

对于清单 V3：

清单更改：

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

Inject.js

的变化

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

React.js 微前端订阅主应用网络请求

React.js micro frontend subscribe to main app network requests

reactjs

google-chrome-extension

micro-frontend