2

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.

Vitaliy Petrenko
  • 21
  • 3
  • externally_connectable doesn't allow that as you already know. So the only solution is to use [DOM messaging](https://stackoverflow.com/a/19312198) to the content script, which will then relay the message to the background script. And vice versa. – wOxxOm Oct 16 '20 at 04:36
  • [Official way](https://developer.chrome.com/extensions/content_scripts#host-page-communication) to communicate with injected scripts – hindmost Oct 16 '20 at 10:34

0 Answers0