Dynamically write text in Facebook textbox using JavaScript

I was recently creating a Chrome extension named Butler-AI that allows using the ChatGPT on any website by typing a simple command and during that time found that it is not easy to update the textbox of Facebook using JavaScript.

After digging up the web, I came up with a solution and it works like a charm.

If you inspect the text area where you write anything for the post, you will find that Facebook uses a div with the attribute role="textbox" and contenteditable="true", inside this there is a p tag and a br.

The moment you start typing the br is replaced with a <span data-lexical-text="true">hellow</span>.

Thus we have to update the value in this span and after that trigger an input event from the parent of this span that is from the div[role="textbox"] to make the update.

function facebookUpdate(actEl, text) { if (document.body.parentElement.id == "facebook") { var dc = getDeepestChild(actEl); var elementToDispatchEventFrom = dc.parentElement; let newEl; if (dc.nodeName.toLowerCase() == "br") { // attempt to paste into empty messenger field // by creating new element and setting it's value newEl = document.createElement("span"); newEl.setAttribute("data-lexical-text", "true"); dc.parentElement.appendChild(newEl); newEl.innerText = text; } else { // attempt to paste into not empty messenger field // by changing existing content dc.textContent = text; elementToDispatchEventFrom = elementToDispatchEventFrom.parentElement; } // simulate user's input elementToDispatchEventFrom.dispatchEvent(new InputEvent("input", { bubbles: true })); // remove new element if it exists // otherwise there will be two of them after // Facebook adds it itself! if (newEl) newEl.remove(); } } // helper function function getDeepestChild(element) { if (element.lastChild) { return getDeepestChild(element.lastChild); } else { return element; } } 

Here we have to pass the text area and the text and it will dynamically update the text in the Facebook text box, works with the messenger as well.

facebookUpdate(document.querySelector('[role="textbox"]'), "Hello World!"); or facebookUpdate(document.querySelector('.notranslate'), "Hello World!");