rhysd/electron-about-window

'About This App' mini-window for Electron apps

'About This App' Window for Electron Apps

This package provides 'About This App' window for Electron applications.

• Create 'About This App' window from given parameters
  • Icon path
  • Copy right
  • App name and Versions
  • Description
• Gather package information from package.json
• Automatically detect package.json
• Adjust window size to its contents automatically
• Optional close button
• CSS customizability

You can install this module via npm.

$ npm install about-window

Usage

Only one function is exported as default. Please see TypeScript type definition. The function can be called from both main process and renderer process.

export default function openAboutWindow(info: {
    icon_path: string;
    product_name?: string;
    package_json_dir?: string;
    about_page_dir?: string;
    bug_report_url?: string;
    bug_link_text?: string;
    copyright?: string;
    homepage?: string;
    description?: string;
    license?: string;
    css_path?: string | string[];
    adjust_window_size?: boolean;
    win_options?: BrowserWindowOptions;
    use_version_info?: boolean | [string, string][];
    show_close_button?: string;
    app?: Electron.App;
    BrowserWindow?: typeof Electron.BrowserWindow;
    ipcMain?: Electron.IpcMain;
}): BrowserWindow

Only icon_path property is required, others are optional. I recommend to specify as below to extract information from package.json as much as possible. Path to package.json is also automatically detected if possible.

openAboutWindow({
    icon_path: 'path/to/icon.png'
});

If string value is passed to the first parameter, it is passed to icon_path. So following is a shorthand of above code:

openAboutWindow('path/to/icon.png');

You can check an example app to know how to use this package.

$ git clone https://github.com/rhysd/about-window.git
$ cd about-window/example
$ npm install
$ npm start

# Or for debug
$ npm run debug

Parameter's properties of openAboutWindow()

Name	Description	Type
icon_path	Path to icon file of the application. The path is passed to src property of <img> element. Required	string
package_json_dir	Path to directory which contains package.json. If not specified, it will try to detect a path to package.json. If also failed, it gives up and show less information in 'About This App' window. Optional	string
bug_report_url	URL to bug report page. If not specified, 'bugs' entry in package.json is used. Optional	string
copyright	Copyright notice shown in window. If not specified, it is replaced with license description generated by 'license' entry of package.json. Optional	string
homepage	URL of application's web page. If not specified, 'homepage' entry of package.json is used instead. Optional	string
description	Description of the application. If not specified, 'description' entry of package.json is used instead. Optional	string
license	License of the application. If not specified, 'license' entry of package.json is used instead. This property is used when copyright is not specified. Optional	string
win_options	Options of 'About This App' window. It is merged into default options. Optional	BrowserWindow options object
css_path	Path(s) to user-defined CSS file. It will be inserted to DOM of the window. Optional	(array of) string
adjust_window_size	Adjust the window size to its content not to show scroll bar. Optional	boolean
open_devtools	For debug purpose, Chrome DevTools will start when the window is opened. Optional	boolean
use_inner_html	If true, set the value with .innerHTML on copyright, license and description Default is false. Optional	boolean
bug_link_text	Text for a bug report link. Optional	string
product_name	Name of the application Optional	string
use_version_info	If is false, nothing will be displayed, if is true, the versions of electron, chrome, node, and v8 will be displayed, if is an array of string tuple, its entries will be displayed. Default is true. Optional	boolean
show_close_button	If this is a valid string, a close button with this string be displayed. Optional	string
about_page_dir	Directory path which contains about.html which is rendered in 'About this app' window. Optional	string
app	app instance to use. This property is necessary only when using on renderer processes. Optional	Electron.App
BrowserWindow	Constructor of BrowserWindow to use. This property is necessary only when using on renderer processes. Optional	Electron.BrowserWindow
ipcMain	ipcMain instance to use. This property is necessary only when using on renderer processes. Optional	Electron.IpcMain

Note: If you set use_inner_html to true, please ensure that contents don't contain any untrusted external input in order to avoid XSS. Be careful.

Open the window from non-main process

Since openAboutWindow() depends on several APIs only available on main process, they must be provided by caller when it is called on non-main process.

To mimic the APIs, use @electron/remote module.

import {app, BrowserWindow, ipcMain} from '@electron/remote';

openAboutWindow({
    icon_path: 'path/to/icon.png'
    app,
    BrowserWindow,
    ipcMain,
});

Screen Shots

Linux

OS X

Windows

License

MIT License.