Menu
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?
535
To add the click event in React using plain JavaScript, you need to use addEventListener() to assign the click event to an element. Create one <button> element as ref props so that it can be accessed to trigger the click event.
Simulate a Click Event In the test, we create a ref so that we can pass it to the rendered Button and later to the Simulate. click call. The onClick prop gets the value of a handleClick event handler function. That function calls done() , which is the callback to the it function`.
React is just JavaScript, there is a very small API to learn, just a few functions and how to use them. After that, your JavaScript skills are what make you a better React developer. There are no barriers to entry. A JavaScript developer can become a productive React developer in a few hours.
"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.
63
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
