chrome devtool ext。收到postMessage

Question

我正在尝试将一个json格式的对象从我的React-application发送到我的chrome-extension devtool。在我的React应用程序中，我有一个运行window.postMessage(data, '*')的方法。我真的不确定background.js和content-scripts之间的关系。 我可以通过添加window.addEventListener('message')通过content-scripts.js接收这些数据，但我不知道如何将这些数据发送到我的devtools.js

的manifest.json

{
  "name": "visualize-test",
  "version": "1.0.0",
  "description": "testing chrome-ext order of execution",
  "devtools_page": "devtools.html",
  "manifest_version": 2,
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script.js"]
    }
  ],
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*",
    "file:///*"
  ]
}

这是我正在注入我的devtools.html的脚本文件

devtools.js

chrome.devtools.panels.create("visualize-test", null, "devtools.html", () => {
  const port = chrome.extension.connect({
    name: "visualize-test"
  })
  port.onMessage.addListener(data => {
    console.log('RECEIVING DATA IN CONTENT-SCRIPTS: ', data)
  }
  chrome.extension.onMessage.addListener(function (e) {
    console.log('DEVTOOLS MESSAGE HANDLER: ', e)
  })
})

内容scripts.js中

window.addEventListener('message', e => {
  chrome.extension.sendMessage(e, (message) => {
    console.log('Received message..sending to chrome extension: ', e.data)
  })
})

background.js

chrome.extension.onConnect.addListener(function (port) {
  console.log('Connected to PORT: ', port)
  chrome.extension.onMessage.addListener(function (message, sender) {
    console.log('BACKGROUND.JS: ', message)
    port.postMessage(message)
  })

  port.onDisconnect.addListener(function (message) {
    console.log('PORT DISCONNECTED')
  })
})

在内容脚本中的数据处理程序运行chrome.extension.sendMessage()后，我从未收到来自background.js或devtools.js的数据