I am making a chrome extension that communicates natively with a desktop c# console app, that part works nicely, but I also need it to receive messages from a web application upon opening the web site. When I try and do that it throws an error saying 'Could not establish connection. Receiving end does not exist.'.

Here is my popup.tsx file which gets compiled with webpack to a popup.js file:

import { Button, TextField } from "@mui/material";
import React, { useEffect, useState } from "react";
import * as ReactDOM from "react-dom";
import HttpClient from "./services/httpClient";

export const Popup: React.FC<any> = () => {
  const [text, setText] = useState(null);
  const handleStatusInput = (e) => setText(e);
  const httpClient = new HttpClient();
  const [loaded, setLoaded] = useState<boolean>(false);

  const [name, enterName] = useState("");
  const handleSubjectInput = (e) => enterName(e.target.value);
  
  chrome.runtime.onMessageExternal.addListener(
    function(request, sender, sendResponse) {

      if (request.openUrlInEditor)
        console.log(request.openUrlInEditor)
    });


  var port = chrome.runtime.connectNative("com.vizibit.test");

  port.onMessage.addListener(function (msg) {
    enterName(msg.data);
  });


  // port.onDisconnect.addListener(function () {
  //   console.log("Disconnected");
  // });
  useEffect(() => {
    port.postMessage({ text: "matej" });
  }, []);

  return (
    <div style={{ padding: "20px" }}>
      <TextField
        style={{ width: "100px", marginBottom: "20px" }}
        className="textBox"
        id="name"
        label="Text"
        value={name}
        onChange={handleSubjectInput}
        margin="none"
        fullWidth
      />

      <Button
        style={{
          border: "1px solid gray",
          width: "100px",
          marginBottom: "20px",
        }}
        onClick={() =>
          chrome.runtime.sendNativeMessage(
            "com.vizibit.test",
            { text: name },
            function (response) {
              enterName(response.data);
            }
          )
        }
      >
        :)
      </Button>
      {name != null && (
        <div>
          <div>
            <h1>{name}</h1>
          </div>
        </div>
      )}
    </div>
  );
};

export default Popup;
ReactDOM.render(<Popup />, document.getElementById("root"));

This is the dist folder:

And manifest.json:

{
  "name": "Native Messaging Example",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "Send a message to a native application.",
  "permissions": [
    "nativeMessaging"
  ],
  "host_permissions": [
    "*://*/*"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [{
    "matches":["https://[url-hidden-for-privacy]/*"],
    "js":["content.js"]
  }],
  "externally_connectable": {
    "matches":["https://[url-hidden-for-privacy]/*"]
  }
  
}

content.js:

var editorExtensionId = "[hidden-for-privacy]";

// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: "banana"},
  function(response) {
      console.log(response)
    if (!response.success)
      handleError(url);
  });