Please give me a simple guide to glass an electron window when it's not in focused,

I have found an event for that from (the code is bellow) but I don't know how to use it. and I can't find a way to glass the focusedWindow (from : .md#winfocus)

var app = require('app');

app.on('focused-window', function (focusedWindow) {
  doSomethingWithTheFocusedWindow(focusedWindow);
});

Please give me a simple guide to glass an electron window when it's not in focused,

I have found an event for that from https://github./electron/electron/issues/1985 (the code is bellow) but I don't know how to use it. and I can't find a way to glass the focusedWindow (from : https://github./electron/electron/blob/master/docs/api/browser-window.md#winfocus)

var app = require('app');

app.on('focused-window', function (focusedWindow) {
  doSomethingWithTheFocusedWindow(focusedWindow);
});

• javascript
• html
• css
• electron

• What do you mean glass a window? Do you mean fill it with content? – Kalnode Commented Feb 16, 2019 at 22:17
• I wan't the window's opacity to be about .5 or transparent somehow – thakee nathees Commented Feb 16, 2019 at 22:18
• you could use setOpacity, although this only works on Windows and MacOS (not Linux). It could be set in the blur and focus events for the window, to change opacity when it's in the background. – David784 Commented Feb 16, 2019 at 22:46

2 Answers 2

This works for me on macOS:

app.on ('browser-window-blur', function (event, browserWindow)
{
    browserWindow.setOpacity (0.5);
});
//
app.on ('browser-window-focus', function (event, browserWindow)
{
    browserWindow.setOpacity (1.0);
});

It seems that the app events interface has somehow evolved since the proposal you've mentioned. The events are named browser-window-focus and browser-window-blur and the associated callback function makes use of two parameters: event and browserWindow.

After looking at your question a little more carefully, it looks as if you might be having a little confusion between app, BrowserWindow, and some of the other ponents within electron. Here is a little more verbose example that hopefully ties all of the pieces together.

In a nutshell, the app is referred to as the main process, which is not actually a Browser Window (also called a renderer process) itself. You have to create any windows you want. If you need it, munication between the main process and renderer processes is handled through Inter-Process Communication channels.

const { app, BrowserWindow } = require('electron');
app.on('ready', () => {
  let child = new BrowserWindow({ parent: top, show: false });
  child.loadURL('https://github.');
  child.on('focus', () => { child.setOpacity(1); });
  child.on('blur', () => { child.setOpacity(0.5); });
  child.once('ready-to-show', () => {
    child.show();
  });
});