cra-medium.js

const { app, BrowserWindow, shell, Tray, ipcMain, Menu, TouchBar , nativeImage } = require('electron');
const { TouchBarButton, TouchBarLabel, TouchBarSpacer } = TouchBar;
const { platform } = require('os')
const path = require('path');
const isDev = require('electron-is-dev');
const electron = require('electron')
let mainWindow,tray;
const winURL =  isDev
? 'http://localhost:8080'
: `file://${path.join(__dirname, '../build/index.html')}`

const TRAY_ARROW_HEIGHT = 90;
const WINDOW_WIDTH = 320;
const WINDOW_HEIGHT = 500;
const HORIZ_PADDING = 30;
const VERT_PADDING = 30;

const createWindow = () => {

    let icon = nativeImage.createFromDataURL(base64Icon)
    tray = new Tray(icon)
    tray.setToolTip('Snip');


    tray.on('click', (event) => {

        var screen = electron.screen;
        const cursorPosition = screen.getCursorScreenPoint();
        const primarySize = screen.getPrimaryDisplay().workAreaSize;
        const trayPositionVert = cursorPosition.y >= primarySize.height / 2 ? 'bottom' : 'top';
        const trayPositionHoriz = cursorPosition.x >= primarySize.width / 2 ? 'right' : 'left';
        
        mainWindow.setPosition(getTrayPosX(), getTrayPosY());
        mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show();
    
        function getTrayPosX() {
          const horizBounds = {
            left: cursorPosition.x - WINDOW_WIDTH / 2,
            right: cursorPosition.x + WINDOW_WIDTH / 2
          }
          if (trayPositionHoriz == 'left') {
            return horizBounds.left <= HORIZ_PADDING ? HORIZ_PADDING : horizBounds.left;
          } else {
            return horizBounds.right >= primarySize.width ? primarySize.width - HORIZ_PADDING - WINDOW_WIDTH : horizBounds.right - WINDOW_WIDTH;
          }
        }
    
        function getTrayPosY() {
          return trayPositionVert == 'bottom' ? cursorPosition.y - WINDOW_HEIGHT - VERT_PADDING : cursorPosition.y + VERT_PADDING;
        }
    
        
       // Create the Application's main menu
       if (process.platform === 'darwin') { 
        var template = [{ 
          label: 'FromScratch', 
          submenu: [{ 
            label: 'Quit', 
            accelerator: 'CmdOrCtrl+Q', 
            click: function() { 
              app.quit(); 
            } 
          }] 
        }, { 
          label: 'Edit', 
          submenu: [{ 
            label: 'Undo', 
            accelerator: 'CmdOrCtrl+Z', 
            selector: 'undo:' 
          }, { 
            label: 'Redo', 
            accelerator: 'Shift+CmdOrCtrl+Z', 
            selector: 'redo:' 
          }, { 
            type: 'separator'
          }, { 
            label: 'Cut', 
            accelerator: 'CmdOrCtrl+X', 
            selector: 'cut:' 
          }, { 
            label: 'Copy', 
            accelerator: 'CmdOrCtrl+C', 
            selector: 'copy:'
          }, { 
            label: 'Paste', 
            accelerator: 'CmdOrCtrl+V', 
            selector: 'paste:' 
          }, { 
            label: 'Select All', 
            accelerator: 'CmdOrCtrl+A', 
            selector: 'selectAll:' 
          }] 
        }];
        var osxMenu = menu.buildFromTemplate(template);
        menu.setApplicationMenu(osxMenu);
      }
       
      });
    
      mainWindow = new BrowserWindow({
        width: WINDOW_WIDTH,
        height: WINDOW_HEIGHT,
        minWidth: 320,
        minHeight: 500,
        maxWidth: 320,
        maxHeight: 500,
        icon: `${__dirname} + '/build/icons/icon.png'`,
        show: false,
        alwaysOnTop:true,
        frame: platform() !== 'win32',
        titleBarStyle: 'hiddenInset',
        useContentSize: false,
        resizable: true,
        skipTaskbar: true,
        webPreferences: {
            nodeIntegration: false,
            preload: __dirname + '/preload.js',
        }
      });
      mainWindow.setSkipTaskbar(true);
      mainWindow.loadURL(winURL);
      
  mainWindow.on('closed', () => {
    mainWindow = null
  });
    mainWindow.once('ready-to-show', () => {
        mainWindow.show();
        ipcMain.on('open-external-window', (event, arg) => {
            shell.openExternal(arg);
        });
    });
};

if (app.dock) app.dock.hide();
// Tray Icon as Base64 so tutorial has less overhead
let base64Icon = //add some image url;

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit()
    }
  });

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

ipcMain.on('load-page', (event, arg) => {
    mainWindow.loadURL(arg);
});