10

What I am trying to do

I am currently writing a little chat bot for Web-Whatsapp. I decided to use a chrome extension because of the easy js-injection. There is a voice-message button which switches to a button for sending text as you start typing something. React deletes the voice-message element and renders the send button.

The Problem

This whole process is event driven. I am setting the Text through DOM which does not trigger the react event. I tried to simulate a keypress but it seems like chrome´s v8 disabled all ways to simulate keypresses for security reasons. I also tried to manipulate the HTML a bit but react stopped working after i made changes to the Elements. I also tried the jQuery function for that but that didn't work either.

References to things that didn't help:

Keydown Simulation in Chrome fires normally but not the correct key

https://api.jquery.com/keypress/

The Question

Is there any way to force React firing the event? Or any kind of workaround for this?

8
  • Yes, you can't really simulate a keypress because it wouldn't be a DOM trusted event (user initiated). I think one possible avenue would be to hook on bluebird promises themselves in the system and intercept calls - I'm not sure react lets you do this. (Of course, you can also modify react itself - but I'm not sure I'd walk that avenue). May 11, 2015 at 9:16
  • I assume you already tried things like TestUtils.Simulate.change right? May 11, 2015 at 9:17
  • Hey, which Plugin do you use? have you thought about manually firing the event? May 12, 2015 at 8:20
  • None, I am writing the Plugin myself. The bot IS the plugin. Thats what i meant by I use a Chrome extension. Its pretty easy to inject JS over a chrome extension, like a 2 minute job.
    – mstorm
    May 12, 2015 at 9:46
  • Ok, so i maybe asked in the wrong form, what extension do you use? May 12, 2015 at 11:26

5 Answers 5

3
+100

"Solution" After two days of research I have to admit that this is obviously not possible on the way I tried it for security reasons. If you ever get into the same situation like me you shouldn´t waste time on trying to fix this, rather than just looking for a good workaround. I will update mine for the WebWhatsapp-bot here if i figured it out.

3
  • Hey did u figure out any solution for this problem? Aug 1, 2016 at 9:27
  • Hey man I have found the answer if you are interested let me know I will post the answer here Aug 1, 2016 at 9:41
  • @SureshPattu What is your solution?
    – SunnySonic
    Mar 15, 2018 at 5:45
1

use the following library

1.https://github.com/dwachss/bililiteRange/blob/master/bililiteRange.js 2.https://github.com/dwachss/bililiteRange/blob/master/jquery.sendkeys.js

load (paste in console) this js script in chrome console in following sequence

1.load jquery.js

2.load bililiteRange.js

3.load jquery.sendkeys.js

Now you can send the text to the Whatsapp input box like this example:

var input_op=jQuery("#main div.pluggable-input-body.copyable-text.selectable-text");
input_op.sendkeys("hello");

for stimulating the Click event on send button do this :

function triggerMouseEvent(node, eventType) {

    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent(eventType, true, true);
    node.dispatchEvent(clickEvent);
}

var d = document.querySelector("#main span[data-icon="send"]");
triggerMouseEvent(d, "click"); //stimulate mouse event in chrome

Done

1
  • Working great in chrome!! I just need to figure out now how to inject it into my webview ;)
    – SunnySonic
    Mar 21, 2018 at 21:14
0

Chrome won't allow any page to simulate keypress but you can do it with external application. Java is the best for such stuff. From your page request the server to request the Java application to do the keypress for you. chrome doesn't block keypress from the robot class in Java. Here is a video showing Robot class typing text into a webpage. I can help you with the Java(Processing) if you want.

4
  • Java is the evil, imho.. I would prefer writing it in vbscript rather than java, but your solution is just a workaround anyways. Doesn´t "solve" the problem itself. But thanks for your suggestion.
    – mstorm
    May 12, 2015 at 9:50
  • I dont think any browser would allow that! If that would be possible all ads would be click on themselves automatically... :p
    – user4572199
    May 12, 2015 at 12:27
  • I could easily do it with a workaround but that wouldn´t be as clean and as beautiful as a pure javascript injected bot, if you know what i mean.
    – mstorm
    May 12, 2015 at 12:51
  • U could test in a really old version of IE or netscape navigator... That MAYNOT filter bot clicks but idk if whatsapp comes with protection from bots
    – user4572199
    May 12, 2015 at 13:53
0

In the past when I've needed to attempt to simulate keypresses from as high a level as I'm allowed to in Javascript, I've taken inspiration from the brilliant gremlins.js. The way they get their typer gremlins to type is the following (taken from src/species/typer.js):

// Create a generic event
var myEvent = document.createEventObject ?
    document.createEventObject() :
    document.createEvent("Events");

// 'init' the event as a keypress
myEvent.initEvent('keypress', true, true);

// Fill in details
myEvent.keyCode = key;
myEvent.which = key;
myEvent.keyCodeVal = key;

// Fire it on your target
targetElement.dispatchEvent ?
    targetElement.dispatchEvent(myEvent) :
    targetElement.fireEvent('on' + eventType, myEvent);

It's quite sneaky, and in the past has got past a few restrictions for me, you might give it a try.

1
  • 2
    Yeah, i thought so. Simulating clicks seem to be really not allowed in chrome.
    – mstorm
    May 12, 2015 at 11:32
0

Try these two things right after you inject the text:

  1. create a Range around the text you entered, and then:

range.startContainer.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }));

  1. document.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true }));

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.