背景
最近在做一個實時聊天的PC用戶端，遇到這樣一個任務，在用戶端接收到其他使用者消息的時候要閃爍系統托盤圖示，并且在滑鼠滑到系統托盤的時候顯示未讀消息的菜單欄（對，就是類似QQ的消息提示,例如下圖）；這裡補充一下，我們是選用electron作為我們的開發架構，對于我們來說，electron可以使用前端語言（HTML+CSS+JS）,并且可以跨平台的架構，就是我們的最佳選擇。
解題思路
1、正常人的思路，都是先看看electron有沒有內建好的api, 我也不例外，是以找了一圈，找到了一個系統托盤Tray子產品，大概的api模闆是這樣的：
實際的效果大概就是這樣：
大體的就是支援标題、icon、子菜單、點選回調等比較通用的東西，貌似離我們理想的樣子差距有點大，不信邪的我就想想試試能不能支援渲染HTML，于是乎就往contextMenu加多了一個子項：
結果也是比較感人，真是完全按我寫的輸出，看來此路不通；
2、自己定制一個系統菜單欄
按我們上一點的做法也基本看出系統托盤Tray除了建立一個托盤圖示外，基本對我們來說沒什麼用；于是，想到了用一個浏覽器視窗（BrowserWindow）作為菜單欄，這樣菜單欄要做成什麼樣子，就完全掌握在我們手上了，不過首先要解決以下幾個問題：
1.如何監控滑鼠滑動到我們的托盤圖示上
我們先建立對應的菜單欄視窗，預設是隐藏
找了一下tray的api,隻發現一個mouse-move的事件們去處理這個問題，但這個事件隻是滑入托盤的時候才觸發事件，也沒有相應的劃出托盤的事件，是以我們還要做一個機制來判斷滑鼠是否滑出托盤，具體看下面代碼；
2.怎麼控制視窗的位置
根據上一步的代碼可以看出，tray.getBounds()可以用來擷取托盤圖示的位置資訊，我們先假設我們菜單欄的高度、寬度均為200
做到這一步的時候基本上滑鼠在我們的托盤圖示商滑入滑出的時候，控制菜單欄的顯示和隐藏；但是會發現一個問題，當我們滑鼠滑動到菜單欄的視窗時就會隐藏掉菜單欄，這樣子根本做不了什麼操作。是以還要在我們第一步鑒定托盤位置時将整個菜單欄的視窗劃入到我們系統托盤滑動的正常範圍内：
總結
基本上整個自定義系統菜單欄的方案大概就是這樣的流程，但這個方案也僅限于window和mac系統上，Linux上的相容确實做不了啊，大部分api都不支援Linux系統。