@amaurymartiny/menubar v6.1.0
Menubar
āNote: this is a fork of maxogden/menubar, which is not maintained anymore. More info.
High level way to create menubar desktop applications with Electron.
This module provides boilerplate for setting up a menubar application using Electron. All you have to do is point it at your index.html
and menubar icon and this will handle opening/closing a window when you click/blur.
Works on Mac OS, Windows and some Linuxes (Tested on Xfce4, your mileage may vary - patches welcome!).
Mac OS
Windows
Installation
yarn add @amaurymartiny/menubar
Usage
Create a myApp.js
like this:
const { menubar } = require('@amaurymartiny/menubar');
const mb = menubar();
mb.on('ready', () => {
console.log('app is ready');
// your app code here
});
Make sure there is also a index.html
file in the same folder as myApp.js
, then use Electron
to run the app:
$ electron myApp.js
See the example/
folder for a working example.
The return value of mb
is a Menubar
class instance, which subclasses EventEmitter
and has these additional properties:
{
app: the electron require('app') instance,
window: the electron require('browser-window') instance,
tray: the electron require('tray') instance,
positioner: the electron-positioner instance,
setOption(option, value): change an option after menubar is created,
getOption(option): get an menubar option,
showWindow(): show the menubar window,
hideWindow(): hide the menubar window
}
Options
You can pass an optional options object into the menubar constructor:
dir
(defaultprocess.cwd()
) - the app source directoryindex
(defaultfile:// + opts.dir + index.html
) - the html to load for the pop up windowbrowserWindow
- BrowserWindow options to be passed to the BrowserWindow constructor, see Electron docs. Some interesting fields to passed down are:x
(defaultundefined
) - the x position of the windowy
(defaultundefined
) - the y position of the windowwidth
(default 400) - window widthheight
(default 400) - window heightalwaysOnTop
(default false) - if true, the window will not hide on blur
icon
(defaultopts.dir + IconTemplate.png
) - the png icon to use for the menubar. A good size to start with is 20x20. To support retina, supply a 2x sized image (e.g. 40x40) with@2x
added to the end of the name, soicon.png
andicon@2x.png
and Electron will automatically use your@2x
version on retina screens.tooltip
(default empty) - menubar tray icon tooltip texttray
(default created on-the-fly) - an electronTray
instance. if providedopts.icon
will be ignoredpreloadWindow
(default false) - Create BrowserWindow instance before it is used -- increasing resource usage, but making the click on the menubar load faster.showOnAllWorkspaces
(default true) - Makes the window available on all OS X workspaces.windowPosition
(default trayCenter and trayBottomCenter on Windows) - Sets the window position (x and y will still override this), check positioner docs for valid values.showDockIcon
(default false) - Configure the visibility of the application dock icon.showOnRightClick
(default false) - Show the window on 'right-click' event instead of regular 'click'width
deprecated - Please useoptions.browserWindow.width
, see Electron docs for more info on this field.height
deprecated - Please useoptions.browserWindow.height
, see Electron docs for more info on this field.x
deprecated - Please useoptions.browserWindow.x
, see Electron docs for more info on this field.y
deprecated - Please useoptions.browserWindow.y
, see Electron docs for more info on this field.alwaysOnTop
deprecated - Please useoptions.browserWindow.alwaysOnTop
, see Electron docs for more info on this field.
Events
The return value of the menubar constructor is an event emitter:
ready
- when the app has been created and initializedcreate-window
- the line before new BrowserWindow is calledafter-create-window
- the line after all window init code is doneshow
- the line before window.show is calledafter-show
- the line after window.show is calledhide
- the line before window.hide is called (on window blur)after-hide
- the line after window.hide is calledafter-close
- after the .window (BrowserWindow) property has been deletedfocus-lost
- emitted if always-on-top option is set and the user clicks away
Tips
- Use
mb.on('after-create-window', callback)
to run things after your app has loaded. For example you could runmb.window.openDevTools()
to open the developer tools for debugging, or load a different URL withmb.window.loadUrl()
- Use
mb.on('focus-lost')
if you would like to perform some operation when using the optionbrowserWindow.alwaysOnTop: true
- To restore focus of previous window after menubar hide, use
mb.on('after-hide', () => { mb.app.hide() } )
or similar