Sending a Facebook Message Challenge: Harder than it looks

I have been having conversations with a friend regarding how easy it is to use JavaScript to automate a lot of processes that we usually do, why it is easier to program in an interpreted language than compiled language, etc. Pondering about these conversations, I challenged myself to send a message to my girlfriend on Facebook Messenger using JavaScript console alone.

Before I started, these are the ground rules that I set:

1. I can use both keyboard and mouse, but the usage should be restricted to the JavaScript console alone.
2. No other tab in the developer tools other than JavaScript console shall be used.
3. I shall start with about:blank as the start page.

The first step is to open Messenger. That step was pretty easy considering the fact that I already knew how to use the window object to my advantage. I used the following command to open Messenger.

window.location.href = "http://www.messenger.com";

Luckily, I had already logged into Facebook and the cookies were not cleared. So I did not have to login again.

The next task is to click on the sidebar to activate my girlfriend's chat. I did not expect that this would be so difficult, but without being able to use Elements tab, it's almost impossible to get the handle to the button. I decided to make the console display all the children that document.body returned. But that would end up with me having too many children to look it. The same thing happened as I tried to make the console show all the elements having a tag name a.

After pondering around for a while, it stuck me: I can get all the HTML content of an element into a variable and do string manipulation to get the handle to the button to activate the chat. I decided to go with body and search for the nickname that I had set for my girlfriend.

splits = document.body.innerHTML.split('Seethootty');
lastFewChars = splits[0].slice(-600);

Honestly, I did not get the number -600 in the first attempt. It does not even have to be -600. I just needed to see the part of the string where it showed an id=*** in the code and I got id="js_9" in one of the parents. I observed that the next child to the div with aforementioned id is an element of type "a" (link). Therefore I decided to do the following to click on the link:

div = document.getElementById("js_9");
div = div.firstElementChild;
div.click();

Now that her chat is up, the next step is to fill in a message and send it. I decided to follow the same procedure as last time to split the text.

divs = document.body.innerHTML.split("Type a message")

To my suprise, this gave me three elements in return, instead of two. I had to do the following for i=0 and i=1 and find the right div.

divs[i].slice(-300)

From the text I found the right div to be having id="placeholder-8eugf". From what I could see by looking around at the parents and siblings around that div, facebook is not using ordinarily used form input or textarea in the chat. In order to add content into the chat and get it sent just got a lot more challenging than I thought it would.

I made many different kinds of attempts. As a last resort, I tried to use a series of createEvent usages to trigger clicking on the message box and initiating key press events, but that did not work in my favour. Perhaps I must try to learn how Facebook has achieved in making something like this so that I could replicate the method in my own projects in the future.

If you were able to achieve what I was trying to do here, please do let me know how by commenting on this post.