語の定義

Renderer / レンダラ(プロセス): 表示するHTMLにくっついてくるタイプのJavaScript。ブラウザ上で動くやつ。要はフロントエンド
preload: RendererとMain(後述)を取り持ってくれる存在。どちらかといえばNode.js側にいる
Main / メイン(プロセス): 裏の処理をやる。要はバックエンド

RendererからMainの処理を呼び出す方法

デフォルトではセキュリティの関係でRendererからMain(というかNode.js)側の処理を呼び出せない。
簡単に言えばrequire(fs)とかはRendererではできない。
でもそれができないとElectronの存在意義が消滅するので、方法が用意されている。

Renderer側

HTMLから<script src="renderer.js"></script>的な感じで呼び出されている。
以下のコードは抜粋であり、実際はこれをイベントリスナとかの中に入れて使う。
返り値が欲しくなければ受け取らなくても良い。

const result = await window.apiname.funcname(argument);

preload側

RendererとMainを取り持つ。より詳しく言うと、API定義書みたいなもの。
ここでapinameやらfuncnameやらを定義し、それをRenderer側で呼び出す(上記参照)。
呼び出された処理はさらにipcRenderer.invoke()を通してMainプロセスの処理を呼び出す。
ちなみにここではargumentの内容をそのままmain_argumentに代入しているが、適当にデータを処理することもできる。

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("apiname", {
    funcname: async (argument) => {
        const main_argument = argument;
        const result = await ipcRenderer.invoke("main_funcname", main_argument);
    }
});

Main側

以下のコードでは、ウィンドウを開けたり閉じたりといった処理は割愛している。
適当に末尾に付け足せば動く。たぶん。

const { ipcMain } = require("electron"); // appとかBrowserWindowと同時にrequireして良い

ipcMain.handle("main_funcname", (main_argument) => {
    // 処理いろいろ
    return result; // ここの中身がまるごとRenderer側に行く。返り値のない処理をするならreturnは不要
});

結局何やってるの？

特殊な形で定義した関数を二重に呼び出している