Electron tutorial notes

lucid_fizz·2023년 1월 20일

This is my notes while doing official electron tutorial.


Building Your First App

Electron don't support ECMAscript imports. Must use require

there is also option to debug using VScode. Might be useful later on.

Using Preload Scripts

goal :try previliged APIs on renderer, Electron's IPC

Electron's main process runs on node.js w/ full OS access, Electron modules, and npm packages. But renderer shouldn't for security reasons.

two new files, preload.js, renderer.js
this will expose a versions obj? or sth to electron rendere

// preload.js
const { contextBridge } = require("electron")

contextBridge.exposeInMainWorld('versions', {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron,

and this renderer will modify some HTML elements, using the 'versions' object?'s getters

// renderer.js
const information = document.getElementById('info')
information.innerText = `This app is using Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), and Electron (v${versions.electron()})`

notice the <p> with id="info" and added <script src='renderer.js>

<!DOCTYPE html>

    <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'" />
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
    <title>Hello from Electron renderer!</title>

    <h1>Hello from Electron renderer!</h1>
    <p id="info"></p>
<script src="./renderer.js"></script>


now for the IPC interprocess communication

electron's main and renderer process have its own responsibilities. so, main process can't access the HTML DOM, and rendere can't access nodejs APIs.

but electron has ipcMAin, ipcRenderer modules for the IPC. use this.

for security reasons, don't expose the whole ipcRenderer module via preload script.
do it like this. wrap it in contextBridge module.

// preload.js
contextBridge.exposeInMainWorld('versions', {
  // ... skip
  ping: () => ipcRenderer.invoke('ping'),

now write handler in main

// main.js
// setup handler before loading loadFile.
ipcMain.handle('ping', () =>  'pong' )

then use it in renderer

// renderer.js
const func = async () => {
  const response = await window.versions.ping()
  console.log(response) // prints out 'pong'


if pong doesn't log, check developer tools of electron app, not terminal.
In macOS, you can go thru view menu on top or option+cmd+I

if it logs undefined, make sure arrow function returns sth

() => {'pong'} // wrong. executes code block on function call, but returns nothing
() => 'pong' // good. returns string

Adding Features

tutorial says some things, then says refer to its examples

software engineer

0개의 댓글