vmars316/index.html

## index.html
<!doctype html>
<html lang="en-US">
<head>
    <meta charset="utf-8"/>
    <title>Title</title>
</head>
<body>
    <script>
        window.api.receive("fromMain", (data) => {
            console.log(`Received ${data} from main process`);
        });
        window.api.send('"toMain", "window.api.send("toMain"');
    </script>
</body>
</html>

## main.js
const {
  app,
  BrowserWindow,
  ipcMain
} = require("electron");
const path = require("path");
const fs = require("fs");

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

async function createWindow() {

  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false, // is default value after Electron v5
      contextIsolation: true, // protect against prototype pollution
      enableRemoteModule: false, // turn off remote
      preload: path.join(__dirname, "preload.js") // use a preload script
    }
  });

  // Load app
  win.loadFile(path.join(__dirname, "dist/index.html"));

  // rest of code..
}

app.on("ready", createWindow);

ipcMain.on("toMain", (event, args) => {
  fs.readFile("path/to/file", (error, data) => {
      // Send result back to renderer process
    win.webContents.send("fromMain", responseObj);
      console.log('ipcMain.on("toMain", (event, args) => ')
  });
});

## package.json
{
  "name": "omniscient-stomach-care-42z44",
  "productName": "omniscient-stomach-care-42z44",
  "description": "My Electron application description",
  "keywords": [],
  "main": "./main.js",
  "version": "1.0.0",
  "author": "vmars",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {},
  "devDependencies": {
    "electron": "16.0.5"
  }
}

## preload.js
const {
    contextBridge,
    ipcRenderer
} = require("electron");

// Expose protected methods that allow the renderer process to use
// the ipcRenderer without exposing the entire object
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels
            let validChannels = ["toMain"];
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            let validChannels = ["fromMain"];
            if (validChannels.includes(channel)) {
                // Deliberately strip event as it includes `sender`
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.

## styles.css
/* styles.css */

/* Add styles here to customize the appearance of your app */
	<!doctype html>
	<html lang="en-US">
	<head>
	<meta charset="utf-8"/>
	<title>Title</title>
	</head>
	<body>
	<script>
	window.api.receive("fromMain", (data) => {
	console.log(`Received ${data} from main process`);
	});
	window.api.send('"toMain", "window.api.send("toMain"');
	</script>
	</body>
	</html>
	const {
	app,
	BrowserWindow,
	ipcMain
	} = require("electron");
	const path = require("path");
	const fs = require("fs");

	// Keep a global reference of the window object, if you don't, the window will
	// be closed automatically when the JavaScript object is garbage collected.
	let win;

	async function createWindow() {

	// Create the browser window.
	win = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: false, // is default value after Electron v5
	contextIsolation: true, // protect against prototype pollution
	enableRemoteModule: false, // turn off remote
	preload: path.join(__dirname, "preload.js") // use a preload script
	}
	});

	// Load app
	win.loadFile(path.join(__dirname, "dist/index.html"));

	// rest of code..
	}

	app.on("ready", createWindow);

	ipcMain.on("toMain", (event, args) => {
	fs.readFile("path/to/file", (error, data) => {
	// Send result back to renderer process
	win.webContents.send("fromMain", responseObj);
	console.log('ipcMain.on("toMain", (event, args) => ')
	});
	});
	{
	"name": "omniscient-stomach-care-42z44",
	"productName": "omniscient-stomach-care-42z44",
	"description": "My Electron application description",
	"keywords": [],
	"main": "./main.js",
	"version": "1.0.0",
	"author": "vmars",
	"scripts": {
	"start": "electron ."
	},
	"dependencies": {},
	"devDependencies": {
	"electron": "16.0.5"
	}
	}
	const {
	contextBridge,
	ipcRenderer
	} = require("electron");

	// Expose protected methods that allow the renderer process to use
	// the ipcRenderer without exposing the entire object
	contextBridge.exposeInMainWorld(
	"api", {
	send: (channel, data) => {
	// whitelist channels
	let validChannels = ["toMain"];
	if (validChannels.includes(channel)) {
	ipcRenderer.send(channel, data);
	}
	},
	receive: (channel, func) => {
	let validChannels = ["fromMain"];
	if (validChannels.includes(channel)) {
	// Deliberately strip event as it includes `sender`
	ipcRenderer.on(channel, (event, ...args) => func(...args));
	}
	}
	}
	);
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// No Node.js APIs are available in this process because
	// `nodeIntegration` is turned off. Use `preload.js` to
	// selectively enable features needed in the rendering
	// process.
	/* styles.css */

	/* Add styles here to customize the appearance of your app */