Getting System error: net::ERR_BLOCKED_BY_CLIENT when trying to pass a message from my Web App to my extension

It appears that my extension is blocking the message sent from my web app. I am getting these two errors:

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

and

DevTools failed to load source map: Could not load content for chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/atoms.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

This is the code in App.js:

chrome.runtime.onConnect.addListener(function (port) {
console.assert(port.name == "knockknock");
port.onMessage.addListener(function (msg) {
    alert("some sort of message came");
    if (msg.joke == "Knock knock") {
        port.postMessage({ question: "Who's there?" });
        alert("hit1");
    }
    else if (msg.answer == "Madame") {
        port.postMessage({ question: "Madame who?" });
        alert("hit2");
    }
    else if (msg.answer == "Madame... Bovary") {
        port.postMessage({ question: "I don't get it." });
        alert("hit3");
    }
    });
});

And this is the code in my web app:

    var port = chrome.runtime.connect("dlmjaemnhmiffoeadnfllpnboabobjen", {name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
  if (msg.question == "Who's there?")
    port.postMessage({answer: "Madame"});
  else if (msg.question == "Madame who?")
    port.postMessage({answer: "Madame... Bovary"});
});

Here is an excerpt from my manifest file:

  "externally_connectable": {
"ids":["*"],
"matches": ["https://d3coaw4y9895d5.cloudfront.net/"],
"accepts_tls_channel_id": false
    
  },

Is there anything I am missing here? I pulled this straight out of the Chrome Docs example and had to tweak it for web application use.