Electron / Node.js find third party app window position - Overlay for another app

Question

Is it possible with electron/node to find another third party app window size and position?

I want to write an overlay for a game, and position my electron window above it at a certain position according to the game window.

Answer 1

It is possible using electron-overlay-window package.

Supports:

• Windows (7 - 10)
• Linux (X11)

It tracks target windows by its title and keeps your app window right over it. It also re-attaches itself if you restart the target app/game. The only downside - it's not very documented. But basic demo is very simple if you have any experience with electron.

Pay attention - it will only work for windowed or windowed borderless modes. The electron window can not be placed over the fullscreen game.

// ...
import { overlayWindow as OW } from 'electron-overlay-window'

// ...
const win = new BrowserWindow({
  ...OW.WINDOW_OPTS,
  width: 800,
  height: 600,
  resizable: false,
  webPreferences: {
    nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
  },
})

// ... when ready
OW.attachTo(window, 'Untitled - Notepad')

// listen for lifecycle events
OW.on('attach', ev => { console.log('WO: attach', ev) })
OW.on('detach', ev => { console.log('WO: detach', ev) })
OW.on('blur', ev => { console.log('WO: blur', ev)})
OW.on('focus', ev => { console.log('WO: focus', ev)})
OW.on('fullscreen', ev => console.log('WO: fullscreen', ev))
OW.on('moveresize', ev => console.log('WO: fullscreen', ev))

You can look up more examples here:

• Ender-O for Elite Dangerous written in JS (demo video)
• Awaken PoE Trade for Path of Exile written in TS
• Simple demo from author written in TS (I recommend starting with this example)