• Stars
    star
    6,673
  • Rank 5,927 (Top 0.2 %)
  • Language
    TypeScript
  • License
    BSD 2-Clause "Sim...
  • Created over 9 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

βž– high level way to create menubar desktop applications with electron

Build Status npm (scoped) dependencies Status npm bundle size npm bundle size




βž– Menubar

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 will handle the rest.

βœ… Only one dependency, and one peer-dependency.

βœ… Works on macOS, Windows and most Linuxes. See details.

βœ… πŸ’₯ 3.6kB minified + gzipped πŸ’₯

macOS Mojave 10.14 Windows 10 Ubuntu 18.04

Installation

yarn add menubar

Usage

Starting with your own new project, run these commands:

$ yarn add menubar
$ touch myApp.js
$ touch index.html

Fill index.html with some HTML, and myApp.js like this:

const { menubar } = require('menubar');

const mb = menubar();

mb.on('ready', () => {
  console.log('app is ready');
  // your app code here
});

Then use electron to run the app:

$ electron myApp.js

Alternatively, see examples/hello-world folder for a simple working example.

Menubar Class

The return value of menubar() is a Menubar class instance, which has these properties:

  • app: the Electron App instance,
  • window: the Electron Browser Window instance,
  • tray: the Electron 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

See the reference API docs.

menubar() Options

You can pass an optional options object into the menubar({ ... }) function:

  • dir (default process.cwd()) - the app source directory
  • index (default file:// + opts.dir + index.html) - The URL to load the menubar's browserWindow with. The url can be a remote address (e.g. http://) or a path to a local HTML file using the file:// protocol.
  • browserWindow - BrowserWindow options to be passed to the BrowserWindow constructor, see Electron docs. Some interesting fields to passed down are:
    • x (default undefined) - the x position of the window
    • y (default undefined) - the y position of the window
    • width (default 400) - window width
    • height (default 400) - window height
    • alwaysOnTop (default false) - if true, the window will not hide on blur
  • icon (default opts.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, so icon.png and [email protected] and Electron will automatically use your @2x version on retina screens.
  • tooltip (default empty) - menubar tray icon tooltip text
  • tray (default created on-the-fly) - an electron Tray instance. if provided opts.icon will be ignored
  • preloadWindow (default false) - Create BrowserWindow instance before it is used -- increasing resource usage, but making the click on the menubar load faster.
  • loadUrlOptions - (default undefined) The options passed when loading the index URL in the menubar's browserWindow. Everything browserWindow.loadURL supports is supported; this object is simply passed onto browserWindow.loadURL
  • 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'

See the reference API docs.

Events

The Menubar class is an event emitter:

  • ready - when menubar's tray icon has been created and initialized, i.e. when menubar is ready to be used. Note: this is different than Electron app's ready event, which happens much earlier in the process
  • create-window - the line before new BrowserWindow() is called
  • before-load - after create window, before loadUrl (can be used for require("@electron/remote/main").enable(webContents))
  • after-create-window - the line after all window init code is done and url was loaded
  • show - the line before window.show() is called
  • after-show - the line after window.show() is called
  • hide - the line before window.hide() is called (on window blur)
  • after-hide - the line after window.hide() is called
  • after-close - after the .window (BrowserWindow) property has been deleted
  • focus-lost - emitted if always-on-top option is set and the user clicks away

Compatibility with Electron

menubar Electron Notes
9.x.x 9.x.x | 10.x.x | 11.x.x | 12.x.x | 13.x.x | 14.x.x | 15.x.x | 16.x.x | 17.x.x | 18.x.x | 19.x. | 20.x. | 21.x.x | 22.x.x
8.x.x 8.x.x
7.x.x 7.x.x
6.x.x 4.x.x | 5.x.x | 6.x.x Not recommended for security reasons
<= 5.x.x <= 3.x.x Please, please don't use these old versions

API Docs

See the reference API docs.

Tips

  • Use mb.on('after-create-window', callback) to run things after your app has loaded. For example you could run mb.window.openDevTools() to open the developer tools for debugging, or load a different URL with mb.window.loadURL()
  • Use mb.on('focus-lost') if you would like to perform some operation when using the option browserWindow.alwaysOnTop: true
  • To restore focus of previous window after menubar hide, use mb.on('after-hide', () => { mb.app.hide() } ) or similar
  • To create a native menu, you can use tray.setContextMenu(contextMenu), and pass this custom tray to menubar: const mb = menubar({ tray });. See this example for more information.
  • To avoid a flash when opening your menubar app, you can disable backgrounding the app using the following: mb.app.commandLine.appendSwitch('disable-backgrounding-occluded-windows', 'true');

More Repositories

1

art-of-node

❄️ a short introduction to node.js
JavaScript
9,640
star
2

screencat

🐈 webrtc screensharing electron app for mac os (Alpha)
CSS
3,014
star
3

cool-ascii-faces

α•™ΰΌΌΰΊˆΩ„ΝœΰΊˆΰΌ½α•—
JavaScript
1,753
star
4

yo-yo

A tiny library for building modular UI components using DOM diffing and ES6 tagged template literals
JavaScript
1,326
star
5

voxel-engine

3D HTML5 voxel game engine
JavaScript
1,269
star
6

monu

menubar process monitor mac app [ALPHA]
CSS
1,111
star
7

mississippi

A collection of useful stream utility modules for writing better code using streams
JavaScript
1,084
star
8

callback-hell

information about async javascript programming
JavaScript
815
star
9

javascript-for-cats

an introduction to the javascript programming language. intended audience: cats
JavaScript
775
star
10

websocket-stream

websockets with the node stream API
JavaScript
665
star
11

torrent

download torrents with node from the CLI
JavaScript
637
star
12

concat-stream

writable stream that concatenates strings or data and calls a callback with the result
JavaScript
570
star
13

hexbin

community curated list of hexagon logos
JavaScript
526
star
14

linux

run Linux on Yosemite easily from the CLI
JavaScript
457
star
15

geojson-js-utils

JavaScript helper functions for manipulating GeoJSON
JavaScript
403
star
16

requirebin

write browser JavaScript programs using modules from NPM
JavaScript
391
star
17

extract-zip

Zip extraction written in pure JavaScript. Extracts a zip into a directory.
JavaScript
391
star
18

maintenance-modules

a list of modules that are useful for maintaining or developing modules
348
star
19

tabby

a browser with almost no UI
JavaScript
345
star
20

ndjson

streaming line delimited json parser + serializer
JavaScript
294
star
21

abstract-blob-store

A test suite and interface you can use to implement streaming file (blob) storage modules for various storage backends and platforms
JavaScript
266
star
22

standard-format

converts your code into Standard JavaScript Format
JavaScript
265
star
23

wzrd

Super minimal browserify development server
JavaScript
248
star
24

elementary-electron

NodeSchool workshop for learning Electron
JavaScript
228
star
25

gh-pages-template

free hosting on github! fork this to get a repo with only a gh-pages branch that is easy to edit
CSS
221
star
26

taco

a modular deployment system for unix
215
star
27

toiletdb

flushes an object to a JSON file. lets you do simple CRUD with async safely with the backend being a flat JSON file
JavaScript
215
star
28

bytewiser

a nodeschool workshop that teaches you the fundamentals of working with binary data in node.js and HTML5 browsers
HTML
208
star
29

csv-write-stream

A CSV encoder stream that produces properly escaped CSVs
JavaScript
204
star
30

electron-spawn

easy way to run code inside of a headless electron window from the CLI
JavaScript
198
star
31

voxel

tools to work with voxel generation and meshing in javascript
JavaScript
186
star
32

monocles

[NOT MAINTAINED] diaspora... as a couchapp! in pure javascript and fully OStatus compliant (almost)
JavaScript
180
star
33

simplify-geojson

apply the ramer-douglas-peucker line simplification to geojson features or feature collections in JS or on the CLI
JavaScript
170
star
34

nugget

minimalist wget clone written in node. HTTP GET files and downloads them into the current directory
JavaScript
162
star
35

electron-microscope

use electron-microscope to inspect websites and extract data
JavaScript
157
star
36

domnode

node style streams for HTML5 APIs
JavaScript
154
star
37

voxel-builder

build stuff with blocks in the browser, export for papercraft or 3d printing
CSS
149
star
38

multiplex

A binary stream multiplexer
JavaScript
141
star
39

gifify-docker

docker container for the gifify utility
135
star
40

csv-spectrum

A variety of CSV files to serve as an acid test for CSV parsing libraries
JavaScript
134
star
41

async-team

Documentation about how to run an async team (e.g. a remote team in different places)
132
star
42

node-repl

run a node program but also attach a repl to the same context that your code runs in so you can inspect + mess with stuff as your program is running. node 0.12/iojs and above only
JavaScript
129
star
43

datacouch

[ON HIATUS] distributed, collaborative dataset sharing
JavaScript
122
star
44

HyperOS

A 50MB linux distribution that has dat-container for booting live containers on mac OS
Shell
119
star
45

couchpubtato

use Node.js to make CouchDB eat feeds like potato chips
JavaScript
116
star
46

voxel-mesh

generate a three.js mesh from voxel data
JavaScript
109
star
47

browser-locale

normalizes weird cross browser issues and tries to return the users selected language in 100% client side JS by looking at various properties on the `window.navigator` object
JavaScript
106
star
48

binary-csv

A fast, streaming CSV binary parser written in javascript
JavaScript
105
star
49

cats

BSD licensed cat photos that I've taken
103
star
50

filereader-stream

Read an HTML5 File object (from e.g. HTML5 drag and drops) as a stream.
JavaScript
102
star
51

nets

nothing but nets. http client that works in node and browsers
JavaScript
101
star
52

javascript-editor

codemirror + esprima powered html5 javascript editor component
JavaScript
99
star
53

adventure-time

a web based environment for doing nodeschool adventures
JavaScript
97
star
54

workerstream

use HTML5 web workers with the node stream API
JavaScript
92
star
55

tree-view

tree viewer UI widget made with react
JavaScript
91
star
56

packify

packs up browserify apps by inlining all assets into one html file
JavaScript
89
star
57

ViewKit

UI library designed for WebKit/Mobile Safari/Android WebViews
JavaScript
87
star
58

gut

hosted open data filet knives
JavaScript
86
star
59

conversationThreading-js

javascript port of JWZ email conversation threading
JavaScript
83
star
60

refine-python

Python client library for controlling Google Refine
Python
83
star
61

require-times

find out how long require calls take in your program. this is a debugging tool for figuring out why apps load slowly
JavaScript
77
star
62

binary-split

a fast newline (or any delimiter) splitter stream - like require('split') but specific for binary data
JavaScript
77
star
63

commonjs-html-prettyprinter

easy HTML pretty printing in commonJS
JavaScript
76
star
64

voxel-server

multiplayer server for voxel-engine
JavaScript
74
star
65

nginx-vhosts

Programmatically add or remove vhosts to a running Nginx instance
JavaScript
71
star
66

github-oauth

simple node.js functions for doing oauth login with github
JavaScript
71
star
67

get-dat

A command line tutorial to learn dat
HTML
69
star
68

docker-stream

CLI tool for automating the use of docker containers in streaming data processing pipelines. Works on Windows, Mac and Linux.
JavaScript
68
star
69

ogmail

minimalist gmail cli client
JavaScript
63
star
70

dhtkv

CLI for storing arbitrary key/value data in the bittorrent mainline DHT
JavaScript
63
star
71

voxel-hello-world

a template voxel game repo you can use to build your own voxel games
JavaScript
62
star
72

browser-module-sandbox

browser editor for code that gets 'compiled' on the server with node and run on the client
JavaScript
61
star
73

minecraft-skin

load minecraft skins as meshes in three.js applications
JavaScript
58
star
74

atomic-queue

a crash friendly queue that persists queue state and can restart. uses a worker pool and has configurable concurrency
JavaScript
57
star
75

PDXAPI

JSON API for CivicApps.org datasets for Portland, OR
JavaScript
53
star
76

googleauth

Create and load persistent Google authentication tokens for command-line apps
JavaScript
52
star
77

joinopenwifi

automatically join open and internet connect wireless networks on linux
JavaScript
51
star
78

superlevel

a minimalist cli utility for leveldb databases
JavaScript
51
star
79

ble-stream

experimental duplex stream api over bluetooth low energy connections (BLE)
JavaScript
50
star
80

json-merge

given two streams of newline delimited JSON data perform a merge/extend on each object in the stream
JavaScript
49
star
81

haraka-couchdb

a real time email server using nodejs, haraka and couchdb
JavaScript
49
star
82

multirepo

a power tool for batch processing multiple github repositories
JavaScript
49
star
83

mount-url

mount a http file as if it was a local file using fuse
JavaScript
48
star
84

dat-editor

web app console/dashboard/spreadsheet thingy for dat
CSS
47
star
85

csv2html

CSV to HTML command line utility
JavaScript
47
star
86

collaborator

easily add new collaborators to your github repos from the CLI
JavaScript
46
star
87

subcommand

Create CLI tools with subcommands. A minimalist CLI router
JavaScript
44
star
88

blockplot

[alpha] explore minecraft worlds in your browser
JavaScript
44
star
89

refine-ruby

Ruby client library for controlling Google Refine
Ruby
43
star
90

element-class

exactly like .addClass and .removeClass from jquery but without dependencies
JavaScript
42
star
91

biofabric

a client side module for generating biofabric graphs in svg using d3
JavaScript
42
star
92

dat-core

low level implementation of the dat data version graph
JavaScript
42
star
93

kawaii

kawaii face detection
JavaScript
41
star
94

doorknob

convenience module for adding Mozilla Persona user login + LevelDB based session storage to node web apps
JavaScript
38
star
95

stl-obj-viewer

super simple viewer for .stl or .obj files powered by three.js
JavaScript
38
star
96

ftpfs

an ftp client that expose the node fs API
JavaScript
38
star
97

xml-json

convert xml to json on the command line. not streaming, pure javascript
JavaScript
37
star
98

ndarray-stl

convert voxels into 3D printable .stl files
JavaScript
37
star
99

masseuse.js

a (now deprecated) library for fast taps on mobile browsers
JavaScript
37
star
100

current-location

Get your current location (latitude, longitude) on the command line as JSON
JavaScript
37
star