本身動手，作一款擡頭顯示的「Todo Hud」

我用過好多款 TodoList 軟件，但事情一多總仍是丟三落四，本來計劃好要作的事情老是安靜地躺在某個角落，等我想起來要去掃一眼的時候，都已快「物是人非」。。。

要是能在桌面上實時顯示 TodoList，那該多好！可是 Mac 上作到這一點還真不是一件容易的事，那就退而求其次吧。我想了想，由於公司是使用 Google 辦公套件的，本身天天用的最多的軟件就是瀏覽器，要是能在瀏覽器新開 Tab 頁的時候，都能實時顯示 TodoList 的話，那就能知足個人需求了。

最簡單的 TodoList

說作就作，我要的只是一個簡單的 web 頁面，在上面：

• 能夠簡單展現、建立、關閉待辦事項。

• 爲了通用一點，支持用戶帳號系統（只要最基本的註冊、登陸、重置密碼就夠了）。

• 保證內容的私密性。

因此它不能是一個靜態頁面，怎麼着也要有一個數據庫。爲了這一點功能，去購買機器、申請域名，甚至還去搞域名備案，實在是不值得，我想 LeanCloud 的 雲引擎 應該是最好的選擇。

LeanCloud 雲引擎提供了多個應用模版，最簡單的一個 node-js-getting-started 就已經包括了一個 web app 的基本框架，而且還附帶了一個建立 Todo 的簡單例子。在它的基礎上，再集成了 LeanCloud 自帶的帳戶系統（連重置密碼的功能都默認提供，這裏不得不說這真是太方便了）。對於內容私密性，我使用了 LeanCloud 數據存儲中的「ACL 機制」，讓一條待辦事項只有它的全部者能夠訪問，其餘人連讀取的權限都沒有，這樣就保證了用戶之間的數據隔離。最後，UI 怎麼辦呢？對於我這樣的前端小白來說，bootstrap-material-design 已是我能想到的最理想的組合了。

最後作出來的效果是這樣：

• 用戶註冊

• Todo List

這個項目的全部代碼都放在 github/syncus 上了，你們能夠自行獲取，而後在 LeanCloud 中去部署本身的 web 應用。不過對於想直接試一試的朋友來說，你們也可使用這個地址 https://syncus.leanapp.cn/todos 來訪問這一在線的 Todo List。

讓 TodoList 擡頭顯示

TodoList 作完了，如今咱們要想辦法讓它可以作到「擡頭顯示」，不然對我來講也沒啥幫助，不過是又造了一個輪子而已。

我作了一個 Chrome 插件，可是由於沒法發佈到 Chrome Web Store，因此只能放在 github 上共享給你們了：todo_ntp，有興趣的同窗把它下載到本地，而後在開發者模式下加入 chrome extension 就能夠了。

不過也可使用別人寫好的插件，如下內容引自 How to Have the New Tab Open a Specific Website Automatically in Chrome and Firefox:

Chrome 設置

Chrome 上設置稍微有點複雜，須要藉助其餘插件，其步驟以下：

1. 從 Chrome Web Store 下載安裝 Replace New Tab Page。

2. 打開 Chrome 插件管理器（你也能夠在地址欄直接輸入 chrome://extensions/）
   

3. 點擊 Replace New Tab Page 的 Options 連接.
   

4. 在地址欄中輸入 https://syncus.leanapp.cn/todos。
   

OK，一切都好了，從如今開始，你每次打開一個新的 Tab 頁，都會首先看到你本身的待辦事項。

Firefox 設置

1. 在 Firefox 上咱們也須要安裝插件 NewTabURL。

2. 重啓瀏覽器，能夠經過 Ctrl+Shift+A 來打開插件管理頁面，找到 NewTabURL 並點擊 Options 按鈕。
   

3. 選擇 URL 並輸入 https://syncus.leanapp.cn/todos。
   

Safari 設置

1. 進入 Safari 的設置頁面。

2. 在 Homepage 框中輸入 https://syncus.leanapp.cn/todos，而後把 New tabs open with 中選定 Homepage。
   

使用中可能的問題

• Chrome 中 CSS 文件加載不了，頁面顯示異常

這多是由於 LeanCloud 文件託管的域名致使的，能夠參考這篇文章解決Fix Your Connection is not private error in Chrome.