rhysd / electron-about-window Goto Github PK
View Code? Open in Web Editor NEW'About This App' mini-window for Electron apps
Home Page: https://www.npmjs.com/package/about-window
License: MIT License
'About This App' mini-window for Electron apps
Home Page: https://www.npmjs.com/package/about-window
License: MIT License
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...
Hi @rhysd ๐
I'm trying to add an about menu to https://github.com/beakerbrowser/beaker and seeing this error:
The app is using the new ES import style which is a bit unfamiliar to me:
import {default as openAboutWindow} from 'electron-about-window'
Is what I'm doing now, and:
{
label: 'Beaker',
submenu: [
{
label: 'About This App',
click () { openAboutWindow() }
}
}
Any ideas what I'm doing wrong?
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.
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.
I thought that adding the homepage link it would show some text linking to it. I checked other important apps and none have such behavior (on Mac).
... 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:
The same build on windows shows the following about window:
Any idea why:
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({
...
}),
},
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.
Please, update demo project with sample that uses custom CSS file, I am not able to figure out, all I get is 404 error.
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.```
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:
webPreferences
options in order to enhance the security:nodeIntegration: false,
webSecurity: true,
sandbox: true,
This might involve supporting thorough/deep win_options.webPreferences
merging.
renderer.js
needs to be loaded as a preload script instead of loading it on the page here: electron-about-window/about.html
Line 24 in 6aa4803
process
should happen via remote proxy as remote.process.versions
but not directly like here: electron-about-window/src/renderer.ts
Line 67 in 6aa4803
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
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.
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;
}
I get the following warninig when starting the about window with Electron 7:
'getName function' is deprecated and will be removed. Please use 'name property' instead.
See here: https://github.com/electron/electron/blob/master/docs/api/app.md#appgetname
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
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):
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!):
Since this change is more basic than what is currently in renderer.ts
I assume it should work with more configurations...
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
But from the second, each time I click the menu About this app
, the win_options
will not work
This window has titleBar, and it can be moved, resized and more.
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.
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'.
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
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
?
Can I somehow pass localised string (for example for found bug?
)
But this should probably be added as a feature for this in general
๐
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.
Nice module!
Would be nice to have the option to put HTML inside the attributes (like description)
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.
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);
});
The current implement of openAboutWindow
supports calling it from the main process only. Please consider adding support for calling it from a renderer process.
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
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)
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".
it would be helpful to support an array of css_paths
and it would be helpful to allow productName to be specified in the options, rather than being read only from package.json
(PR coming)
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
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>
});
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)
I made a fork to make this package work seamlessly with Electron 14+
yarn add @nosferatu500/about-window
npm install @nosferatu500/about-window
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.
Looks unnecessary for my case and I'd like to hide it.
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.
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.
Is it possible to set the icon in the top left of the about window as you can for a browser window created directly?
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.