index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"/>
<script src="./renderer.js"></script>
<link rel="stylesheet" href="./css/style.css">
<title>Hello Electron</title>
</head>
<body>
<button type="button" id="btn">button</button>
<div id="result"></div>
</body>
</html>
app.js
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('node:path');
const fs = require('fs');
const { send } = require('node:process');
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, '/preload.js')
}
})
win.loadFile('index.html');
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
ipcMain.handle('invoke-test', (event, send_preload) => {
console.log(send_preload);
return "main";
})
renderer.js
window.onload = function(){
window.myApi.setup();
}
preload.js
const {remote,contextBridge,ipcRenderer} = require('electron');
contextBridge.exposeInMainWorld('myApi', {
setup: async ()=>{
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
console.log("front")
})
const data = await ipcRenderer.invoke('invoke-test', 'ping')
console.log(data)
},
})
