The Long-lived connections section of the Message passing page is vague

[BenKey]

⚠️ This is for issues with the https://developer.chrome.com site, not Chromium itself. If you want to file a bug with Chromium (the open-source project behind Google Chrome and other browsers), please use https://crbug.com.

Describe the bug

The Long-lived connections section of the Message passing page is vague. This section contains the following code block that demonstrates how to open a channel from a content script.

var port = chrome.runtime.connect({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"});
});

The problem is that it does not include a code sample for the extension page. Instead it has the following vague paragraph.

---

Sending a request from the extension to a content script looks very similar, except that you need to specify which tab to connect to. Simply replace the call to connect in the above example with tabs.connect.

It would be far more helpful if the words "as follows" were added to the end of this paragraph followed by a second code block that demonstrates exactly how to use the tabs.connect method in this context.

To Reproduce Steps to reproduce the behavior:

1. Read the Long-lived connections section of the Message passing page.
2. Observe that the Long-lived connections is vague.

Expected behavior

There should be a code example for both the content script and the extension page in this section.

[guest271314]

An example of send messages to a Tab using chrome.runtie.sendMessage() and chrome.tabs.connect()

manifest.json

{
 "name": "Message passing: Tabs",
 "version": "1.0",
 "manifest_version": 3,
 "permissions": ["tabs"],
 "content_scripts": [{
    "matches": ["https://*.github.com/*"],
    "run_at:": "document_idle",
    "js": ["contentScript.js"]
 }],
 "background": {
   "service_worker": "background.js",
   "type": "module"
 },
 "action": {}
}

background.js

let port;

chrome.action.onClicked.addListener(async(tab)=>{
  {
    const message = await chrome.tabs.sendMessage(tab.id, {
      greeting: 'Hello.'
    });
    console.log('Message from chrome.tabs.sendMessage()', message);
  }
  if (!port) {
    port = chrome.tabs.connect(tab.id);
    port.onMessage.addListener((message)=>{
      console.log('Message from chrome.tabs.connect() Port', message);
    }
    );
    port.onDisconnect.addListener((e)=>{
      console.log(e);
    }
    );
    port.postMessage({
      greeting: 'Hello, again.'
    });
  }
}
);

contentSctipt.js

let port;

chrome.runtime.onMessage.addListener((message,sender,sendResponse)=>{
  console.log('Message from chrome.tabs.sendMessage() in extension', message);
  sendResponse({
    greeting: 'Hi.'
  });
}
);

chrome.runtime.onConnect.addListener((_)=>{
  port = _;
  port.onMessage.addListener((message)=>{
    console.log('Message from chrome.tabs.connect() Port in extension', message);
  }
  );
  port.onDisconnect.addListener((e)=>{
    console.log(e);
  }
  );
  port.postMessage({
    greeting: 'Hi, again.'
  });
}
);