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秒并不能说明什么问题，我要说的是，两秒钟可能真的不值一提，但重要的是，一次节省两秒，一百次节省三分钟，你可以用些时间，去给你的女神，倒一杯卡布奇诺，可能你马上就会成为人生赢家了。