chrome devtool ext. receive postMessage - google-chrome-extension

Question

I'm trying to send over a json-formatted object from my React-application to my chrome-extension devtool. In my React application I have a method that runs window.postMessage(data, '*'). I'm really not sure what the relation is between the background.js and content-scripts.
I'm able to receive this data through content-scripts.js by adding window.addEventListener('message') but I don't get how to send this data over to my 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:///*"
]
}
This is the script file I'm injecting into my 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)
})
})
content-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')
})
})
I'm not ever receiving data from my background.js or the devtools.js after my data handler in content scripts runs chrome.extension.sendMessage()