浏览器插件使用-脚本自动化之模拟点击和表单填写

时间:2025-02-14 16:06:51

1.插件demo文件包见附件
2.浏览器打包:右上角菜单-扩展程序-管理扩展程序-打包插件包(插件demo文件包)-将打包出来的.crx文件 拖到扩展程序管理页面(chrome://extensions/ 类似),有的浏览器可能不兼容,使用360极速浏览器,在对应浏览页面启动。
3.登录页面自动输入账号密码登录:
(1)找到对应元素id或class 获取到元素dom:

var account= document.getElementById('form_item_username');

(2)设置元素值:

 account.value='admin';

如果网页使用vue编写,用这种方法修改input的值,input框的值会有修改,但是vue里面的data值还是没变(如果vue开启必输校验,校验会无法通过),因此需要使用第三点手动模拟触发input框事件。参考文章:/p/343961934 及其中评论。
(3)手动模拟触发input框事件:参考文章:/gongzairen/article/details/133911689

var inputEvent = new Event('input', { bubbles: true });
account.value='admin';
account.dispatchEvent(inputEvent);

仅 对于 input text 类型 有效?
(4)模拟点击:
参考文章:/ccyolo/article/details/129165462

 // 模拟点击提交按钮
    var submit=document.querySelector("button");
    if(document.all){
      submit.click();
    }else{
      //  其它浏览器
      let event = new Event('click', {"bubbles":true, "cancelable":true});
      submit.dispatchEvent(event);
    }