autoLogin

A Chrome extension which can help you logining the website automatically.

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秒并不能说明什么问题，
我要说的是，
两秒钟可能真的不值一提，
但重要的是，
假如从今往后你都用插件来对付需要手动输入帐号密码的场景，
一次节省两秒，
一百次节省三分钟，
你可以用些时间，
去给你的女神，
倒一杯卡布奇诺，
可能你马上就会成为人生赢家了。