谷歌浏览器插件开发接口自动打码【2022年07月05日更新一下修改的点】

一、字符验证码的训练

这里不再过多阐述验证码的生成以及训练，部署等情况，参考资料字符验证码识别

里面完整的封装了一套封装了比较通用的校验、训练、验证、识别、API模块，极大的减少了识别字符型验证码花费的时间和精力。

二、谷歌浏览器插件的开发

1、谷歌浏览器插件manifest.json

该文件为浏览器插件必有文件

下面内容为 manifest.json文件内容

{
   "background": {
      "scripts": [ "background.js" ]  //全局加载的JS，解决跨域
   },
   "browser_action": {
      "default_popup": "popup.html",  //右上角的页面
      "default_title": "毕方自动登录" //右上角的内容
   },
   "description": "毕方自动登录",
   "manifest_version": 2,
   "name": "毕方自动登录", //插件名字
   "permissions": [ "tabs", "storage", "webRequest", "webRequestBlocking", "*://*/*" ],
   "version": "1.0.0",
   "content_scripts": [
      {
         "matches": ["域名1", "域名2"],
        "js": ["bifang.js"],  //主要的验证码识别JS
        "all_frames": true
      }
    ]
}

2、负责输入请求的bifang.js

// 老版代码：
// setTimeout(function(){
// 	//定位到验证码图片  获取src
//     var cap_url = document.getElementById('captcha').getAttribute("src") 
//     //这里是验证码的前缀域名   准备和拿到的src拼接
//     var start_url = "验证码前缀域名"
//     //  url就是拼接好的验证码图片地址
//     var url = start_url + cap_url
//     //将域名放到parms中 准备请求
//     var params = 'data='+url;
//     var http = new XMLHttpRequest();
//     //请求的地址，验证码识别的地址
//     var urlS = 'http://192.168.31.17:5000/b';
//     //post模式   传递的参数为 data = {"data":"需要识别的图片地址"}
//	
//     http.open('POST', urlS, true);
//     http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//     http.send(params);
//     //回调函数  判断是否请求成功 成功将返回的识别结果填到输入框
//     http.onreadystatechange = function() {
//         var date = http.responseText
//         var usercap = document.getElementById("your_in");
//         usercap.focus();
//         usercap.value =date
//     }
// });
// 新版代码：
setTimeout(function () {
    var a_canvas = document.createElement('canvas');
    a_canvas.width = "140"
    a_canvas.height = "60"
    var ctx = a_canvas.getContext("2d");
    // 此处 img 为通过 document.querySelector 获取的 DOM 对象
    ctx.drawImage(document.querySelector("#captcha"), 0, 0)
    dataURI = a_canvas.toDataURL("image/png");
    var params = 'data=' + String(dataURI);
    chrome.runtime.sendMessage({greeting: String(params)}, function (response) {
        var usercap = document.getElementById("your_in");
        usercap.focus();
        usercap.value = response
    });
})

3、解决跨域问题的background.js和popup.js

因为这两个JS字符过长，就不贴出来了

三、识别具体流程

四、插件目录情况

文件名称	具体作用	备注
background.js	解决跨域问题	该文件必须存在
bifang.js	识别、请求、填写	该文件必须存在
manifest.json	插件清单	该文件必须存在
popup.js	解决跨域问题	该文件必须存在
popup.html	插件小窗口的页面	该文件必须存在

五、待改进项

（1）因为没有找到更好传递图片的方式，暂传递的是图片的地址
（2）解决跨域问题的JS会出现问题，有时候失效

六、2022年07月05日同步修改更新项

	（1）解决了第五点的第一条数据传输问题，采用canvas进行指定位置截图，传输后端后进行处理。
	（2）跨域问题同步解决。

参考文件

验证码识别、训练、验证等Git地址

Chrome插件(扩展)开发全攻略