I have an iframe that I'm trying to make auto filling by chrome extension. The value is changed well, but the app doesn't see the values, and I need to type it again for it to affect the form.

After googling, I do all the below code tries and more.

What else can I do?

function func3() {
    // setTimeout(function () {
    //
    // }, )
    let elId3 = "social-id-field";
    let input3 = document.getElementById(elId3);
    if (input3 != null) {

        //also tried that :
        // let ev = document.createEvent('Events');
        // ev.initEvent('keypress', true, true);
        // ev.keyCode = 13;
        // ev.which = 13;
        // ev.charCode = 13;
        // ev.key = 'Enter';
        // ev.code = 'Enter';
        input3.value = "123456789";
        // input3.dispatchEvent(ev);

        // let event = new Event('input', {bubbles: true});
        input3.dispatchEvent(new Event('change'));


    }


}

Manifest:

...    
{
          "matches": [ "https://*.hf.paymeservice.com/service/field/*"],
          "all_frames": true,
          "css": ["style.css"],
          "js": ["jquery-3.6.0.min.js","factory54-payment.js"]
        }
        ...

this is the page

Update:

Until I press enter inside the input it's won't work. Also, I see that it's happening only on this input.