Set or replace textContent in Facebook's chat

Question

I'm developing a Chrome extension, which allows the user to replace the text of their Facebook chat message before they send it.

For example, if the user types "Hello there", I want to allow them to replace the chat input field with "There hello", and leave it up to the user to send the altered message.

The problem is that I am able to change the text by editing the textContent attribute of the input, but the chat widget doesn't know of the change, probably because the right events have not fired, so when I press Enter to send the altered message nothing happens. Additionally, I am not able to delete the changed text with the mouse nor the keyboard.

I've tried simulating keyboard input, but with no success. I'm open to accepting a working solution that involves that.

My question is, how to I replace the text in the chat input field so that the chat widget detects and accepts it?

Note: I am not using jQuery, so I would prefer solutions that do not use it.

Answer 1

After spending too much time on this I finally figured out that sending a textInput event to the editable element can change its text, and will trigger all React.js events.

var setText = function(el, text) { 
    var te = document.createEvent('TextEvent'); 
    te.initTextEvent('textInput', true, true, window, text);
    el.dispatchEvent(te); 
}

I had tried something similar before, but I was sending the input event, which apparently does not work in WebKit and Chrome.

Thanks to all who participated and tried to help!