What's the Problem & Why端幼？
對于一個開發(fā)人員來說，切環(huán)境是一件比較日常的事情疟位，但是伴隨著環(huán)境的切換苔巨，頁面的登錄態(tài)也會失效版扩，所以就導致要再次輸入登錄帳號。當然侄泽，這件事情還滿足以下的邏輯：
let painValue = 0; //痛苦值
if ( me.profession === 'developer' && loginAgain === true) {
// 如果是程序員并且需要反復登錄
painValue = 100;
if (me.position === 'front-end') {
// 如果是前端（接觸網(wǎng)頁最多的工種）
painValue = Math.pow( painValue, loginTimes);
}
}
尤其當你的鍵盤只有87鍵的時候礁芦，輸入一連串數(shù)字更是一件考驗人耐心的事情。
于是乎悼尾，想起自己的 TodoList 上有一項貌似已經(jīng)存活了很久了——玩玩 chrome 擴展柿扣，思考了一下便覺得這個事情有搞頭，也算是對自己的一次救贖闺魏。
How
所以大致的需求就是未状，開發(fā)一個 Chrome 插件，能夠快速登錄公司主站析桥，以后就再也不怕切環(huán)境啦司草。
那么問題來了，看樣子我需要一個類似于X天玩轉Chrome插件開發(fā)之類的文檔泡仗。
不過喜大普奔的是翻伺，360前端團隊已經(jīng)翻譯了官方的 Chrome extension 開發(fā)文檔，不得不稱贊一句：老哥沮焕，穩(wěn)如狗吨岭。
對于日常登錄操作的優(yōu)化，其實可以簡單地分為三步：
- 獲取頁面信息輸入?yún)^(qū)域
- 填充內容
- 點擊登錄按鈕
雖說是一個比較 easy 的功能峦树，但是還是要有一些基本的概念為開發(fā)做支撐辣辫。在大致看過前面幾個小節(jié)的介紹之后，大致明白了 chrome 插件其實和普通的網(wǎng)頁差不多魁巩，只是有一些新的概念需要簡單的理解下急灭。
Tips
manifest.json
manifest.json 文件是一個 chrome 插件特有的文件，它定義了有關于當前插件的一些信息谷遂，比如：插件名稱葬馋、描述、圖標肾扰、版本等（具體還有好多字段畴嘶，需要的時候去查文檔就好了）
Content Scripts
這是一個比較關鍵的東西。
它的本質是 js集晚，但區(qū)分于插件本身的 js窗悯，content scripts 是在網(wǎng)頁內執(zhí)行的腳本，它遵循標準的 DOM偷拔，可以獲取到頁面內的 DOM 元素并對其進行修改蒋院。但是這一類腳本不能獲取到網(wǎng)頁本身腳本內的變量和函數(shù)亏钩，也不能訪問插件中定義的變量和函數(shù)。
一個不負責任的總結：Content Script 是用來操作頁面 DOM 的腳本欺旧。
Message API
因為多多少少要做一些交互姑丑，心里想象的樣子是：用戶點擊插件中的帳號 -> 信息填充并自動登錄，所以需要一次消息傳遞的過程——插件->content scripts辞友。
經(jīng)過了一些低成本的實驗彻坛，得到的結論也是很簡單的，只用調用三個接口即可：
- 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)品都是咸魚
我們來做一個簡單的計算疙渣。
你有一個用手機注冊的帳號匙奴，11位
并且你用了一個非常簡單的登錄密碼，6位
二者相加妄荔，一共17位
你的人物設定是一名登錄屆的老司機泼菌，能夠快速并精確地輸入帳號和密碼
經(jīng)過本人多次實踐得出，在右側的小鍵盤輸入11位手機號碼平均需要2.5秒啦租，6位的純數(shù)字登錄密碼需要1秒哗伯。
再者，當輸入完手機號后需要手動選擇密碼框后再進行輸入篷角，輸入完密碼后還要再次手動選擇登錄按鈕進行點擊操作焊刹。但因為你是登錄屆的老司機，你會熟練的用左手無名指點擊 Tab 鍵進行表單輸入項的切換恳蹲，會用回車鍵代替鼠標點擊按鈕虐块，所以這些操作就取個最小值0.5秒吧。
2.5 + 1 + 0.5 = 4 秒
現(xiàn)在你用了 autoLogin 自動登錄插件嘉蕾，嗯非凌，當你發(fā)現(xiàn)需要輸入帳號密碼時，可以直接用鼠標點開插件荆针，再點擊你需要登錄的帳號敞嗡，登錄成功颁糟。
經(jīng)過本人多次測試，這一操作平均耗時2秒喉悴，如果你知道如何設置鍵盤快捷鍵打開 Chrome 插件棱貌，這個過程會更快。
4 - 2 = 2 秒
可能你會覺得這短短的2秒并不能說明什么問題箕肃，
我要說的是婚脱，
兩秒鐘可能真的不值一提，
但重要的是勺像，
假如從今往后你都用插件來對付需要手動輸入帳號密碼的場景障贸，
一次節(jié)省兩秒，
一百次節(jié)省三分鐘吟宦，
你可以用些時間篮洁，
去給你的女神，
倒一杯卡布奇諾殃姓，
可能你馬上就會成為人生贏家了袁波。
個人公眾號：劉凱里(kkkyrieliu)
