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

Question

我正在构建一个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并作出反应。