写一个chrome插件来实现网站的自动登录

阅读 5422
收藏 173
2017-10-04
原文链接:mp.weixin.qq.com

What's the Problem & Why?

对于一个开发人员来说,切环境是一件比较日常的事情,但是伴随着环境的切换,页面的登录态也会失效,所以就导致要再次输入登录帐号。当然,这件事情还满足以下的逻辑:

尤其当你的键盘只有87键的时候,输入一连串数字更是一件考验人耐心的事情。于是乎,想起自己的 TodoList 上有一项貌似已经存活很久了——玩玩 chrome extensions,思考了一下便觉得这个事情有搞头,也算是对自己的一次救赎。

How

所以大致的需求就是,开发一个 Chrome 插件,能够快速登录公司主站,以后就再也不怕切环境啦。那么问题来了,看样子我需要一个类似于X天玩转Chrome插件开发之类的文档。不过喜大普奔的是,360前端团队已经翻译了官方的 Chrome extension 开发文档,不得不称赞一句:老哥,稳如狗。

对于日常登录操作的优化,其实可以简单地分为三步:

  • 获取页面信息输入区域

  • 填充内容

  • 点击登录按钮

虽说是一个比较 easy 的功能,但是还是要有一些基本的概念为开发做支撑。在大致看过前面几个小节的介绍之后,大致明白了 chrome 插件其实和普通的网页差不多,只是有一些新的概念需要简单的理解下。

Tips

manifest.json

manifest.json 文件是一个 chrome 插件特有的文件,它定义了有关于当前插件的一些信息,比如:插件名称、描述、图标、版本等(具体还有好多字段,需要的时候去查文档就好了)

Content Scripts

这是一个比较关键的东西。它的本质是 js,但区分于插件本身的 js,content scripts 是在网页内执行的脚本,它遵循标准的 DOM,可以获取到页面内的 DOM 元素并对其进行修改。但是这一类脚本不能获取到网页本身脚本内的变量和函数,也不能访问插件中定义的变量和函数。一个不负责任的总结:Content Script 是用来操作页面 DOM 的脚本。

Message API

因为多多少少要做一些交互,心里想象的样子是:用户点击插件中的帐号 -> 信息填充并自动登录,所以需要一次消息传递的过程——插件->content scripts。经过了一些低成本的实验,得到的结论也是很简单的,只用调用三个接口即可:

  • chrome.tabs.query

  • chrome.tabs.sendMessage

  • chrome.runtime.onMessage

示例:

对于一个自动登录的插件来说,了解这些概念就够用了,接下来可以撸起袖子开干了。

Develop

此处省略1000字 :)

因为一些可笑的规定和策略,放在 Github 的代码里连公司的域名都不能有,所以为了避免不必要的麻烦,拿掉了登录公司主站的部分,增加了 Github 和 Segmentfault 的自动登录,如果你有兴趣的话也可以提PR来增加其他网站,随手 Star 一下就更好了,笔芯。

Demo

(大致就是长这个样子)

(提前添加好自己的帐号)

(下次碰到需要登录的场景时,一键登录纵享丝滑)

当然了,现如今,

只要是个差不多的网站,

都会做用户名和密码自动填充的功能,

毕竟这个插件的适用场景,

是在开发过程中,

不尴尬,

一点都不尴尬

强颜欢笑脸 :)

没有数据支撑的产品都是咸鱼

我们来做一个简单的计算。你有一个用手机注册的帐号,11位并且你用了一个非常简单的登录密码, 6位二者相加,一共17位你的人物设定是一名登录届的老司机,能够 快速并精确地输入帐号和密码经过本人多次实践得出,在右侧的小键盘输入11位手机号码平均需要2.5秒,6位的纯数字登录密码需要1秒。 再者,当输入完手机号后需要手动选择密码框后再进行输入,输入完密码后还要再次手动选择登录按钮进行点击操作。但因为你是登录届的老司机,你会熟练的用左手无名指点击 Tab 键进行表单输入项的切换,会用回车键代替鼠标点击按钮,所以这些操作就取个最小值0.5秒吧。

2.5 + 1 + 0.5 = 4 秒

现在你用了 autoLogin 自动登录插件,嗯,当你发现需要输入帐号密码时,可以直接用鼠标点开插件,再点击你需要登录的帐号,登录成功。经过本人多次测试,这一操作平均耗时2秒,如果你知道如何设置键盘快捷键打开 Chrome 插件,这个过程会更快。

4 - 2 = 2 秒

可能你会觉得这短短的2秒并不能说明什么问题,我要说的是,两秒钟可能真的不值一提,但重要的是,一次节省两秒,一百次节省三分钟,你可以用些时间,去给你的女神,倒一杯卡布奇诺,可能你马上就会成为人生赢家了。

评论