Reactjs chrome扩展（内置React）和Web应用程序（也在React中）之间的通信

我正在构建React web应用程序和chrome扩展。 我是chrome扩展开发的新手

现在的情况是，我想将数据从chrome扩展发送到web应用程序。 我已经尝试过通过url发送它（通过从chrome扩展打开一个相同的源窗口，附加数据作为搜索参数）。 它适用于少量数据，但在大数据上会产生错误

我读过关于使用postMessage发送数据的文章，但不知道如何在为React开发的chrome扩展中使用它

// This is post message in componentDidMount of chrome extension.
componentDidMount() {
  window.postMessage({type: "FROM_PAGE", text: "My Text1"}, "*")
  // This above line is executed, successfully.

下面是react web应用程序

componentDidMount() {
       window.addEventListener("message", function(event) {

      if (event.source != window)
        return;

      if (event.data.type && (event.data.type == "FROM_PAGE")) {
       // We never reach here.

        console.log("Content script received: " + event.data.text);
      }
    }, false)
}

我们不在eventListener中接收消息。 如对发送数据有任何建议或解决方法，将不胜感激

Manifest.json

{
  "manifest_version": 2,
  "name": "HoneyComb",
  "description": "React based Honeycomb extension; a teaching assistant",
  "version": "0.0.0.1",
  "icons": { "128": "icon_128.png" },
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "Honeycomb Extension",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["event.js"],
    "persistent": true
  },
  "web_accessible_resources": ["index.css"],
  "content_scripts": [
    {
      "matches": ["*://www.vipkidteachers.com/*"],
      "css": [],
      "js": ["content.js"]
    }
  ],
  "permissions": ["*://*/*"]
}

event/src/index.js为空。 content/src/scripts包含所有React代码。

---

popup/src/scripts包含popup.html和react设置。

您需要一个内容脚本才能与网页通信。如果您已经有了，请向我们展示manifest.json的

content\u scripts

部分，或者如果您使用executeScript，请展示相应的代码。顺便说一句，这个问题可能完全是由其他原因引起的，因此您应该在devtools中通过在两行（postMessage和event listener）上设置断点来调试它。我已经编辑了消息。另外，还有其他发送数据的方法吗？是的，是直接方法，请参阅，您需要一个内容脚本才能与网页通信。如果您已经有了，请向我们展示manifest.json的

content\u scripts

部分，或者如果您使用executeScript，请展示相应的代码。顺便说一句，这个问题可能完全是由其他原因引起的，因此您应该在devtools中通过在两行（postMessage和event listener）上设置断点来调试它。我已经编辑了消息。另外，还有其他发送数据的方法吗？是的，直接方法，请参阅