Hans-Halverson/main.js Secret

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

function createWindow() {
  // Create the browser window
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    vibrancy: 'titlebar',
  });

  const webContentsView = new WebContentsView();
  mainWindow.contentView.addChildView(webContentsView);
  webContentsView.setBounds({ x: 0, y: 0, width: mainWindow.getBounds().width, height: mainWindow.getBounds().height});

  webContentsView.webContents.loadURL(`data:text/html,
    <html>
      <head>
        <style>
          body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
          }

          .box {
            width: 200px;
            height: 200px;
            background-color: red;
          }
        </style>
      </head>
      <body>
        <div class="box" onclick="alert('clicked')">Click Me</div>
      </body>
    </html>
  `)

  // Open DevTools
  // topbarWebContentsView.webContents.openDevTools({mode: 'detach'});
}

// 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();
  }
});

## package.json
{
  "name": "giant-sheep-wait-4mqc5",
  "productName": "giant-sheep-wait-4mqc5",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "hhalverson",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "31.0.0-beta.7"
  }
}
	// Modules to control application life and create native browser window
	const { app, BrowserWindow, WebContentsView } = require('electron')
	const path = require('node:path')
	let mainWindow;

	function createWindow() {
	// Create the browser window
	mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	vibrancy: 'titlebar',
	});

	const webContentsView = new WebContentsView();
	mainWindow.contentView.addChildView(webContentsView);
	webContentsView.setBounds({ x: 0, y: 0, width: mainWindow.getBounds().width, height: mainWindow.getBounds().height});

	webContentsView.webContents.loadURL(`data:text/html,
	<html>
	<head>
	<style>
	body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	}

	.box {
	width: 200px;
	height: 200px;
	background-color: red;
	}
	</style>
	</head>
	<body>
	<div class="box" onclick="alert('clicked')">Click Me</div>
	</body>
	</html>
	`)

	// Open DevTools
	// topbarWebContentsView.webContents.openDevTools({mode: 'detach'});
	}

	// 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();
	}
	});
	{
	"name": "giant-sheep-wait-4mqc5",
	"productName": "giant-sheep-wait-4mqc5",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "hhalverson",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "31.0.0-beta.7"
	}
	}