通过 chrome 扩展模拟原始鼠标输入答案

【问题标题】：Simulating Raw mouse input through chrome extension通过 chrome 扩展模拟原始鼠标输入
【发布时间】：2021-02-05 15:32:16
【问题描述】：

我正在开发一个 chrome 扩展程序来自动填写一些表格。问题是，这些网站正在使用 React.js 和其他 Javascript 组件，这使得添加输入或从自动完成菜单中进行选择变得非常困难。现在我知道用于 chrome 扩展的 chrome.debugger API 允许这样做，但我似乎无法让它工作。有人可以指导我如何使用此 API 点击元素并发送键盘输入吗？

【问题讨论】：

您应该发送这些Input 命令之一。但是，如果您发送站点侦听的所有事件，通常一个普通的 DOM dispatchEvent 就足够了。您可以在 devtools、事件侦听器面板中看到它们。
@wOxxOm 感谢您的回复。我已经尝试过 dispatchEvent 并取得了不同程度的成功。有些元素我可以与之互动，有些则完全拒绝让步。例如，我专注于某个输入字段，在其中键入一个字符串，然后会出现一个自动完成下拉菜单和该字符串。现在，我想单击下拉列表中的项目以确认我键入的字符串，但我无法使用 dispatchEvent 来执行此操作。您链接到的输入命令似乎可以工作。但是，我不知道如何使用它们。您能否给我一个“Input.dispatchMouseEvent”的示例，以便我了解它是如何工作的？
对于键盘模拟，您可以从这里使用 keypress 或 SimulateWordTyping-github.com/fxnoob/speech-recognition-toolkit/blob/master/src/…
RE 自动完成。所有实现都不同，但根据我的经验，您需要首先向该字段添加文本。然后你需要等到自动完成选择的 HTML 更新。一旦有了新的 HTML，您需要检查选项并单击所需的元素。我在输入之前设置了一个观察者，然后观察者处理等待，直到自动完成出现。
@darbid 我可以显示自动完成功能。我只是无法点击出现的选项。

标签： javascript google-chrome-extension ui-automation

【解决方案1】：

我猜设计师领域的工作方式相同。当您向该字段添加文本时，会向该 div 元素添加一个子 UL。

   <div class="designer-autocomplete-container input-with-error">
       <input id="designer-autocomplete" class="" type="text" placeholder="Designer" autocomplete="off" value="">
   </div>

下面是添加的 UL 和 LI 元素的屏幕截图。这是您的下拉菜单。

那么你是对的，你不能调用 click(); LI 元素上的函数，你需要这样做；

var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent('mousedown', true, true);
document.querySelector("#sellform > div > div.sellform-form-wrapper > form > div.details-container.section > div > div.left-column > div.designers-input > div:nth-child(1) > ul > li:nth-child(6)").dispatchEvent(clickEvent);

我只是简单地使用 Chrome 开发者复制 JS 路径来获取 LI 元素。您可以/将通过循环选择并检查内部文本以获取您想要然后单击的值来使这更好。顺便说一句，使用 ID=designer-autocomplete 时要小心，他们不止一次将其用于输入元素。

【讨论】：

我已经尝试过了，但它对我不起作用。你测试过这个吗？这就是为什么我正在寻找一种涉及原始鼠标输入的解决方案。
当然可以。我在开发人员控制台中编写并测试了它。我建议你也这样做，这样你就知道它有效。我的猜测是你没有等待足够长的时间让 LI 元素准备好。这是第 2 步。
你是对的。它在控制台中工作。我会检查为什么它在我的扩展中不起作用。非常感谢。
好的。我添加了 5000 毫秒的 settimeout 并且它起作用了。我将尝试使我的代码更高效，以便在对元素进行更改而不是离散超时时进行监听。再次感谢您的帮助。
在你开始输入之前设置一个 MutationObserver developer.mozilla.org/en-US/docs/Web/API/MutationObserver 并注意 LI 进来，一旦你得到你想要的然后在上面触发我的文本。