How can I get Screen from BrowserWindow in Electron

In Electron, if you want to retrieve screen information from BrowserWindow, one common approach is to use the screen module, which provides APIs for obtaining screen dimensions and display details. Here's a step-by-step guide with examples to achieve this functionality:

Step 1: Import Necessary Modules

In your Electron main process, import app and BrowserWindow to create windows, and the screen module to retrieve screen information. Example code:

javascript
const { app, BrowserWindow, screen } = require('electron');

Step 2: Wait for Application Readiness

Before creating the window, ensure the Electron application is fully loaded:

javascript
app.whenReady().then(createWindow);

Step 3: Create Window and Retrieve Screen Information

Within the createWindow function, create an instance of BrowserWindow and use the screen module to retrieve screen information. For example, obtain the size of the primary display and set the window size accordingly:

javascript
function createWindow() {
    // Retrieve the size of the primary display's screen
    const { width, height } = screen.getPrimaryDisplay().workAreaSize;

    // Create the browser window
    const mainWindow = new BrowserWindow({
        width: width,
        height: height
    });

    // Load the application's index.html
    mainWindow.loadFile('index.html');

    // Open developer tools
    mainWindow.webContents.openDevTools();
}

Example: Adjust Window Position Based on Screen Information

If you want the window to appear in the bottom-right corner of the screen, calculate its initial position:

javascript
function createWindow() {
    const { width, height } = screen.getPrimaryDisplay().workAreaSize;

    // Set window size to half of the screen
    const windowWidth = width / 2;
    const windowHeight = height / 2;

    // Create browser window
    const mainWindow = new BrowserWindow({
        width: windowWidth,
        height: windowHeight,
        x: width - windowWidth, // Right-aligned
        y: height - windowHeight // Bottom-aligned
    });

    mainWindow.loadFile('index.html');

    mainWindow.webContents.openDevTools();
}

Summary

This enables you to dynamically adjust the window size and position when creating Electron windows based on the actual screen configuration. This feature is particularly useful for developing multi-screen applications or applications that need to adapt to different display devices.