Electron and macOS: how to customize the 'About <app>' display panel that pops up when user clicks the 'About <app>' menuItem?

user_2145103 0
Viewed 1512

When writing an Electron app, the macOS build provides an "About " menu item as the first item of the first menu1. When this is clicked, a small panel pops up displaying app name, version, and copyright if available2.

How to customize the contents rendered in the panel?

The Electron menuItem role docs only mentions:

 `about` - Map to the `orderFrontStandardAboutPanel` action.

The apple docs on orderFrontStandardAboutPanel don't provide any insight.

See screenshots, including an example of a customized display panel (via GIMP):

about app menuItem from macOS electron app

about app display panel from macOS electron app

customized about gimp display panel on macOS

electron macos javascript
2 Answers

This is not nearly as pretty as what you want, but if you just want to customize the simple built-in About Panel for macOS, Electron does let you customize the text.

You simply call app.setAboutPanelOptions

  /*
    Here's how the "About" dialog is displayed: (applies to macOS only)

    <app icon>
    <applicationName>
    <applicationVersion> (<version>)
    <credits>
    <copyright>
   */
  app.setAboutPanelOptions({
    applicationName: "Name", 
    applicationVersion: "App Version",
    version: "Version",
    credits: "Credits",
    copyright: "Copyright"
  });
user_2720720

I use 'About This App' Window for Electron Apps lib. Simple, easy to implement.

Apparently it is possible to completely customize the content through the use_inner_html option but I haven't had a need to do that so can't speak to how well it works.

user_8409920
Related