Chrome extension, send message from panel.js to content script

I'm trying to intercept youtube requests response from a devtool panel and send it to the content or background script of a Chrome extension. but I can't get it to work.

There is loads of exemple online but most of them use Manifest V2 and I really want to make it work on V3.

I don't know which method to use for sending messages to the content or background script from the panel.js, nor do I know how to listen for incoming messages from the panel in those scripts.

And I don't know if I need to add more permissions in my manifest for this to work :

{
  "manifest_version": 3,
  "name": "Already Seen",
  "version": "1",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery-3.6.0.min.js", "content.js"],
      "css": ["avatar.css"]
    }
  ],
  "devtools_page" : "devtools.html",
  "action": {
    "default_icon": "icon.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["identity", "storage", "tabs", "webRequest"],
  "host_permissions": ["https://www.youtube.com/", "https://youtube.com/"],
  "externally_connectable": {
    "matches": ["https://youtube.com/*"]
  },
  "oauth2": {
    "client_id": "***************",
    "scopes": [
      "https://www.googleapis.com/auth/userinfo.email",
      "https://www.googleapis.com/auth/userinfo.profile"
    ]
  }
}

devtools.html

<script src="devtools.js"></script>

devtools.js

chrome.devtools.panels.create("Already Seen", "icon.png", 'panel.html');

panel.html

<html>
    <body>
        <script src="panel.js"></script>
    </body>
</html>

panel.js

chrome.devtools.network.onRequestFinished.addListener((request) => {
  request.getContent((body) => {
    if (!request.request || !request.request.url) return;
    // I NEED TO SEND THE MESSAGE HERE TO BACKGROUND.JS OR CONTENT.JS
  });
});

I found another way of doing this by using the chrome.debbuger in the background script but it shows "... started debugging this browser" on top of every pages.