Sending message to extension from web page

Hi, im trying to send message from web page to my extension but i couldn’t get it to work. I tried as in the sample extension in the link below but it didnt work and the sample itself does not work either. Is there a working sample i can use? Thank you for your help.

Here is my code ;

web-page.js

function messageContentScript() {
  window.postMessage({
    direction: "from-page-script",
    message: "Message from the page"
  }, "*");
}

content-script.js

window.addEventListener("message", (event) => {
  if (event.source == window &&
      event.data &&
      event.data.direction == "from-page-script") {
    console.log("Content script received message: \"" + event.data.message + "\"");
  }
});

manifest.json

{

  "manifest_version": 2,
  "name": "Page to extension messaging",
  "description": "Test",
  "version": "1.0",
  "applications": {
    "gecko": {
      "id": "test@sample.extensions.thunderbird.net",
      "strict_min_version": "74.0b2"
    }
  },

"content_scripts": [
    {
        "matches": ["*://localhost:44383/*"],
        "js": ["content-script.js"]
    }
]

First, to paste code here, place ``` on the line before and after the code.

Second - your matches value in the content script looks wrong, shouldn’t there be a star if you are using a wild card?
Also, add some console.log to your content script to be 100% sure it’s being injected into the page.

The stars disappeared after copying the code. I edited the message. Also there is already console.log in the content-script. Where do you want me to add?

Oh, sorry about that, if you are sure the content script is running, let’s investigate further.

From what I can see, it all looks fine (I have a similar code in my addon and it works fine).

The only think I can think of is a race condition - make sure both scripts are loaded before you start sending messages. If the page sends it right away and the content script is not injected yet, it won’t work.

Also, don’t use “*” for the origin, reviewer will complain about it if you use it to send messages back to the page. Instead use the page origin, for example: 'http://localhost:4101'. And the same way in the content script - you need to verify origin: event.origin === 'http://localhost:4101'.

Finally i found the mistake when i changed
“matches”: ["://localhost:44383/"], to “matches”: ["<all_urls>"], it worked. But i dont get it why it’s not working with localhost. I tried without wild card like this https://localhost:44383/ still not working.

Localhost is not encrypted, so use http instead, this should work: "http://localhost/*"

it work with https://localhost/* . thank you for your help.