yangannyx/main.js Secret

## main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow, BrowserView } = require('electron')
const path = require('node:path')
let mainWindow;

function createWindow() {
  // Create the browser window
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    titleBarStyle: "hiddenInset",
    // transparent: true,
    // vibrancy: 'under-window',
    // backgroundColor: "#00000000",
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // Dummy browserView
  // Uncomment this to the BrowserWindow to sacrificially be the BrowserView whose
  // content is wiped by the BrowserWindow vibrancy

  // const dummyBrowserView = new BrowserView();
  // mainWindow.addBrowserView(dummyBrowserView);
  // dummyBrowserView.setBounds({ x: 0, y: 0, width: 0, height: 0});
  // dummyBrowserView.setAutoResize({ width: true, height: true });

  // Topbar browserView
  const topbarBrowserView = new BrowserView();
  mainWindow.addBrowserView(topbarBrowserView);
  topbarBrowserView.setBounds({ x: 0, y: 0, width: mainWindow.getBounds().width, height: 40});
  topbarBrowserView.setAutoResize({ width: true, height: true });

  topbarBrowserView.webContents.loadURL(`data:text/html,
    <html>
      <head>
        <style>
          body { margin: 0; padding: 0; background: yellow; app-region: drag }
        </style>
      </head>
      <body>
        <div style="margin-left:100px;">I have content</div>
      </body>
    </html>`);

  // Body browserView
  const bodyBrowserView = new BrowserView();
  mainWindow.addBrowserView(bodyBrowserView);
  bodyBrowserView.setBounds({ x: 0, y: 40, width: mainWindow.getBounds().width, height: mainWindow.getBounds().height - 40});
  bodyBrowserView.setAutoResize({ width: true, height: true });

  bodyBrowserView.webContents.loadURL(`data:text/html,
    <html>
      <head>
        <style>
          body { margin: 8; padding: 0; background: transparent; }
        </style>
      </head>
      <body>
      <div>Hi</div
      </body>
    </html>`);


  // Open DevTools
  // mainWindow.webContents.openDevTools();

  // Window event handlers
  mainWindow.on('close', e => {
    console.log('close event', JSON.stringify(e))
    e.preventDefault()
    mainWindow.hide()
  })
}

// App event handlers
app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  } else {
    mainWindow?.show()
    const views = mainWindow?.getBrowserViews()
    console.log('browser views:', views.length)
    // views.forEach((view, idx) => {
    //   console.log(`browserView ${idx} webContents isDestroyed:`, view.webContents.isDestroyed())
    // })
  }
});

## package.json
{
  "name": "thankful-brothers-bite-cenfg",
  "productName": "thankful-brothers-bite-cenfg",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "anny",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "29.3.2"
  }
}
	// Modules to control application life and create native browser window
	const { app, BrowserWindow, BrowserView } = require('electron')
	const path = require('node:path')
	let mainWindow;

	function createWindow() {
	// Create the browser window
	mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	titleBarStyle: "hiddenInset",
	// transparent: true,
	// vibrancy: 'under-window',
	// backgroundColor: "#00000000",
	webPreferences: {
	nodeIntegration: true,
	},
	});

	// Dummy browserView
	// Uncomment this to the BrowserWindow to sacrificially be the BrowserView whose
	// content is wiped by the BrowserWindow vibrancy

	// const dummyBrowserView = new BrowserView();
	// mainWindow.addBrowserView(dummyBrowserView);
	// dummyBrowserView.setBounds({ x: 0, y: 0, width: 0, height: 0});
	// dummyBrowserView.setAutoResize({ width: true, height: true });

	// Topbar browserView
	const topbarBrowserView = new BrowserView();
	mainWindow.addBrowserView(topbarBrowserView);
	topbarBrowserView.setBounds({ x: 0, y: 0, width: mainWindow.getBounds().width, height: 40});
	topbarBrowserView.setAutoResize({ width: true, height: true });

	topbarBrowserView.webContents.loadURL(`data:text/html,
	<html>
	<head>
	<style>
	body { margin: 0; padding: 0; background: yellow; app-region: drag }
	</style>
	</head>
	<body>
	<div style="margin-left:100px;">I have content</div>
	</body>
	</html>`);

	// Body browserView
	const bodyBrowserView = new BrowserView();
	mainWindow.addBrowserView(bodyBrowserView);
	bodyBrowserView.setBounds({ x: 0, y: 40, width: mainWindow.getBounds().width, height: mainWindow.getBounds().height - 40});
	bodyBrowserView.setAutoResize({ width: true, height: true });

	bodyBrowserView.webContents.loadURL(`data:text/html,
	<html>
	<head>
	<style>
	body { margin: 8; padding: 0; background: transparent; }
	</style>
	</head>
	<body>
	<div>Hi</div
	</body>
	</html>`);


	// Open DevTools
	// mainWindow.webContents.openDevTools();

	// Window event handlers
	mainWindow.on('close', e => {
	console.log('close event', JSON.stringify(e))
	e.preventDefault()
	mainWindow.hide()
	})
	}

	// App event handlers
	app.on('ready', createWindow);

	app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
	app.quit();
	}
	});

	app.on('activate', () => {
	if (BrowserWindow.getAllWindows().length === 0) {
	createWindow();
	} else {
	mainWindow?.show()
	const views = mainWindow?.getBrowserViews()
	console.log('browser views:', views.length)
	// views.forEach((view, idx) => {
	// console.log(`browserView ${idx} webContents isDestroyed:`, view.webContents.isDestroyed())
	// })
	}
	});
	{
	"name": "thankful-brothers-bite-cenfg",
	"productName": "thankful-brothers-bite-cenfg",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "anny",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "29.3.2"
	}
	}