What's the Problem & Why？
對于一個開發(fā)人員來說，切環(huán)境是一件比較日常的事情，但是伴隨著環(huán)境的切換，頁面的登錄態(tài)也會失效，所以就導(dǎo)致要再次輸入登錄帳號。當(dāng)然，這件事情還滿足以下的邏輯：
let painValue = 0; //痛苦值
if ( me.profession === 'developer' && loginAgain === true) {
// 如果是程序員并且需要反復(fù)登錄
painValue = 100;
if (me.position === 'front-end') {
// 如果是前端（接觸網(wǎng)頁最多的工種）
painValue = Math.pow( painValue, loginTimes);
}
}
尤其當(dāng)你的鍵盤只有87鍵的時候，輸入一連串?dāng)?shù)字更是一件考驗人耐心的事情。
于是乎，想起自己的 TodoList 上有一項貌似已經(jīng)存活了很久了——玩玩 chrome 擴(kuò)展，思考了一下便覺得這個事情有搞頭，也算是對自己的一次救贖。
How
所以大致的需求就是，開發(fā)一個 Chrome 插件，能夠快速登錄公司主站，以后就再也不怕切環(huán)境啦。
那么問題來了，看樣子我需要一個類似于X天玩轉(zhuǎn)Chrome插件開發(fā)之類的文檔。
不過喜大普奔的是，360前端團(tuán)隊已經(jīng)翻譯了官方的 Chrome extension 開發(fā)文檔，不得不稱贊一句：老哥，穩(wěn)如狗。
對于日常登錄操作的優(yōu)化，其實可以簡單地分為三步：
- 獲取頁面信息輸入?yún)^(qū)域
- 填充內(nèi)容
- 點擊登錄按鈕
雖說是一個比較 easy 的功能，但是還是要有一些基本的概念為開發(fā)做支撐。在大致看過前面幾個小節(jié)的介紹之后，大致明白了 chrome 插件其實和普通的網(wǎng)頁差不多，只是有一些新的概念需要簡單的理解下。
Tips
manifest.json
manifest.json 文件是一個 chrome 插件特有的文件，它定義了有關(guān)于當(dāng)前插件的一些信息，比如：插件名稱、描述、圖標(biāo)、版本等（具體還有好多字段，需要的時候去查文檔就好了）
Content Scripts
這是一個比較關(guān)鍵的東西。
它的本質(zhì)是 js，但區(qū)分于插件本身的 js，content scripts 是在網(wǎng)頁內(nèi)執(zhí)行的腳本，它遵循標(biāo)準(zhǔn)的 DOM，可以獲取到頁面內(nèi)的 DOM 元素并對其進(jìn)行修改。但是這一類腳本不能獲取到網(wǎng)頁本身腳本內(nèi)的變量和函數(shù)，也不能訪問插件中定義的變量和函數(shù)。
一個不負(fù)責(zé)任的總結(jié)：Content Script 是用來操作頁面 DOM 的腳本。
Message API
因為多多少少要做一些交互，心里想象的樣子是：用戶點擊插件中的帳號 -> 信息填充并自動登錄，所以需要一次消息傳遞的過程——插件->content scripts。
經(jīng)過了一些低成本的實驗，得到的結(jié)論也是很簡單的，只用調(diào)用三個接口即可：
- 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字 :)
因為一些可笑的規(guī)定和策略，放在 Github 的代碼里連公司的域名都不能有，所以為了避免不必要的麻煩，拿掉了登錄公司主站的部分，增加了 Github 和 Segmentfault 的自動登錄，如果你有興趣的話也可以提PR來增加其他網(wǎng)站，隨手 Star 一下就更好了，筆芯。
沒有數(shù)據(jù)支撐的產(chǎn)品都是咸魚
我們來做一個簡單的計算。
你有一個用手機(jī)注冊的帳號，11位
并且你用了一個非常簡單的登錄密碼，6位
二者相加，一共17位
你的人物設(shè)定是一名登錄屆的老司機(jī)，能夠快速并精確地輸入帳號和密碼
經(jīng)過本人多次實踐得出，在右側(cè)的小鍵盤輸入11位手機(jī)號碼平均需要2.5秒，6位的純數(shù)字登錄密碼需要1秒。
再者，當(dāng)輸入完手機(jī)號后需要手動選擇密碼框后再進(jìn)行輸入，輸入完密碼后還要再次手動選擇登錄按鈕進(jìn)行點擊操作。但因為你是登錄屆的老司機(jī)，你會熟練的用左手無名指點擊 Tab 鍵進(jìn)行表單輸入項的切換，會用回車鍵代替鼠標(biāo)點擊按鈕，所以這些操作就取個最小值0.5秒吧。
2.5 + 1 + 0.5 = 4 秒
現(xiàn)在你用了 autoLogin 自動登錄插件，嗯，當(dāng)你發(fā)現(xiàn)需要輸入帳號密碼時，可以直接用鼠標(biāo)點開插件，再點擊你需要登錄的帳號，登錄成功。
經(jīng)過本人多次測試，這一操作平均耗時2秒，如果你知道如何設(shè)置鍵盤快捷鍵打開 Chrome 插件，這個過程會更快。
4 - 2 = 2 秒
可能你會覺得這短短的2秒并不能說明什么問題，
我要說的是，
兩秒鐘可能真的不值一提，
但重要的是，
假如從今往后你都用插件來對付需要手動輸入帳號密碼的場景，
一次節(jié)省兩秒，
一百次節(jié)省三分鐘，
你可以用些時間，
去給你的女神，
倒一杯卡布奇諾，
可能你馬上就會成為人生贏家了。
個人公眾號：劉凱里(kkkyrieliu)
