What's the Problem & Why？
对于一个开发人员来说，切环境是一件比较日常的事情，但是伴随着环境的切换，页面的登录态也会失效，所以就导致要再次输入登录帐号。当然，这件事情还满足以下的逻辑：
let painValue = 0; //痛苦值
if ( me.profession === 'developer' && loginAgain === true) {
// 如果是程序员并且需要反复登录
painValue = 100;
if (me.position === 'front-end') {
// 如果是前端（接触网页最多的工种）
painValue = Math.pow( painValue, loginTimes);
}
}
尤其当你的键盘只有87键的时候，输入一连串数字更是一件考验人耐心的事情。
于是乎，想起自己的 TodoList 上有一项貌似已经存活了很久了——玩玩 chrome 扩展，思考了一下便觉得这个事情有搞头，也算是对自己的一次救赎。
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
示例：
// popup.js (插件的js)
chrome.tabs.query({
active: true,
currentWindow: true
}, function(tabs){
chrome.tabs.sendMessage(tabs[0].id, data, callback)
});
// content_script.js
chrome.runtime.onMessage.addEventListener(function(data, sender, sendResponse){
// ...
});
对于一个自动登录的插件来说，了解这些概念就够用了，接下来可以撸起袖子开干了。
Develop
此处省略1000字 :)
因为一些可笑的规定和策略，放在 Github 的代码里连公司的域名都不能有，所以为了避免不必要的麻烦，拿掉了登录公司主站的部分，增加了 Github 和 Segmentfault 的自动登录，如果你有兴趣的话也可以提PR来增加其他网站，随手 Star 一下就更好了，笔芯。
没有数据支撑的产品都是咸鱼
我们来做一个简单的计算。
你有一个用手机注册的帐号，11位
并且你用了一个非常简单的登录密码，6位
二者相加，一共17位
你的人物设定是一名登录届的老司机，能够快速并精确地输入帐号和密码
经过本人多次实践得出，在右侧的小键盘输入11位手机号码平均需要2.5秒，6位的纯数字登录密码需要1秒。
再者，当输入完手机号后需要手动选择密码框后再进行输入，输入完密码后还要再次手动选择登录按钮进行点击操作。但因为你是登录届的老司机，你会熟练的用左手无名指点击 Tab 键进行表单输入项的切换，会用回车键代替鼠标点击按钮，所以这些操作就取个最小值0.5秒吧。
2.5 + 1 + 0.5 = 4 秒
现在你用了 autoLogin 自动登录插件，嗯，当你发现需要输入帐号密码时，可以直接用鼠标点开插件，再点击你需要登录的帐号，登录成功。
经过本人多次测试，这一操作平均耗时2秒，如果你知道如何设置键盘快捷键打开 Chrome 插件，这个过程会更快。
4 - 2 = 2 秒
可能你会觉得这短短的2秒并不能说明什么问题，
我要说的是，
两秒钟可能真的不值一提，
但重要的是，
假如从今往后你都用插件来对付需要手动输入帐号密码的场景，
一次节省两秒，
一百次节省三分钟，
你可以用些时间，
去给你的女神，
倒一杯卡布奇诺，
可能你马上就会成为人生赢家了。
个人公众号：劉凯里(kkkyrieliu)
