jquery - Force React to fire event through injected JavaScript - Stack Overflow

admin管理员组

文章数量:1301498

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

/

The Question

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

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./keypress/

The Question

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

• javascript
• jquery
• reactjs

Share Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 9, 2015 at 22:34 mstormmstorm 24522 silver badges1414 bronze badges 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). – Benjamin Gruenbaum Commented May 11, 2015 at 9:16
• I assume you already tried things like TestUtils.Simulate.change right? – Benjamin Gruenbaum Commented May 11, 2015 at 9:17
• Hey, which Plugin do you use? have you thought about manually firing the event? – Anders Anderson Commented 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 Commented May 12, 2015 at 9:46
• Ok, so i maybe asked in the wrong form, what extension do you use? – Anders Anderson Commented May 12, 2015 at 11:26

 |  Show 3 more ments

5 Answers 5

Sorted by: Reset to default 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.

use the following library

1.https://github./dwachss/bililiteRange/blob/master/bililiteRange.js 2.https://github./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

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.

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.

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 }));

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

本文标签： jqueryForce React to fire event through injected JavaScriptStack Overflow