Unable to Trigger Event Listener in Chrome Extension from React Application

I’m developing a Chrome extension that needs to communicate with a React application. I have set up the onMessageExternal event listener in my extension’s background script to handle messages from external sources. However, I’m unable to trigger this event listener from my React app.

Here’s the relevant code:

In my Chrome extension’s background script (background.js):

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {    
  console.log('Received message from React app:', message);
    if (message && message.type === 'triggerExtensionListener') {
      console.log('Listener triggered by React app!');
    }
 });

  chrome.runtime.onMessageExternal.addListener(function(message, sender, sendResponse) {
    console.log('Received message from React app:', message);
    // Handle incoming message
    if (message && message.type === 'triggerExtensionListener') {
      console.log('Listener triggered by React app!');
      sendResponse({ response: "Message received successfully" });

    }
});

In my React application, I’m trying to send a message to the extension using chrome.runtime.sendMessage():

chrome.runtime.sendMessage("EXTENSION_ID", { message: "Hello from React!" }, function(response) {
    console.log("Received response from extension:", response);
});

I have verified that the extension’s ID is correct, and the chrome.runtime.sendMessage() function is being called from my React app. However, the onMessage event listener in the extension’s background script is not triggered.

I’m also getting this error in my React app:

App.js:13 Error sending message to Chrome extension: TypeError: Cannot read properties of undefined (reading 'sendMessage')

Could someone please help me understand why the onMessage event listener is not being triggered from my React application? Am I missing any steps or permissions in my extension’s manifest file (manifest.json)? Or is there a different approach I should be using to communicate between my React app and Chrome extension?

Any guidance or suggestions would be greatly appreciated. Thank you!