自定义Electron.exe的使用

DODOLA 收录于类别在前端搬砖的日子里和系列 Electron学习笔记

2025-04-27 2025-04-27 约 909 字预计阅读 2 分钟次阅读

https://img.dodolalorc.cn/i/2025/04/26/680c601796399.png

系列 - Electron学习笔记

初始化环境可以阅读这篇。

上接之前的构建过程，经过第一次构建之后，后续修改源码添加 api 等都不会再构建那么久了。

添加简单的 API

当前目录在构建时相同的目录下，其下包含src、.gclient、node_modules等。

找到src/electron目录，在lib/browser/api/app.ts添加：

1
2
3
app.getElectronVersion = () => { // This is for test
  return 'dodola test demo' + process.versions.electron;
};

再到electron.d.ts中更新添加：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
declare namespace Electron {
  const NodeEventEmitter: typeof import('events').EventEmitter;

  type Accelerator = string;
  type Event<Params extends object = {}> = {
    preventDefault: () => void;
    readonly defaultPrevented: boolean;
  } & Params;

  interface App extends NodeJS.EventEmitter {
    getElectronVersion(): string; // This is for test
...

然后在命令行重新构建一遍：

1
2
3
4
5
6
e build
INFO Auto-updates disabled - skipping update check
Running "autoninja.bat -j 200 electron" in D:\playground\Projects\electron-coins\electron\src\out\Testing
Proxy started successfully.
[4/4] LINK electron.exe electron.exe.pdb
RBE Stats: down 0 B, up 0 B, 1 local fallback

这样就准备好了测试用的自定义 electron 啦

测试 demo

找到一个测试用的小 electron demo，可以参考Electron 教程。

修改启动命令

在package.json中修改启动脚本start的部分，原来是electron .启动，将electron改为构建的electron.exe路径：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
{
  "name": "electron-demo",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "chcp 65001 &&  ..\\electron\\src\\out\\Testing\\electron.exe .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "dodola",
  "license": "MIT",
  "devDependencies": {
    "electron": "^35.2.0"
  }
}

不重要的小说明

chcp 65001只是为了在命令行中能够正常显示中文字符用的

调用 Api

在main.js中添加 console.log 语句：

1
console.log(`Custom Electron version: ${app.getElectronVersion()}`)

之后正常启动测试的项目即可：

1
npm start

可以看到命令行对应的输出：

https://img.dodolalorc.cn/i/2025/04/27/680df4e196674.png

小 demo 的代码

`main.js`

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
const { app, BrowserWindow, ipcMain } = require('electron/main')
const path = require('node:path')
const { dialog } = require('electron/main')

let mainWindow;
const createWindow = () => {
  mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    title: 'Just a little demo',
    icon: path.join(__dirname, 'icon.png'),
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.setMenu(null)
  mainWindow.loadFile('index.html')

  let wc = mainWindow.webContents;

  // wc.openDevTools();

  wc.on('dom-ready', (e) => {
    dialog.showMessageBox(options = {
      title: 'Hello',
      message: 'This is a message box',
    }).then((result) => {
      console.log(result);
    });
  });
}


app.whenReady().then(() => {
  ipcMain.handle('ping', () => 'pong');

  createWindow();
  mainWindow.maximize();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
});

console.log(`Custom Electron version: ${app.getElectronVersion()}`)

`preload.js`

1
2
3
4
5
6
7
8
const { contextBridge, ipcRenderer } = require('electron/renderer')

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

`renderer.js`

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const information = document.getElementById('info')
information.innerText = `This app is using Chrome (v${window.versions.chrome()}), Node.js (v${window.versions.node()}), and Electron (v${window.versions.electron()})`;

const pingButton = document.getElementById('ping');
const pingMsg = document.getElementById('ping-msg');
pingButton.addEventListener('click', () => {
  window.versions.ping().then((response) => {
    console.log(response) // prints out 'pong'
    pingMsg.innerText = response
  })
})

`index.html`

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <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'" />
</head>

<body>
  <h1>Hello from Electron renderer!</h1>
  <p>👋</p>
  <p id="info"></p>
  <button id="ping">ping</button>
  <p>Message from ping is: <span id="ping-msg"></span></p>
</body>
<script src="./renderer.js"></script>

</html>

目录

自定义Electron.exe的使用

添加简单的 API

测试 demo

修改启动命令

调用 Api

小 demo 的代码

main.js

preload.js

renderer.js

index.html

相关内容

Electron 构建记录

大文件上传和下载问题

前端流量控制常用手段

JavaScript 链式调用 | 设计模式 笔记

购物车页面制作教程（包含分页设计）

`main.js`

`preload.js`

`renderer.js`

`index.html`

JavaScript 链式调用 | 设计模式笔记