通过注入 JavaScript 强制反应触发事件

Question

我想做什么

我目前正在为 Web-Whatsapp 编写一个小聊天机器人。我决定使用 chrome 扩展，因为它易于 js 注入。有一个语音消息按钮，当您开始输入内容时，该按钮会切换为发送文本的按钮。 React 删除语音消息元素并呈现发送按钮。

问题

整个过程都是事件驱动的。我正在通过 DOM 设置文本，这不会触发反应事件。我试图模拟按键，但出于安全原因，chrome 的 v8 似乎禁用了所有模拟按键的方法。我也尝试稍微操纵 HTML 但在我对元素进行更改后反应停止工作。我也为此尝试了 jQuery 函数，但它也不起作用。

对没有帮助的事情的引用：

Keydown Simulation in Chrome fires normally but not the correct key

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

问题

有没有办法强制 React 触发事件？或者对此有任何解决方法？

Answer 1

Chrome 不允许任何页面模拟按键，但您可以使用外部应用程序来实现。 Java 最适合这类东西。从您的页面请求服务器请求 Java 应用程序为您执行按键操作。 chrome 不会阻止 Java 中机器人 class 的按键操作。 Here is a video showing Robot class typing text into a webpage. I can help you with the Java(Processing) 如果你愿意的话。

Answer 2

过去，当我需要尝试在 Javascript 允许的最高级别模拟按键时，我从出色的 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);

挺偷偷摸摸的，以前也帮我突破了一些限制，你可以试试看

Answer 3

"Solution" 经过两天的研究，我不得不承认，出于安全原因，这在我尝试的方式中显然是不可能的。如果您遇到过像我一样的情况，您不应该浪费时间尝试解决这个问题，而不是仅仅寻找一个好的解决方法。如果我弄明白了，我会在这里为 WebWhatsapp-bot 更新我的。

Answer 4

使用以下库

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

按以下顺序在 chrome 控制台中加载（在控制台中粘贴）此 js 脚本

1.load jquery.js

2.load bililiteRange.js

3.load jquery.sendkeys.js

现在您可以像这个例子一样将文本发送到 Whatsapp 输入框：

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

要激发发送按钮上的 Click 事件，请执行此操作：

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

完成

Answer 5

注入文本后立即尝试这两项操作：

围绕您输入的文本创建一个范围，然后：

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

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

通过注入 JavaScript 强制反应触发事件

Force React to fire event through injected JavaScript

javascript

jquery

reactjs