Cordova App cannot receive message from InAppBrowser WebView via postMessage

Question

I am trying to use Cordova + social login plugin like Facebook + InAppBrowser WebView my wordpress website. In the wordpress site, there's a login button, when user click on the button, trying to send a message to the Cordova App from the wordpress webview and trigger the facebook login on Cordova. I have tried many different ways including installing different versions of cordova-plugin-inappbrowser but none of them works to receive the message. Please help to guide me, appreciate for your help, thank you.

Cordova config.xml

    <access origin="*" />
    <access origin="https://example.com/*" />
    <content src="index.html" />
    <allow-intent href="https://*/*" />
    <allow-navigation href="https://*/*" />
    <preference name="cordovaWebviewEngine" value="CDVWKWebViewEngine" />
    <plugin name="cordova-plugin-wkwebview-engine" spec="~1.2.2" />
    <plugin name="cordova-plugin-inappbrowser" spec="~6.0.0" />
    <plugin name="cordova-plugin-advanced-http" spec="^3.2.0" />
    <plugin name="cordova-plugin-facebook-connect" spec="~3.2.0">
        <variable name="APP_ID" value="*******************" />
        <variable name="APP_NAME" value="*********************" />
    </plugin>

Cordova index.js

document.addEventListener('deviceready', function() {

    // Declare ref variable in a broader scope
    var ref;

    ref = cordova.InAppBrowser.open('https://example.com/', '_blank', 'location=no');

    // Listen for messages from the WebView (in the Cordova app)
    ref.addEventListener('message', function(event) {

        // Problem: Does not receive any message from SEND MESSAGE PART
        console.log("Received message from WebView:"+ JSON.stringify(event));

        // Check if the action is 'facebook_login'
        if (event.data && event.data.action === 'facebook_login') {
            console.log("Triggering Facebook login...");
            triggerFacebookLogin();
        }
    });

    // Ensure that ref is available before trying to use it
    ref.addEventListener('loadstop', function() {
        // Inject jQuery
        ref.executeScript({
            code: `
                if (typeof jQuery === 'undefined') {
                    var script = document.createElement('script');
                    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js';
                    document.head.appendChild(script);
                }
            `
        }, function() {
            // Run jQuery code after jQuery is injected
            ref.executeScript({
                code: `
                    if (typeof jQuery === 'function') {
                        jQuery(document).ready(function() {
                            jQuery("body").on("click", ".login_button", function () {

                                
                                /* SEND MESSAGE PART */
                                /* Click action on button can fire as usual */
                                /* All the below codes are tried but not receiving any message at the cordova parent EventListener from this webview*/
                                /* Also tried to inject these code directly to the wordpress's javascript file, not working as well */
                                
                                window.parent.postMessage({ action: 'facebook_login' }, 'https://example.com/');
                                window.postMessage({ action: 'facebook_login' }, 'https://example.com/');
                                ref.postMessage({ action: 'facebook_login' }, 'https://example.com/');

                                window.parent.postMessage({ action: 'facebook_login' }, '*');
                                window.postMessage({ action: 'facebook_login' }, '*');
                                ref.postMessage({ action: 'facebook_login' }, '*');

                                                
                                var message = 'this is the message';
                                var messageObj = {my_message: message};
                                var stringifiedMessageObj = JSON.stringify(messageObj);
                                window.postMessage(stringifiedMessageObj, "*");
                                window.parent.postMessage(stringifiedMessageObj, "*");
                            });
                        });
                    }
                `
            });
        });
    });
});