Send message from website to extension

[pale canopy]

Hey, so I'm injecting a button into webpage like this:

function AddButton()
{
  const nameBoxPath = "/html/body/div[1]/div/div[1]/div/div[3]/div/div/div[1]/div[1]/div[2]/div/div/div/div/div/div/div/div/div/div[1]/div/div/div[1]/div";
      
  var nameBox = document.evaluate(nameBoxPath,document,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;

  if(nameBox !== null)
  {
      var button = document.querySelectorAll(".copy_contact_button")
      if(button.length > 0)
      {
        alert("Button already exists");
      }
      else
      {
        alert("Button created");
        var btn = document.createElement("button");
        btn.classList.add("copy_contact_button");
        btn.appendChild(document.createTextNode("Copy"));
        btn.addEventListener('click', function()
        {
          alert("event");
          window.postMessage({ type: "FROM_PAGE_TO_CONTENT_SCRIPT", text: "Hello from the webpage!" }, "*");
        });
        nameBox?.appendChild(btn);
      }
  }
  else
  {
    
  }
}

and then

function App() {
  const onAddButtonClick = async () =>
  {
      let [tab] = await chrome.tabs.query({active: true});
      chrome.scripting.executeScript({
        target: {tabId: tab.id!},
        func: AddButton
      }); 
  }

  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  const handleSave = (input1: string, input2: string) => {
    console.log('Input 1:', input1);
    console.log('Input 2:', input2);
    setIsOpen(false); // Close the popup after saving
  };

  window.addEventListener("message", function() {
    alert("received");
     handleOpen();
  });

  return (
    <>
      <h1>MessengerEncryptor</h1>
      <div className="card">
        <button onClick={() => SaveContacts()}>
          Save contacts
        </button>
        <button onClick={() => LoadContacts()}>
          Load contacts
        </button>
        <br></br>
        <button onClick={() => onAddButtonClick()}>
          Add button
        </button>
        <br></br>
        <button onClick={handleOpen}>Open Popup</button>
      <Popup isOpen={isOpen} onClose={handleClose} onSave={handleSave} name=""/>
      </div>
    </>
  )
}

in the extension im trying to react to that message so that the popup opens

but my extension doesnt receive the message

[silver spade]

@pale canopy You've already opened a few threads about this; every time you do this people lose context about your previous question

[pale canopy]

there was only one more thread

that wasn't exactly about it

so i decided to open this one thats specifically about this problem

[pale canopy]

cant i somehow just driectly create that popup in

 btn.addEventListener('click', function()
        {
         
        });

?

i tried this:
chrome.runtime.sendMessage({ action: 'openPopup' });
and

chrome.runtime.onMessage.addListener((message) => {
    if (message.action === 'openPopup') {
        alert("response");
        handleOpen();
    }
});

but i get error: 100011624659862:1 Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.

hmm a really random guess, but maybe thats because my extension is closed when i click that button and it doesnt run in background?