如何用electron高度自定义制一个系统菜单栏？

背景

最近在做一个实时聊天的PC客户端，遇到这样一个任务，在客户端接收到其他用户消息的时候要闪烁系统托盘图标，并且在鼠标滑到系统托盘的时候显示未读消息的菜单栏（对，就是类似QQ的消息提示,例如下图）；这里补充一下，我们是选用electron作为我们的开发框架，对于我们来说，electron可以使用前端语言（HTML+CSS+JS）,并且可以跨平台的框架，就是我们的最佳选择。

解题思路

1、正常人的思路，都是先看看electron有没有集成好的api, 我也不例外，所以找了一圈，找到了一个系统托盘Tray模块，大概的api模板是这样的：

const {
    app, Menu, Tray } = require('electron')
let tray = null;
let openVoice = true;
app.whenReady().then(() => {
   
  tray = new Tray('/path/to/my/icon');
  const contextMenu = Menu.buildFromTemplate([
    {
   
        label: openVoice ? '关闭声音' : '开启声音',
        icon: openVoice ? "trayMenu/notVoice.png": "trayMenu/voice.png",
        click: (event: any) => {
   
            openVoice = !openVoice;
        },
    },
    {
   
        label: '退出',
        icon:  "trayMenu/exit.png",
        click: () => {
   
            app.exit(0);
        }
    }
  ]);
  tray