Chrome擴充開發——Gmail附件管理助手

標籤：

零、為什麼會有這一套博文

　　2014年底雖然已經基本完成GmailAssist這一chrome擴充開發（當時也是作為軟體工程課程的實踐項目），但該擴充程式對於郵箱內郵件數目較多（大約五位元的數量級上）的情況，就很難正常工作了，這顯然不是一個合格的軟體，當時雖然終期驗收順利“交差”了，但這個軟體的“不合格”卻一直是我的一個心病。經過一年的學習，儘管對於前端開發的知識沒有什麼更進一步的掌握，但對軟體工程的思想等等有了比起當時來說更深一層的認識。同時，當時雖然是一定程度上遵循敏捷開發的原則來進行的開發，但代碼結構仍然比較混亂，因此最近計劃對其進行一次完整的重構，同時修複bug、提升該擴充的效能。
當時在進行開發時，我幾乎完全沒有前端開發的經驗，從HTML、js的最基本文法開始邊學邊實現了該擴充的開發，當時偷懶沒有及時把知識、技巧包括開發途中走的彎路梳理並記錄下來。現在想重構時，發現很多東西都得從頭再梳理，因此決定在此次重構過程中，把Gmail API、chrome擴充、郵件格式、OAuth2認證等相關的知識整理成文字，加深自己理解、記憶的同時，也期待這套文章能對準備進行有關這些方面開發的開發人員有所協助。
如果你對GmailAssist感興趣，可以在chrome商店中搜尋“Gmail助手”或者“GmailAssist”，或者直接存取https://chrome.google.com/webstore/detail/gmail-attachment-manager/lchiijlphndndjfgecehgmkjbdohndjd來試用它。如果你對源碼感興趣，歡迎在GitHub上查看它的源碼：https://github.com/IceSuger/Gmail_Plugin。（寫這篇文章時，重構還沒完成，所以github上暫時還是一坨爛代碼...2016.1.11）

一、使用者需求

　　使用者的Gmail中附件很多，分散在各個郵件中，希望能有一款外掛程式，通過它來統一查看、批量下載、在建立新郵件時從中批量選擇附件並插入，而不必手動搜尋並下載重新上傳。

二、目標功能

　　開發開始之前，有必要搞清楚我們具體要實現的每一個功能（否則開發過程沒有清晰的目標，就很難進行）。那麼，我們的外掛程式需要擁有的幾項基本的功能如下：

1. 能夠擷取並顯示使用者郵箱裡的全部附件；
2. 能夠單獨下載列出的附件中的某個；
3. 能夠在要發送的檔案中插入列表中的某個附件。

　　在這些基本的功能上，我們可以通過一次次迭代來完善功能，讓使用者更好地使用這個外掛程式。具體點來說，進一步還要有（其中的一些是開發過程中才想到的或者根據使用者反饋而追加的）：

1. 在附件列表中顯示該附件對應的郵件標題、時間等郵件資訊；
2. 對附件列表進行按不同關鍵詞（包括附件名稱、附件大小、郵件時間等）的排序；
3. 擷取附件列表時，允許使用者通過輸入指定一個更小的搜尋範圍；
4. 對擷取到的附件列表，允許使用者通過輸入來過濾掉不需要的條目；
5. 允許使用者通過複選框來勾選多個附件，實現大量操作；
6. 實現中文、英文兩種版本。

三、要完成開發需要哪些知識

　　有了一個大致的目標，就該進一步考慮如何?了。首先的想法是我們要開發一個chrome擴充，那chrome擴充的開發的基本知識以及基本的前端開發知識（至少是HTML、javascript、CSS的常用文法）是需要的。其次，搜尋後得知Gmail有著一套官方的比較成熟的API，供開發人員調用。接下來瞭解到開發針對Gmail的第三方外掛程式，需要通過OAuth2獲得使用者的授權，那麼OAuth2的基本原理也需要瞭解。
因此這套博文會有如下內容：[chrome擴充開發基礎知識及一些小tips和陷阱提醒。Gmail API的簡單介紹、包括tips和陷阱提醒。對OAuth2的理解。chrome擴充的i18n方法和技巧。]

其中每篇我都結合GmailAssist的具體開發過程來寫，因為很多知識點有具體例子的話，寫起來和讀起來都會更容易。chrome擴充，其實就是一個針對chrome瀏覽器的外掛程式，因此後文中我會混用“外掛程式”、“擴充”、“擴充程式”這幾個名詞。另外，因為比較具體，所以有些東西的介紹可能並不全面，我會在介紹它們時附上更完整的文檔等的地址，方便大家進一步瞭解相關內容。

Chrome擴充開發——Gmail附件管理助手