Прозрачное, нефокусируемое и кликабельное окно браузера в Electron ⇐ Javascript

[Anonymous]

Я создаю кнопку, на которую можно нажимать, но которая не переводит приложение на передний план. Для этого я реализовал кнопку как отдельное окно BrowserWindow с focusable: false и его родителем, установленным в исходное окно (и исходное окно, и окно моей кнопки прозрачны):

Код: Выделить всё

const buttonWin = new BrowserWindow({
parent: containerWindow,
show: false,
width: 98,
height: 24,
frame: false,
transparent: true,
focusable: false,
resizable: false,
skipTaskbar: true,
useContentSize: true,
fullscreenable: false,
minimizable: false,
maximizable: false,
hasShadow: false,
acceptFirstMouse: false,
alwaysOnTop: true,
webPreferences: {
preload: path.join(__dirname, '../preload.js'),
contextIsolation: true,
}
});

Это прекрасно работает в Windows, но на Mac ведет себя странно. Я протестировал это, нажав кнопку, когда у меня был открытый раскрывающийся список в активном окне другого приложения. Если я нажму крайнюю левую часть кнопки, раскрывающийся список в другом приложении останется открытым, но щелчок по нему в другом месте закроет раскрывающийся список. Чтобы отладить его, я вошел в handleClick() кнопки:

Код: Выделить всё

import { html, css, LitElement } from '../../ui/assets/lit-core-2.7.4.min.js';

export class ButtonView extends LitElement {
static properties = {};

static styles = css`

* {
font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
cursor: default;
user-select: none;
}

.button-blue {
background: transparent;
color: #00bfff;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 4px 8px;
border-radius: 3px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
height: 24px;
min-width: fit-content;
transition: background-color 0.15s ease;
white-space: nowrap;
}

.button-blue:hover {
background: rgba(255, 255, 255, 0.15);
}

.button-blue:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.button-blue:disabled:hover {
background: transparent;
}
`;

constructor() {
super();
this.handleClick = this.handleClick.bind(this);
}

async handleClick() {
console.log('[ButtonView] document.hasFocus():', document.hasFocus());
// My app logic
}

render() {
return html`




Next

`;
}
}

customElements.define('button-view', ButtonView);

В Windows нажатие кнопки всегда давало [ButtonView] document.hasFocus(): false, как и ожидалось. Но в Mac нажатие на него всегда давало [ButtonView] document.hasFocus(): true, даже когда я нажимал кнопку в крайнем левом углу, а раскрывающийся список в моем ранее активном приложении оставался открытым. Кнопка реагирует на нажатия, но фокусирует внимание на моем приложении на Mac.
Окно кнопки прозрачно и не фокусируется, но на него можно нажать. Мой код хорошо работает в Windows, но есть ли способ добиться этого на Mac?

Подробнее здесь: https://stackoverflow.com/questions/798 ... n-electron