focuselectrontaskbaralways-on-top

Electron BrowserWindow shows taskbar when focused

My application is an overlay (alwaysOnTop) for a full screen game and when the user clicks on my overlay it takes focus and shows the taskbar on top of their game as well. Taking focus is fine, but I can't have the taskbar show.

It says in the BrowserWindow docs:

not a toolbox window which can not be focused on

Implying that it is possible to create a window which cannot be focused on.

Does anyone know how to create a toolbox window, or to simply avoid having the taskbar showing when clicking on the electron window?

I should mention I've tried setAlwaysOnTop and skipTaskbar. I also have transparent: true and frame: false.

The overlay I've created is the "Safelane, Midlane, Offlane" buttons. When I run the application it shows on top of the full screen app (Dota 2) like this:

enter image description here

After clicking on the interface the taskbar appears. It would be fine that the full screen app (Dota) loses focus, the task bar appears on top which breaks the continuity of the experience:

enter image description here

I would like the experience to stay like the first image--when the user clicks on anything in my overlay, the taskbar should not show.

Electron GitHub Issue

Additional Solution Info -- After using Gaafar's solution below

Setting kiosk: true in the setup does not seem to allow it to render transparent. Using setKiosk(true) within a setTimeout after the window has been opened seemed to work.

I also found that any windows using kiosk or fullscreen with transparency had rendering issue. It would render multiple times on top of itself and could not unrender items (display: none in css would do nothing). The way I fixed this was by using Electron Window Manager creating a single kiosk window with nothing in it and creating other non-kiosk windows with the HTML / CSS interfaces. The result:

  1. All of the interfaces can be interacted with, mouse and keyboard.
  2. Rendering happens as it does regularly in electron.
  3. The fullscreen application below receives input through any transparent areas.
  4. Taskbar never shows up on any input.
Solution

  • skipTaskbar: true is to prevent showing your app in the taskbar.

    To hide the taskbar altogether use fullscreen or kiosk mode instead

    fullscreen: true or kiosk: true

    EDIT: There are some issues open where fullscreen or kiosk modes prevent the transparency of the window. A solution that works for me is to run with these flags --enable-transparent-visuals --disable-gpu

    issue & solution: https://github.com/electron/electron/issues/2170#issuecomment-145942717