Electron-About-Window - 简化您的关于界面

发表于 4年以前 · 总阅读数：3460 次

'About This App' Window for Electron Apps

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

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

You can install this module via npm.

$ npm install about-window

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;
    show_close_button?: string;
}): 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 `false`, the versions of electron, chrome, node, and v8 will not 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

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.