Chrome native messaging: page cannot communicate with extension

Question

I'm writing a simple Chrome Extension that communicates with a Native Host using Native messaging. I've closely followed the Chrome documentation for native messaging (extension <> native host) and also for host-page communication but I have to say that they leave a lot of important details open.

I can launch the native host without problems from the extension and communication between the extension and the host works as it should. However, none of the "front tiers" (page, content script and background script) can talk to each other.

The tiers are as follow:

The page:

window.postMessage({ type: "TO_THE_EXTENSION", text: "Hello from the webpage!" }, "*");
// this never reaches the content script

contentscript.js (script seems to load correctly on the page)

var port = chrome.runtime.connect(); // this throws an error

window.addEventListener("message", (event) => {
  // We only accept messages from ourselves
  if (event.source != window)
    return;

  if (event.data.type && (event.data.type === "TO_THE_EXTENSION")) {
    console.log("Content script received: " + event.data.text);
    port.postMessage(event.data.text);
  }
}, false);

The first line of the content script immediately throws

Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.

background.js (this works when reloading the extension from the Extensions toolbar)

var port = chrome.runtime.connectNative('my.example.app.com');

port.onMessage.addListener(function(msg) {
  console.log("Received" + msg);
});
port.onDisconnect.addListener(function() {
  console.log("Disconnected");
});
port.postMessage( {'text': 'Hello'} );

manifest.json

{
  "name": "Simple extension",
  "description": "Simple extension using native messaging",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
   {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["contentscript.js"]      
   }
  ],
  "background": {
      "service_worker": "background.js"
  },  
  "permissions": ["nativeMessaging"]
}

Any help is appreciated, and pointers to documentation that explains how the whole page -> content script -> background script -> native host chain is supposed to actually work. I can't believe that Chrome documentation doesn't have a minimal, complete and verifiable example of an extension using native messaging.