CODEWITHSUNDEEP
javascriptelectrondesktop-application
Sarang
Sarang

Reputation: 117

Freeze all windows/apps and just show the electron.js app fullcsreen

I am trying to build a desktop app using electron.js. I want it to behave something similar to how online test taking applications are, where user can access nothing but only that test app, except that this behavior should be happening for my electron app. I want this freeze to toggle on click of a button in my app.

After getting some code from AI assistant, I got this, but it ain't working and being a novice in Electron.js I am unable to move ahead.

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <title>Hello World!</title>
</head>

<body>
  <h1>Block Other Applications</h1>
  <button id="blockButton">Block Other Apps</button>

  <!-- You can also require other files to run in this process -->
  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('blockButton').onclick = () => {
      alert('Blocking!')
      ipcRenderer.send('block-apps');
    };
  </script>
</body>

</html>

main.js

const path = require('node:path')

app.whenReady().then(createMainWindow);

ipcMain.on('block-apps', (event) => {
  createOverlayWindow();
});

ipcMain.on('restore-apps', (event) => {
  if (overlayWindow) {
    overlayWindow.close();
    overlayWindow = null;
  }
});

app.on('window-all-closed', () => {
  app.quit();
});

//Code to create an overlay
let mainWindow;
let overlayWindow;

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadFile('index.html');
}

function createOverlayWindow() {
  overlayWindow = new BrowserWindow({
    width: 1920, // Set based on your screen resolution
    height: 1200, // Set based on your screen resolution
    frame: false,
    transparent: true,
    alwaysOnTop: true,
    resizable: false,
    movable: false,
    fullscreen: true,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  overlayWindow.loadFile('overlay.html');
}

overlay.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Overlay</title>
  <style>
    body {
      background-color: rgba(0, 0, 0, 0.8);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    Other applications are blocked.
    <br><br>
    <button id="restoreButton">Restore Access</button>
  </div>

  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('restoreButton').onclick = () => {
      ipcRenderer.send('restore-apps');
    };
  </script>
</body>
</html>

Upvotes: 0

Views: 41

Answers (1)

KLASANGUI
KLASANGUI

Reputation: 1144

The output you got from your AI assistant is not what you need.

What you need to do is make your electron app fullscreen then bind any events that could change the window focus to a function like this:

Event =>
{
  if ( ! Event.Will.Make.Window.Lose.Focus ) return;
  
  // Prevent the action that would change the window focus.
  Event.preventDefault();
  
  // Try to force this window to receive the focus.
  window.focus();
  
  // You can do any other thing here too.
}

You should look for events like keypress, keyup, keydown and focusout.

NOTE: You must change Event.Will.Make.Window.Lose.Focus to a test that will verify if the Event really is something that would make the window lose focus.

Upvotes: 0

Related Questions