Electron：使浏览器窗口粘在屏幕一侧

Question

Am trying to make a browser window that sticks to the side of the screen, which I did manage to achieve however, when I change my display settings to a smaller aspect ratio and turn it back (my way of testing) the window stays in the place it moved too and not back to the side of my screen.

This is my current code for the browser window:

function createWindow() {
  const {width,height} = screen.getPrimaryDisplay().workAreaSize;
  const mainWindow = new BrowserWindow({
    frame: false,
    width: 500,
    height: 500,
    useContentSize: true,
    backgroundColor: '#000000',
    transparent: true,
     resizable: true,
    x: width - 500,
    y: height - 450,
    visibleOnAllWorkspaces: true,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    }
   
  });

I was wondering if the window positions only get run once then the x and y positions arent checked again?

PS : Am pretty new to Electron any tips going forward will be appreciated

Answer 1

You need to dynamically adjust the bounds of the main window each time the display settings change (could be the macOS Dock becoming visible or hidden, or the screen resolution being set to a different aspect ratio, etc.).

The screen API defines several events the app can listen to, including 'display-metrics-changed' :

Event: 'display-metrics-changed'

Returns:

• event Event
• display Display
• changedMetrics String[]

Emitted when one or more metrics change in a display . The changedMetrics is an array of strings that describe the changes. Possible changes are bounds , workArea , scaleFactor and rotation .

Your createWindow function could be updated that way (quickly tested in Electron Fiddle , may need more adjustments):

function createWindow() {
  const {width,height} = screen.getPrimaryDisplay().workAreaSize;
  const mainWindow = new BrowserWindow({
    frame: false,
    width: 500,
    height: 500,
    useContentSize: true,
    backgroundColor: '#000000',
    transparent: true,
     resizable: true,
    x: width - 500,
    y: height - 450,
    visibleOnAllWorkspaces: true,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    }

  });

  screen.on('display-metrics-changed', (event, display, changedMetrics) =>
  {
    // console.log(display, changedMetrics);
    const {x, y, width, height} = display.workArea;
    // console.log(x, y, width, height);
    mainWindow.setBounds({x: width - 500, y: height - 450, width: 500, height: 500})
  });

}