CODEWITHSUNDEEP
javascriptmacoselectron
Brian Zelip
Brian Zelip

Reputation: 3191

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

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

Upvotes: 10

Views: 2794

Answers (2)

Scott Rippey
Scott Rippey

Reputation: 15810

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"
  });

Upvotes: 9

spring
spring

Reputation: 18487

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.

Upvotes: 5

Related Questions