2

我正在尝试制作类似 Redux devtools 的东西。我想将数据从 React 应用程序传递到 chrome 扩展。数据应该从 React 渲染函数传递，并在扩展中使用响应式重新渲染。我正在尝试在应用程序的窗口中设置变量（函数）以在应用程序内将其用作回调并将消息发送到扩展。现在我有以下架构：

  • 内容脚本连接到扩展chrome.runtime.connect(runtimeId);
  • 内容脚本注入 Web 可访问脚本：
  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 可访问脚本设置窗口变量并将消息发送到后台脚本：
  const runtimeId = "";
    if (props) {
      chrome.runtime.sendMessage(runtimeId, JSON.stringify(props));
    }

};
window.testFunction = testFunction;
  • 后台脚本侦听外部消息： chrome.runtime.onMessageExternal.addListener 并将数据发送到扩展应用程序（面板 devtools）
const port = chrome.runtime.connect(runtimeId);
port.postMessage({ props: JSON.stringify(data) });

一切正常，但这个解决方案需要设置 externally_connectable url 和第二个域级别，（现在它只适用于 localhost "externally_connectable": { "matches": ["*://127.0.0.1/*"] }）但我想在任何地方使用扩展。所以我确信有另一个正确的解决方案可以做到这一点，但我仍然没有找到它。

4

0 回答 0