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

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

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

（2）设置元素值：

 account.value='admin';
1

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

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

仅 对于 input text 类型 有效？
（4）模拟点击：
参考文章：https://blog.csdn.net/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);
    }
1
2
3
4
5
6
7
8
9