npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

menubar-extra

v5.0.0

Published

High level way to create menubar desktop applications with electron. Forked from menubar with extra options.

Downloads

2

Readme

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 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

screenshot

Windows

screenshot

Build Status

js-standard-style

Watch the 1HR screen recording of me coding this module: https://www.youtube.com/watch?v=PAJAvsyaHs0

This module was written for + is used by Monu

installation

npm install menubar --save

usage

create a JS program like this:

var menubar = require('menubar')

var mb = menubar()

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

make sure there is also a index.html file in dir

then use electron or electron-packager to build/run the app:

$ npm install electron-prebuilt -g
$ electron your-app.js

see example/ for a working example

the return value of mb is an event emitter with these 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 (default process.cwd()) - the app source directory
  • index (default file:// + opts.dir + index.html) - the html to load for the pop up window
  • 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
  • preload-window (default false) - Create BrowserWindow instance before it is used -- increasing resource usage, but making the click on the menubar load faster.
  • width (default 400) - window width
  • height (default 400) - window height
  • x (default null) - the x position of the window
  • y (default null) - the y position of the window
  • always-on-top (default false) - if true, the window will not hide on blur
  • show-on-all-workspaces (default true) - Makes the window available on all OS X workspaces.
  • window-position (default trayCenter and trayBottomCenter on Windows) - Sets the window position (x and y will still override this), check positioner docs for valid values.
  • show-dock-icon (default false) - Configure the visibility of the application dock icon.
  • show-on-right-click (default false) - Show the window on 'right-click' event instead of regular 'click'

events

the return value of the menubar constructor is an event emitter

  • ready - when the app has been created and initialized
  • create-window - the line before new BrowserWindow is called
  • after-create-window - the line after all window init code is done
  • 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

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 always-on-top:true