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.

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.

• javascript
• facebook
• google-chrome-extension
• reactjs

Share Improve this question Follow edited Feb 19, 2016 at 11:28 cviejo 4,3982020 silver badges3030 bronze badges asked Feb 12, 2016 at 17:37 minimlminiml 1,53922 gold badges1717 silver badges2727 bronze badges 4

• 1 I don't know if/how you might hook into it, but Facebook is using React, which is capturing the events and the HTML you see is the output. – Alexander O'Mara Commented Feb 19, 2016 at 7:46
• 1 I spent waaay too long trying to figure this out. It's not impossible, but 1) it's very hard and 2) If Facebook changes their code, your widget will break and 3) If Facebook ever turns off the devtools hook in production, you have no hope . You basically want to use the window.__REACT_DEVTOOLS_GLOBAL_HOOK__.reactDevtoolsAgent object, the react ponent instance is somewhere in there but it's very hard to find. I can find the DOM element but not the instance itself. Once you get the instance you can trigger the onKeyPress event or something. It's likely an insurmountable problem. – EugeneZ Commented Feb 20, 2016 at 10:02
• @miniml I don't have facebook so would struggle to look at this for you... is there some kind of sandbox or JSFiddle-esque environment that I could test in? – user1694691 Commented Feb 23, 2016 at 2:40
• @PeterScott, unfortunately (and that's what makes this so hard) the only way to test this is using a real Facebook account :/ – miniml Commented Feb 23, 2016 at 6:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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!

The initTextEvent is deprecated, now should use:

    const inputEvent = new InputEvent('input', {
      bubbles: true,
      cancelable: true,
      posed: true,
      inputType: 'insertText',
      data: 'your_data'
    });
  
    el.dispatchEvent(inputEvent);