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

Question

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

Answer 1

我猜设计师字段的工作方式相同。当您向该字段添加文本时，子 UL 将添加到此 div 元素。

   <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元素。您 could/will def 通过循环选择并检查您想要然后单击的值的内部文本来使它变得更好。顺便说一句，使用 ID=designer-autocomplete 时要小心，他们不止一次将其用于输入元素。

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

Simulating Raw mouse input through chrome extension

javascript

ui-automation

google-chrome-extension