How to establish connection when "Receiving end does not exist" error occurs (manifest version 3)?

I am building a chrome-extension which collects text from the current page/tab, and accumulate that into another HTML page (local), say to result.html.

So, we need to send selected text from the current page to the background script,

then background script to the HTML page.

But I get error if the HTML is not open already,

when the HTML page is open, even then I get an error first time:

background.js:1 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

If I close the page, then run again, this error will keep happening.

What is the solution ? Thanks.

I tried the solution presented in this post but nothing worked. Probably I am missing something, but I could not find it. My code in given in the comment. I think due to manifest version 3, that answer needs updating.

from How to establish connection when "Receiving end does not exist" error occurs (manifest version 3)?