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>