GithubHelp home page GithubHelp logo

rhysd / electron-about-window Goto Github PK

View Code? Open in Web Editor NEW
410.0 9.0 46.0 1.9 MB

'About This App' mini-window for Electron apps

Home Page: https://www.npmjs.com/package/about-window

License: MIT License

HTML 6.12% JavaScript 15.31% TypeScript 71.40% CSS 7.17%
electron utility

electron-about-window's Introduction

'About This App' Window for Electron Apps

npm version

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

Linux screenshot

OS X

OS X screenshot

Windows

Windows screenshot

License

MIT License.

electron-about-window's People

Contributors

aglezabad avatar alexanderturinske avatar bampakoa avatar dependabot[bot] avatar h3poteto avatar jhnferraris avatar kondoumh avatar mnakalay avatar noob9527 avatar ossandust avatar rhysd avatar shortsn avatar starpit avatar tsvetilian-ty avatar vages avatar will-stone avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

electron-about-window's Issues

About window not opening after pack

I don't know if anyone else has this issue, but I built an app that lives in the system tray, that has no frame, no menu or anything. Using IPC, I'm able to open the about window by sending a message from the renderer to the main process, but when I pack up the app to distribute it, it won't open.

I tried opening the window from the renderer process, but I can't get the logo to show up or read the package.json for the version of everything.

Version should be overridable by custom version string

I use about-window to provide an api for plugins which can show an about window on their own.
This works as designed, but the version displayed is the version of the host app, since about.html shows the version of remote.app.getVersion() instead of package.json's version .

It would be beneficial to first use options.version
then lookup package.json's version,
then fallback to remote.app.getVersion()

I can provide a PR for this soon, if desired. else I will resort to roll my own fork of this cool package

let me know your thought,

cheers

Calling openAboutWindow multiple times presents multiple about windows

I'm using electron:^16.0.5, about-window:^1.15.2, and running on Mac OS Big Sur 11.6.1.

Wiring up a call to openAboutWindow from my About context menu item's click handler, the About window opens as expected when the menu item is chosen.

However, if the menu item is chosen again before the About window is closed, multiple About windows will be presented.

Is it possible to show the first window if it is still present?

{
  label: 'About',
  click: () => openAboutWindow({
    ...
  }),
},

How to include CSS file

Please, update demo project with sample that uses custom CSS file, I am not able to figure out, all I get is 404 error.

win_title doesn't work.

Hi,
Thanks for this project. I have a problem, the string set with the parameter win_title doesn't work. The window conserve the default name About {app name}.

Electron: 6.0.6
Node: 12.4.0

Any idea to fix this?
Thanks.

Customize the windows's title

Currently there's no way to override the current logic of appending product name to 'About ' string. For example, I'd like to title the window just after the product name without the 'About' part.

used innerHtml to include link to 3rd party deps but link opens both about window and default browser

So I included some links to 3rd party dependencies in my copyright in the about window. standard a href.. clicking those opens the link in the system's default browser but also in the about window. So it seems like the will-navigate and/or new events are captured but the event prevention is not happening (or some other event is propagating the navigation within the about window. I did experiment and added target="_blank" to the a tags.. this got me a different result (but also not desired).. the link opens in system default browser and a new electron window with the about window remaining intact.. has anyone else noticed this? seems like linking to 3rd party deps would be a pretty standard thing. Is there some sort of trick to getting this to function with about window remaining intact and the link opening in the system default browser (I'd even be ok with a new electron window)..

thanks!

about-window: 1.13.1
electron: 4.2.4
chrome: 69.0.3497.128
node: 10.11.0
v8: 6.9.427.31-electron.0

`win_options` will not work from second time

About-window version: ^1.12.1(install from npmjs.com)
ElectronJS Version: ^3.0.7
OS: macOS Mojave 10.14.2

Details in Codes

const aboutWindowInfo = {
  icon_path: path.join(__dirname, '/assets/icon.png'),
  open_devtools: false,
  use_version_info: false,
  win_options: {titleBarStyle: 'hidden', minimizable: false, movable: false, resizable: false,maximizable: false}
}
{
    label: `About this app`,
    click: () => openAboutWindow(aboutWindowInfo)
}

When run this app and click the menu About this app for first time, the win_options will work well

screen shot 2018-11-06 at 3 05 36 pm

But from the second, each time I click the menu About this app, the win_options will not work

screen shot 2018-11-06 at 3 05 49 pm

This window has titleBar, and it can be moved, resized and more.

More examples, please

I try to use this in my electron application, but I would like to exchange the about.html as well as the referenced style. I use electron-packager to build my .exe for windows.

Could you provide some examples how the file structure of the project has to be and how the path variables have to be set in order to get this done?
I tried
icon_path: path.join(__dirname, '/../assets/icons/png/64x64.png') --> works
css_path: path.join(__dirname, '/../assets/css/style.css') --> doesn't work (it says DevTools was disconnected from page, and About-Info window is blank.

Bildschirmfoto 2019-10-01 um 07 49 57

).

Doesn't work with sandbox option enabled (via win_options)

About window doesn't show a window content. Not sure about all the platforms but it certainly doesn't work on Linux with Electron v5. I guess because Electron v5 goes with enhanced sandboxing enabled by default.

The reason is that require is forbidden to use in the web page scope.

Workaround is in loading the renderer.js as a preload script, so you add similar win_options option calling the function:

aboutWindow({
    win_options: {
        webPreferences: {
            preload: path.join(__dirname, "./node_modules/about-window/src/renderer.js"),
            // nodeIntegration: false,
            // webSecurity: true,
            // sandbox: true,
        },
    },
});

What can be done in order to fix the issue:

  • The module should set the default webPreferences options in order to enhance the security:
nodeIntegration: false,
webSecurity: true,
sandbox: true,

This might involve supporting thorough/deep win_options.webPreferences merging.

ASAR packaging breaks this module

Hello,
Although running in dev runs well, when packaging this app through electron-builder into an ASAR archive, this module breaks completely. Trying to require about.html in the wrong folder.
Thank you.

Add support for renderer process

The current implement of openAboutWindow supports calling it from the main process only. Please consider adding support for calling it from a renderer process.

Application crashes when used with electron 3

As soon as the window opens, it crashes the node process. No errors or warnings are output.

Reproducible in the example app by changing the electron dependency to 3.0.7.
I'm using node v10.13.0

How to import "openAboutWindow"

I try to import like this:

import openAboutWindow from 'about-window'

or

import { default as openAboutWindow } from 'about-window'

but all I get is "openAboutWindow" is not a function error message

Feature request: Copy to clipboard button

Can I request you to implement an optional button that the user can click to copy all the information in the About dialog into their clipboard. This is super-useful from VSCode (another electron app), and very much needed when logging bugs.

Feature request: update checker

One of the great features of many About windows is the ability to check for updates. I was wondering if it would be a nice addition to this package? I can imagine it working by checking the installed version against GitHub releases (https://developer.github.com/v3/repos/releases/). Then opening a browser to the page if an update is found. I'll take a look if I have time, but if it's easy and you have a moment, I'd love to see this.

Windows 11 screenshot?

Just wanna see what a Windows 10 build looks like (even if it looks the same as the windows 8 build).

EDIT: Windows 11 is now out so now a Windows 11 screenshot...

Typescript error with BrowserWindowOptions

When Webpack tries to build my app, this mistake appears:

ts-loader: Using [email protected] and /Users/me/Myapp/app/node_modules/about-window/src/tsconfig.json

Error: ./app/~/about-window/src/lib.d.ts
(26,28): error TS2694: Namespace 'Electron' has no exported member 'BrowserWindowOptions'.
  • Electron version: 1.6.10
  • Operating system: macOs 10.12.5

Typescript error - Cannot find name AboutWindowInfo

When trying to build a typescript project with the latest version (1.15.1) it breaks :

node_modules/about-window/src/index.d.ts:2:59 - error TS2304: Cannot find name 'AboutWindowInfo'.

2 export default function openAboutWindow(info_or_img_path: AboutWindowInfo | string): Electron.BrowserWindow;
                                                            ~~~~~~~~~~~~~~~


Found 1 error.```

Request feature: Use our own html file

Hi @rhysd, thanks for this nice project :)

I was wondering if you could pimp a little bit this proejct to allow usage of our own .html file?

And also add a empty div where we could put some inline html with:

aboutWindow({
      icon_path: path.join(__dirname, 'images/about-icon.png'),
      package_json_dir: __dirname,
      customDiv: '<p><b>This</b> is a dynamic content</p>
    });

About window on windows seems pretty limited

... or i am messing it up.

I am using about-window 1.13.4 and the about window on linux is as i am expecting it. See screenshot:

media_dupes_on_linux2020-06-23 21-16-08

The same build on windows shows the following about window:

84192162-e2340680-aa99-11ea-953c-e8c46ab95f04

Any idea why:

  • the image is missing on windows
  • the version string is wrong?
  • almost anything else is missing as well :)

Localisation

Can I somehow pass localised string (for example for found bug?)

But this should probably be added as a feature for this in general

๐Ÿ˜„

`remote` does not exist when app is launched without Electron run-time

Hello.

I upgraded to the latest version of about-window (1.13.3) but it broke my app during its CI.

Since it's an electron app, we also have a mode to run it without the electron runtime, namely for debug purposes and launch in CI (since the app can also do some CLI stuff)

When not loaded via the Electron runtime, the app and remote objects are undefined. This is normally not a problem as in my own application I test if app is defined before doing anything with it.

However, on line 5 of index.ts the code tries to get remote.app except that since remote is undefined, it crashes my application on startup when importing, since the code is at the top level of the module and is executed, wether electron is loaded or not.

A quick fix would be to test if remote exists as well before trying to use remote.app or if you're using a recent typescript, an optional chaining like remote?.app which works wonders in those cases.

For now I pinned my version of about-window to 1.13.2 while waiting for a fix :)

Thanks in advance.

Cannot load local resource

I get the following:
Not allowed to load local resource: file://node_modules/about-window/about.html

Might it be that it it is not compatible with electron-webpack?
I am using electron-version 1.7.10

Using html

Nice module!

Would be nice to have the option to put HTML inside the attributes (like description)

electron: Failed to load URL: file:///Users/xxx/out/main/about.html with error: ERR_FILE_NOT_FOUND

import openAboutWindow from 'about-window'
export const createAboutWindow = () => openAboutWindow('../resources/logo.png')

It's terrible. Using it like this, running it gets an error like this

Uncaught Exception:
TypeError: module.paths is not iterable
at detectPackageJson (/Users/tiven/Desktop/dev/post-tools/out/main/index.js:204:35)
at injectInfoFromPackageJson (/Users/tiven/Desktop/dev/post-tools/out/main/index.js:223:17)
at openAboutWindow2 (/Users/tiven/Desktop/dev/post-tools/out/main/index.js:343:12)
at createAboutWindow (/Users/tiven/Desktop/dev/post-tools/out/main/index.js:353:3)
at MenuItem.click (node:electron/js2c/browser_init:2:30394)
at a._executeCommand (node:electron/js2c/browser_init:2:35790)

Console log prompt

(node:24956) electron: Failed to load URL: file:///Users/xxx/out/main/about.html with error: ERR_FILE_NOT_FOUND
(Use `Electron --trace-warnings ...` to show where the warning was created)

for loop syntax error

I'm new to electron, and I am going through an out of date and incomplete tutorial for nteract. I wanted to see the version numbers so I installed about-window. However, I get a syntax error (shown from about-window devtools):
Screen Shot 2021-03-10 at 5 24 39 PM
I'm not sure if this is because I'm using an old version of something or a new version of something (or a bad mix). However, the fix for this (in the JS) is:

*** about-window/src/renderer.js~	2021-03-10 17:13:43.000000000 -0500
--- about-window/src/renderer.js	2021-03-10 17:14:25.000000000 -0500
***************
*** 63,75 ****
          const version_info = Array.isArray(info.use_version_info)
              ? info.use_version_info
              : ['electron', 'chrome', 'node', 'v8'].map(e => [e, process.versions[e]]);
!         for (const [name, value] of version_info) {
              const tr = document.createElement('tr');
              const name_td = document.createElement('td');
!             name_td.innerText = name;
              tr.appendChild(name_td);
              const version_td = document.createElement('td');
!             version_td.innerText = ' : ' + value;
              tr.appendChild(version_td);
              versions.appendChild(tr);
          }
--- 63,75 ----
          const version_info = Array.isArray(info.use_version_info)
              ? info.use_version_info
              : ['electron', 'chrome', 'node', 'v8'].map(e => [e, process.versions[e]]);
!         for (const vi of version_info) {
              const tr = document.createElement('tr');
              const name_td = document.createElement('td');
!             name_td.innerText = vi[0];
              tr.appendChild(name_td);
              const version_td = document.createElement('td');
!             version_td.innerText = ' : ' + vi[1];
              tr.appendChild(version_td);
              versions.appendChild(tr);
          }

The versions are (using about-window!):
Screen Shot 2021-03-10 at 5 45 49 PM
Since this change is more basic than what is currently in renderer.ts I assume it should work with more configurations...

package.json not used if in a different directory

I currently have a directory structure like this

mainFolder
  subFolder
    assets
      logo.png
    main.js
  package.json

in main.js I have this code

click: () => openAboutWindow({ icon_path: join(__dirname, '/assets/logo.png'), copyright: 'Copyright (c) 2018 www.example.com', package_json_dir: join(__dirname, '..') })

but the generic electron icon is loaded without the attributes that are in package.json

if main.js is moved back to mainFolder, everything works as expected

Feature request: option for dark mode

A boolean option like is_dark_mode (alternatively is_light_mode) would be very nice.

The screenshot is a suggestion, how it might look in dark mode.

About Window in dark mode

About dialog is initially blank on macOS

At first I thought it wasn't working at all since I just got a popup dialog that was blank. But after resizing the dialog (which I don't actually want it to be able to do), the act of resizing made all of the popup content appear! And the content was correct for the options I used. So, I don't know if this is something in newer Electron which is causing the popup not to do its initial render/paint. At no point have I ever seen the content show up on its own. Every time I run my app, I have to resize the popup to make the content show up. Obviously this bug makes the module unusable for me. Here is the very basic code I used:

click:function() { openAboutWindow( { icon_path:path.join( __dirname, "myicon.png" ), product_name:"My Product" } ); }

I am handling the click of a menu item with this code. If I were doing something wrong, Iwouldn't think it would show up looking correct after simply resizing the popup.

I am using macOS 10.13.6. I did not try on Windows or Linux.

Electron version shown instead of application version in dev mode

In dev mode electron version shown instead of application version.
Perhaps the version should be pulled directly from package.json or at least let the developer override it.

For now I'm using this work around:

cons info = {
    icon_path: 'path/to/icon.png'
    app,
    BrowserWindow,
    ipcMain,
}
const win = openAboutWindow(info);
const version = require("../package.json").version;

win.webContents.once('dom-ready', () => {
    win.webContents.send('about-window:info', info, info.product_name, version);
});

`package.json` not found in directory - only in prod

So in development, the package.json info loads fine, as does the image and the rest of the about-window.

However, in prod I always get an error that about-window: package.json is not found in specified directory path: /opt/company/project/

When I cd /opt/company/project/ there is most definitely a package.json there.

Here is my openAboutWindow config:

openAboutWindow({
    icon_path: path.join(__dirname, '../resources/icons/256x256.png'),
    package_json_dir: path.join(__dirname, '../'),
    product_name: appInfo.name,
    bug_report_url: 'https://git.newtelco.dev/newtelco/billing-parser-1/issue',
    copyright: '2020 Newtelco GmbH',
    homepage: 'https://git.newtelco.dev',
    description: appInfo.description,
    license: appInfo.license,
    adjust_window_size: true,
    win_options: {
      resizable: false,
    },
    show_close_button: 'Close',
  })

I've tried defining the path with __dirname, process.cwd(), and various variations of going up and down directories to land back in the correct one.

Any idea what else I could be missing and/or doing wrong?!

EDIT: I'm also logging process.cwd() and __dirname right before this call and __dirname, for example, comes out to /opt/company/project/app, so a ../ brings one into the project root directoy, where a package.json most definitely is.. I see in the source code that its basically just concatenating package.json onto the path you pass into package_json_dir so I'm really not sure whats going wrong here.

Frameless window issues

Hello,

When making the window frameless (win_options with frame: false) The icon and close button are not clickable anymore and of course, it means there's no way to close the window.

It's a simple CSS issue actually. All you need to make it work is this:

.clickable,
.buttons button {
    -webkit-app-region: no-drag;
}

About window broken in Electron 5

I have upgraded to Electron 5.0.1 and located that the about window is broken. There is no text anymore, just the (broken) icon with a "App icon" label".

not working

not working on electron 10 beta2
Uncaught TypeError: Cannot read property 'app' of undefined
at EventEmitter. (renderer.ts:11)
at EventEmitter.emit (events.js:310)
at Object.onMessage (init.ts:50)

Issue with TypeScript 2.9

When trying to call openAboutWindow in an app using TypeScript 2.9, I get this error:

TS2349: Cannot invoke an expression whose type lacks a call signature.
Type 'typeof import("/path/to/node_modules/about-window/src/index")'
has no compatible call signatures.

It seems like the TypeScript compiler is looking at index.ts instead of the type declarations in index.d.ts?

Fork for Electron 14+

I made a fork to make this package work seamlessly with Electron 14+

yarn add @nosferatu500/about-window

npm install @nosferatu500/about-window

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.