I'm writing a Chrome extension to autofill a text input on a website and hit enter to send a message.

The first thing I did was settings the value of the textbox.

const textbox = document.querySelector("#consumerInput")
textbox.value = "Hello";

But the text input clears out whenever I click somewhere else. I checked the website using React Developer tools extension and saw that it triggers a function on onChange event.

Then I tried to trigger onChange event using JQuery

    $(textBox).trigger("change");

And also doing a keyboard event

element.dispatchEvent(new KeyboardEvent("keydown", {
    key: "e",
    keyCode: 69, // example values.
    code: "KeyE", // put everything you need in this object.
    which: 69,
    shiftKey: false, // you don't need to include values
    ctrlKey: false,  // if you aren't going to use them.
    metaKey: false   // these are here for example's sake.
}));

but no luck.

can you guys help me? Thanks