I am trying to send text- messages on WhatsApp with javascript?

Question

I am trying to send text messages on whatsapp web version on chrome. (www.web.whatsapp.com)

This is the code:

document.getElementsByClassName("input")[1].innerHTML="This message was written via JS script! ";
var input = document.getElementsByClassName("icon btn-icon icon-send");
input[0].click();

But the problem is , initially when no text is present the input box looks like this: enter image description here

And only when I physically write some text it changes to this:

enter image description here

And only now my script works since it requires the Send text button.

I tried Jquery code to simulate keypresses at $('.input)by following function:

function pressKey() {
 var e = jQuery.Event("keypress");
 e.which = 32; // # space
 $(".input").trigger(e)[1];
 e.which = 91;
 $(".input").trigger(e)[1];
 e.which = 32; // # space
 $(".input").trigger(e)[1];
 e.which = 32; // # space
 $(".input").trigger(e)[1];
}

It didn't work.

How can I get the Send text button by script?

Here is the screen recording :

Answer 1

All options didn't work for me. Thats what I did.

function sendMessage(message) {
 var evt = new Event('input', {
 bubbles: true
 });
 var input = document.querySelector("div.input");
 input.innerHTML = message;
 input.dispatchEvent(evt);
 document.querySelector(".icon-send").click();
}

Answer 2

Try this snippet, while opening a conversation:

function dispatch(target, eventType, char) {
 var evt = document.createEvent("TextEvent"); 
 evt.initTextEvent (eventType, true, true, window, char, 0, "en-US");
 target.focus();
 target.dispatchEvent(evt);
}
dispatch(document.querySelector("#compose-input div"), "textInput", "hello!");
function triggerClick() {
 var event = new MouseEvent('click', {
 'view': window,
 'bubbles': true,
 'cancelable': true
 });
 document.querySelector(".icon.btn-icon.icon-send").dispatchEvent(event)
}
triggerClick()

• Liad Livnat: It throws Uncaught TypeError: Cannot read property 'focus' of null(...) also i think they already changes it cause #compose-input div doesn't exist anymore
• Vivek Goel: @khalid-lafi what is TextEvent here ?

Answer 3

As Khalid Lafi said, this is the correct script. His code does will return an error when executing

dispatch(document.querySelector("#compose-input div"), "textInput", "hello!");

This is because you should use "input.div" instead of "#compose-input div". The following script is working for me.

function dispatch(target, eventType, char) {
 var evt = document.createEvent("TextEvent"); 
 evt.initTextEvent (eventType, true, true, window, char, 0, "en-US");
 target.focus();
 target.dispatchEvent(evt);
}
dispatch(document.querySelector("div.input"), "textInput", "hello!");
function triggerClick() {
var event = new MouseEvent('click', {
 'view': window,
 'bubbles': true,
 'cancelable': true
 });
document.querySelector(".icon.btn-icon.icon-send").dispatchEvent(event);
}
triggerClick();

Hope this helps.

• avi: does this still work? I am getting an error: Uncaught TypeError: Cannot read property 'dispatchEvent' of null(...) when I call for triggerClick

Answer 4

The following is the updated script. Hope this helps.

var input = document.querySelector('.block-compose .input');
setTimeout(function(){
 for(var j = 0; j < 1; j++) {
 input.innerHTML = "Hello";
 input.dispatchEvent(new Event('input', {bubbles: true}));
 var button = document.querySelector('.block-compose button.icon-send');
 button.click();
 }
},1000);

• Cami Rodriguez: Still working, only change the selector to '#main [contenteditable~=true]' in input and document.querySelector('button>span[data-icon="send"]').parentElement in button
• Muzammil Baloch: I undestand the rest of the code but can you explain what this line do? input.dispatchEvent(new Event('input', {bubbles: true}))

Answer 5

This works in Dec 2019. Original snippet by Shubham modified by Cami Rodriguez (see comments above).

function write_in_chat(text) {
 var input = document.querySelector('#main [contenteditable~=true]');
 setTimeout(() => { 
 input.innerHTML = text;
 input.dispatchEvent(new Event('input', {bubbles: true}));
 var button = document.querySelector('button>span[data-icon="send"]').parentElement;
 button.click();
 }, 500);
}

• Muzammil Baloch: I undestand the rest of the code but can you explain what this line do? input.dispatchEvent(new Event('input', {bubbles: true}));
• Vishesh Mangla: javascript.info/dispatch-events . Here it is explained.

Answer 6

$(".input").on("keypress",function(e){ 
 if(e.which == 32 || e.which == 13){ alert('msg sent')};
});

you have to compare == where as you are assigning =

• Nadeemmnn Mohd: check by clicking enter key it will alert you and there should be class="input" for your input box
• yask: Doesn't answer my question. I want to simulate the keystroke affect to get the send text button not make a js function to detect keystrokes.

Answer 7

Firing an event with a KeyPress into an input will not actually populate the text area because the population is part of the native event.

If your intention is to populate a text field, you'll simply need to set the val. In jQuery this can be done with .val(), e.g.:

function pressKey() {
 $(".input").val('test');
}

The WhatsApp input box probably has an event listener waiting for a keyup event, and if the field is populated, switching it to the send button. If this is the case then you can manually trigger an event which will trigger WhatsApp's (non-native) code.

function pressKey() {
 $(".input").val('test').trigger($.Event('keyup'));
}

Answer 8

This is the working script:

 function dispatch(target, eventType, char) {
 var evt = document.createEvent("TextEvent");
 evt.initTextEvent (eventType, true, true, window, char, 0, "en-US");
 target.focus();
 target.dispatchEvent(evt);
 }
 dispatch(document.querySelector(".input-container > .input-emoji .input"), "textInput", "hello!");
 function triggerClick() {
 var event = new MouseEvent('click', {
 'view': window,
 'bubbles': true,
 'cancelable': true
 });
 document.querySelector(".icon.btn-icon.icon-send").dispatchEvent(event)
 }
 triggerClick();

• Ravi Kumar: TypeError: evt.initTextEvent is not a function
• Jonathas Pacífico: initTextEvent --> Does not work with firefox. Mozilla site states it's not implemented.
• avi: Getting this error Uncaught TypeError: Cannot read property 'dispatchEvent' of null(...)