Chrome 本机消息传递：页面无法与扩展程序通信

如何解决Chrome 本机消息传递：页面无法与扩展程序通信

我正在编写一个简单的 Chrome 扩展程序，它使用本机消息传递与本机主机进行通信。 我已经密切关注 native messaging（扩展 本机主机）和 host-page communication 的 Chrome 文档，但我不得不说他们留下了许多重要的细节。

我可以毫无问题地启动本机主机，并且扩展程序和主机之间的通信可以正常工作。 但是，所有“前端”（页面、内容脚本和后台脚本）都不能相互通信。

层级如下：

页面：

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

contentscript.js（脚本似乎在页面上正确加载）

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);

内容脚本的第一行立即抛出

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

background.js（这在从扩展工具栏重新加载扩展时有效）

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"]
}

感谢任何帮助，并提供指向文档的指针，这些文档解释了整个 page -> content script -> background script -> native host 链应该如何实际工作。我不敢相信 Chrome 文档中没有使用本机消息传递的扩展程序的最小、完整且可验证的示例。