Electron中禁止开发者调试的方法

Electron是什么

Electron

是一个使用 JS、HTML 和 CSS 构建桌面应用程序的跨平台框架

思路

为了禁止在Electron应用中打开开发者调试的工具，可以通过对应用进行设置BrowserWindow的选项以及监听和阻止F12或者按下I的事件来实现。

详细步骤

1.创建一个electron应用
2.初始化配置文件 package.json

npm init -y

3.添加依赖，安装 electron

npm i electron -D

4.新建 main.js

在electron的main,js文件中输入下面代码即可

import { app, BrowserWindow } from "electron"

//创建窗口
const createWindow = () => {
	const mainWindow = new BrowserWindow({
		width: 380, //设置窗口宽度(单位:像素)
		height: 750, //设置窗口高度
		icon: "resource/images/code.ico", //设置窗口图标
		autoHideMenuBar: true, //隐藏菜单栏
		//resizable: false, //禁止调整窗口大小
		//x:0, //x表示窗口左上角的水平坐标(单位:像素)
		//y:0, //y表示窗口左上角的垂直坐标
		webPreferences: {
			nodeIntegration: true,
			devTools: false // 禁用开发者工具
		}
	})

	// mainWindow.loadURL("https://www.baidu.com") //加载指定的 url
	
	// 禁用菜单栏中的开发者工具选项
	mainWindow.removeMenu()

	// 禁用键盘快捷键
	mainWindow.webContents.on('before-input-event', (event, input) => {
		if (input.key === 'F12' || (input.control && input.shift && input.key === 'I')) {
			event.preventDefault()
		}
	})

	//当尝试打开新窗口时, 阻止默认行为, 在当前窗口加载 url
	// mainWindow.webContents.setWindowOpenHandler(details => {
	// 	mainWindow.loadURL(details.url)
	// 	return { action: 'deny' } //阻止默认行为
	// })

}

//当应用准备就绪后创建窗口
app.whenReady().then(() => {
	createWindow()
})

//Windows和mac的窗口进程管理器不同, 因此需要监听窗口关闭事件
app.on('window-all-closed', () => {
	if (process.platform !== 'darwin') {
		app.quit()
	}
})

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

代码附有详细注释