0

I'm currently searching for a way to display number values in the macOS menubar. Tools like iStat Menus 6 show that it's possible to display advanced widgets in the macOS menubar like number values and charts, see here.

I would like to create a number widget in my electron application. However, I cannot find a way to get started. What I have found is the Tray class from the electron package. It allows to create a tray icon using an image like a png:

const path = require('path');
const {
  app,
  Menu,
  Tray,
  } = require('electron');

let tray = null;

app.on('ready', () => {
  tray = new Tray(path.join(__dirname, '/Icon.png'));

  if (process.platform === 'win32') {
    tray.on('click', tray.popUpContextMenu);
  }

  const menu = Menu.buildFromTemplate([
    {
      label: 'Quit',
      click() { app.quit(); }
    }
  ]);

  tray.setToolTip('Clipmaster');
  tray.setContextMenu(menu);
});

How do applications like iStat create such powerful widgets? It does not look like iStat is rendering their widgets to images.

MBDev
  • 442
  • 1
  • 4
  • 14

1 Answers1

1

Electron has a (limited) way of putting text next to the tray icon in macOS:

// API: tray.setTitle(title[, options])
tray.setTitle("foo")

Unfortunately, that's as far as it seems to go. As an abstraction layer to make cross-platform development much easier, Electron often cannot provide all of an OS's native features.

iStat is not using the Electron framework (and is only available for macOS). Check out this question to see how you may write multiple lines of text into the status bar using Apple's Cocoa framework.

snwflk
  • 3,341
  • 4
  • 25
  • 37
  • I didn't have time to try this (at all), but as an afterthought: writing 2 lines (or more, if that makes any sense) may just be possible: `tray.setTitle("foo\nbar")` – snwflk Sep 01 '22 at 20:26