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

如何解决通过 chrome 扩展模拟原始鼠标输入

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

解决方法

我猜设计师领域的工作方式是一样的。当您向该字段添加文本时，会向该 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 Path 来获取 LI 元素。您可以/将通过循环选择并检查您想要的值的内部文本然后单击来使其更好。顺便说一句，使用 ID=designer-autocomplete 时要小心，他们不止一次将它用于输入元素。