How to pass data from web application (React) to chrome extension (dev panel)

Question

I'm trying to make something like Redux devtools. I want to pass data from React application to chrome extension. Data should be passed from React render function with reactive rerender in extension. I'm trying to set variable (function) in application's window to use it inside app as callback and send message to extension. Now I have following architecture:

• content script connects to extension chrome.runtime.connect(runtimeId);
• content script injects web accessible script:

  var s = document.createElement("script");
  s.setAttribute("type", "text/javascript");
  s.setAttribute("src", file);
  document.documentElement.appendChild(s);
}
injectScript(chrome.extension.getURL("/scripts/war.js"), "body");

• web accessible script set window variable and send message to background script:

  const runtimeId = "";
    if (props) {
      chrome.runtime.sendMessage(runtimeId, JSON.stringify(props));
    }

};
window.testFunction = testFunction;

• background script listens external messages: chrome.runtime.onMessageExternal.addListener and send data to extension app (panel devtools)

const port = chrome.runtime.connect(runtimeId);
port.postMessage({ props: JSON.stringify(data) });

And everything works correct, but this solution requires setting externally_connectable urls with 2nd domain level, (now it works only for localhost "externally_connectable": { "matches": ["*://127.0.0.1/*"] }) but I want to use extension everywhere. So I'm sure that there is another correct solution to do this but I still haven't found it.