谷歌浏览器实现按下按键的脚本_利用chrome扩展，让浏览器执行我们的脚本

admin管理员组

文章数量:1130349

这周末系统升级，加班了。。。刚刚睡醒，更新一个内容比较少的小技巧吧(以后尽量每周一篇网页开发的基础哈，感兴趣的同学没事时候可以看看)～

感谢 @知小卫 同学，实现了我上一篇文章的内容，并且我们一起完成了训练等工作，我就拿来做demo了～

之前我们利用js实现了简单的验证码识别，没有看过的同学戳这里：干货：用js实现的简单验证码识别，现在我们就以这个识别的脚本为例(其他脚本的也一样)，打包成chrome扩展程序，让浏览器每次自动执行。

有人说：这个有什么用呢？大概也就是可以让浏览器自动做些什么好的坏的事情，然后节约我们的时间，提升效率吧...比如说之前的抢票等等吧，就算写着玩玩是不是也很有趣呢(我觉得我没救了)？

首先，大致说一下我们的脚本(真的超大致，具体的戳上面链接～)。脚本一共有以下文件：

这些都是啥？不用管啦，想了解的还是戳上面...反正这些文件，实现了我们的验证码识别的功能，也是我们要打包的对象。打包之前，首先要先下载一个chrome浏览器(哈哈哈好废话)备用～

如果要打包，我们还需要写一个说明文件，叫manifest.json。其实就是一个用了特殊格式的文本文档啦！基本的内容如下(注释说明了作用)：

{

"name":"这里是应用名",

"version":"2.4",//版本号

"manifest_version":2,

"description":"这里是描述",

"browser_action":{//这里面的都可以不要

"default_icon":"icons/icon_32.png",//图标

"default_title":"这里是标题",

"default_popup":"index.html"//点击图标显示的内容

},

"content_scripts":[{//需要执行的脚本

"matches":["http://127.0.0.1/*"],//url符合这个规则，就执行下面的脚本

"js":[//待执行的脚本列表

"js/keys.js",

"js/canvas.js",

"js/init.js",

"js/jquery2.1.4.min.js",

"js/output.js",

"js/tools.js",

"js/work.js",

"js/pdgzf.js"

]

}],

"content_security_policy": "script-src 'self'; object-src 'self';"//权限控制

}

可以看到，待执行的脚本列表就是我们要执行的所有的脚本，url规则那里是我们要执行脚本的目标网址。如果同学们不是很熟悉JSON和chrome扩展的话，可以直接修改这两个部分，剩下的照抄也基本可以满足要求。同时，如果browser_action里面的图标和popup都赋值了的话，那么我们的包里还得添加这两个文件。

到此为止，准备工作就一切就绪了，是不是很简单！接下来进行打包的操作。我们打开chrome浏览器，点击右上角的图标：

windows版本应该是类似于“三”的标识(3条横线)。随后，在打开的菜单中，选择：更多工具=>扩展程序(不同版本可能不一样，但最后都是“扩展程序”之类的字样)

随后，在打开的窗口里选择脚本所在的目录，第二行“私钥”可以不用管。确定即可生成一个.crx文件，一个.pem私钥文件。第二次打包时，需要选择此私钥文件，或者直接把私钥删掉，假装是第一次打包也行2333333。生成的.crx文件就是扩展程序了，可以直接发给小伙伴使用啦！

安装时，只需要把.crx文件拖入“扩展程序”页面，就可以完成安装啦！

“打包扩展程序”左边的按钮，可以在不打包的情况下，在本地执行脚本。开发的调试过程中比较好用，不过不能很方便的发给小伙伴～

=================================================================

接下来，我们尝试下效果。我在浏览器中安装了扩展程序，并且打开了目标网页：

可以看到，网页登陆的地方有个验证码。短暂等待浏览器识别后，会自动识别并填写：

只有打开符合我们规则的url才会生效，打开其他网页的时候并不会执行脚本，所以可以放心用哈～

PS：眼尖的童鞋可能会发现验证码换了...是因为截图失败了然后刷新了然后马赛克懒得重新打了2333333 反正效果是这样的嗯嗯。有问题的同学依然欢迎交流哈，私信会回的～

这周末系统升级，加班了。。。刚刚睡醒，更新一个内容比较少的小技巧吧(以后尽量每周一篇网页开发的基础哈，感兴趣的同学没事时候可以看看)～

感谢 @知小卫 同学，实现了我上一篇文章的内容，并且我们一起完成了训练等工作，我就拿来做demo了～

之前我们利用js实现了简单的验证码识别，没有看过的同学戳这里：干货：用js实现的简单验证码识别，现在我们就以这个识别的脚本为例(其他脚本的也一样)，打包成chrome扩展程序，让浏览器每次自动执行。

有人说：这个有什么用呢？大概也就是可以让浏览器自动做些什么好的坏的事情，然后节约我们的时间，提升效率吧...比如说之前的抢票等等吧，就算写着玩玩是不是也很有趣呢(我觉得我没救了)？

首先，大致说一下我们的脚本(真的超大致，具体的戳上面链接～)。脚本一共有以下文件：

这些都是啥？不用管啦，想了解的还是戳上面...反正这些文件，实现了我们的验证码识别的功能，也是我们要打包的对象。打包之前，首先要先下载一个chrome浏览器(哈哈哈好废话)备用～

如果要打包，我们还需要写一个说明文件，叫manifest.json。其实就是一个用了特殊格式的文本文档啦！基本的内容如下(注释说明了作用)：

{

"name":"这里是应用名",

"version":"2.4",//版本号

"manifest_version":2,

"description":"这里是描述",

"browser_action":{//这里面的都可以不要

"default_icon":"icons/icon_32.png",//图标

"default_title":"这里是标题",

"default_popup":"index.html"//点击图标显示的内容

},

"content_scripts":[{//需要执行的脚本

"matches":["http://127.0.0.1/*"],//url符合这个规则，就执行下面的脚本

"js":[//待执行的脚本列表

"js/keys.js",

"js/canvas.js",

"js/init.js",

"js/jquery2.1.4.min.js",

"js/output.js",

"js/tools.js",

"js/work.js",

"js/pdgzf.js"

]

}],

"content_security_policy": "script-src 'self'; object-src 'self';"//权限控制

}

可以看到，待执行的脚本列表就是我们要执行的所有的脚本，url规则那里是我们要执行脚本的目标网址。如果同学们不是很熟悉JSON和chrome扩展的话，可以直接修改这两个部分，剩下的照抄也基本可以满足要求。同时，如果browser_action里面的图标和popup都赋值了的话，那么我们的包里还得添加这两个文件。

到此为止，准备工作就一切就绪了，是不是很简单！接下来进行打包的操作。我们打开chrome浏览器，点击右上角的图标：

windows版本应该是类似于“三”的标识(3条横线)。随后，在打开的菜单中，选择：更多工具=>扩展程序(不同版本可能不一样，但最后都是“扩展程序”之类的字样)

随后，在打开的窗口里选择脚本所在的目录，第二行“私钥”可以不用管。确定即可生成一个.crx文件，一个.pem私钥文件。第二次打包时，需要选择此私钥文件，或者直接把私钥删掉，假装是第一次打包也行2333333。生成的.crx文件就是扩展程序了，可以直接发给小伙伴使用啦！

安装时，只需要把.crx文件拖入“扩展程序”页面，就可以完成安装啦！

“打包扩展程序”左边的按钮，可以在不打包的情况下，在本地执行脚本。开发的调试过程中比较好用，不过不能很方便的发给小伙伴～

=================================================================

接下来，我们尝试下效果。我在浏览器中安装了扩展程序，并且打开了目标网页：

可以看到，网页登陆的地方有个验证码。短暂等待浏览器识别后，会自动识别并填写：

只有打开符合我们规则的url才会生效，打开其他网页的时候并不会执行脚本，所以可以放心用哈～

PS：眼尖的童鞋可能会发现验证码换了...是因为截图失败了然后刷新了然后马赛克懒得重新打了2333333 反正效果是这样的嗯嗯。有问题的同学依然欢迎交流哈，私信会回的～

本文标签： 脚本浏览器按下按键chrome