#22336 这是一项持续性工作，针对未来的一个需求，即渲染器进程中加载的原生 Node 模块应为 N-API 或 Context Aware 之一。...在 Electron 9.0 中，旧的序列化算法已被移除，现在，发送这一类不可序列化的对象将出现“object could not be cloned（无法克隆的对象）”错误。...#23447 BrowserWindow API 更改： 添加了对 BrowserWindow 上某些 getter/setter 对的属性访问的支持。...另请参阅我们的版本控制文档，获取有关 Electron 中版本控制的更多细节： https://electronjs.org/docs/tutorial/electron-versioning 关于未来的...将 contextIsolation 的默认值从 false 更改为 true（从 Electron 10 开始） 如果没有 contextIsolation，在渲染器进程中运行的任何代码都可以很容易地进入
官网： https://www.electronjs.org/ 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序 Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面...Electron 中的每个网页都在自己的进程中运行，称为渲染器进程 (renderer process)。 在正常的浏览器中，网页通常运行在沙盒封装化的环境中，并且不允许访问本机资源。...每个渲染进程是独立的，它只关心它所运行的页面。 主进程与渲染进程的区别 主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程中运行。...当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。 主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。...Electron 中的窗口是使用 BrowserWindow 类型创建的一个实例， 它只能在主进程中使用，如下所示： const { BrowserWindow } = require('electron
0x01 简介 大家好，今天跟大家讨论的内容是 sandbox， sandbox 是一项 Chromium 的功能，它使用操作系统来显著地限制渲染器进程可以访问的内容，在 Electron 中，限制的方面还要包括...Node.js 能力 这篇文章内容很重要，因为它修正了我们之前 nodeIntegration、contextIsolation、Preload 等内容中的错误，所以请大家至少把总结章节看完 https...，它可以给任意 C/C++ 应用程序使用，它作为一个 C++ 库，可以在调用后开始保护应用程序，可以创建沙盒进程，这是一种在非常限制的环境中执行的进程。...沙盒进程可以自由使用的唯一资源是 CPU 周期和内存。例如，沙盒进程无法写入磁盘或显示自己的窗口。他们究竟能做什么是由一个明确的策略控制的。 Chromium 渲染器是沙盒进程。...脚本来说，它属于是渲染进程的一部分，但沙盒化后仍然可以使用部分 Node.js 的 API ，毕竟它要负责渲染器进程和主进程之间的通信， Electron 官方给 Preload 脚本提供了一个 require
预加载脚本中的Node.js https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-preload 预加载脚本的意义在于完成主进程和渲染进程之间的联络...，因此重要逻辑不应该在预加载脚本中进行，也不应该赋予其过于繁重的责任，完成主进程与渲染进程之间的通信，将通信结果传递给另一方才是它实际的意义，通过暴露方法使这种固定的逻辑可以被渲染进程调用 因此预加载脚本在渲染器加载网页之前注入...process https://www.electronjs.org/zh/docs/latest/api/process 这个模块用来处理对象的扩展，官方的案例中获取 Electron、Node.js...，封装成了一个函数，这也就意味着每个新功能，如果需要主进程参与可能都会创建不止一个新的函数 如果开发者直接将 ipcRenderer 或 ipcRenderer.invoke 这种 API或非必要函数直接暴露给渲染进程...，但是有些泄漏可能是不容易发现的，例如有几个函数只是给 Preload 自己使用的，但是不小心暴露给了渲染进程；函数是给自己写的渲染进程使用的，结果同时暴露给了 iframe 这种嵌入内容等 预加载脚本是一个很好的代码审计的切入点
主进程可以通过 BrowserWindow 创建窗口，即渲染器进程 渲染器进程 每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程...恰如其名，渲染器负责渲染网页内容。所以实际上，运行于渲染器进程中的代码是须遵照网页标准的 (至少就目前使用的 Chromium 而言是如此) 。...为了在渲染器中直接包含 NPM 模块，您必须使用与在 web 开发时相同的打包工具 (例如 webpack 或 parcel) Preload 脚本 预加载（preload）脚本包含了那些执行于渲染器进程中...预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。...，所以这里修改的应该是 execa 过程中的调用的 join 和 test，通过修改函数返回值，成功绕过安全检查，执行我们想要的程序文件 calc 现在 PoC 有了，如何放到页面中执行呢？
dialog 模块是主进程模块，它允许我们在 Electron 应用程序中创建各种类型的对话框，包括警告框、信息框、文件选择框等。这些对话框可用于与用户交互，获取输入、展示消息、选择文件等操作。...一般会在渲染进程中想主进程发送信息，然后弹出消息框，这里为了代码演示方便，直接写到主进程了 const { app, BrowserWindow, dialog } = require('electron..., buttons: ['确定'] }); }) dialog.showMessageBox： 这是一个异步方法，不会阻塞主线程，而是通过 Promise 或回调函数来处理用户的响应...各系统之间的差异请参考文档：https://www.electronjs.org/zh/docs/latest/api/dialog#dialogshowmessageboxbrowserwindow-options...错误框 (ErrorBox) 错误框用于显示一个错误消息，使用dialog.showErrorBox() dialog.showErrorBox('发生错误', '发生了一个错误！')
✧ 为什么不是单个进程? Web浏览器是非常复杂的应用程序。除了显示网页内容的主要功能外，它们还有许多次要的职责，比如管理多个窗口(或标签)和加载第三方扩展。...主进程运行在Node.js环境中，这意味着它有能力要求模块并使用所有Node.js的api。 主进程的主要目的是使用BrowserWindow模块创建和管理应用程序窗口。...= require('path') // 创建一个createWindow()函数，用于将index.html加载到新BrowserWindow实例中 const createWindow = ()...✧ 渲染进程 每个Electron应用程序为每个打开的BrowserWindow(和每个web嵌入)生成一个单独的渲染进程。顾名思义，渲染器负责渲染网页内容。...这些脚本在呈现器上下文中运行，但通过访问Node.js api被授予了更多的特权。预加载脚本可以在BrowserWindow构造函数的webPreferences选项中附加到主进程。
这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程(稍后详细介绍)。...然而，你不能直接在主进程中编辑DOM，因为它无法访问渲染器 文档 上下文。 它们存在于完全不同的进程！ 注意：如果您需要更深入地了解Electron进程，请参阅 进程模型 文档。...要将此脚本附加到渲染器流程，请在你现有的 BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项。...在此脚本中， 我们使用 Electron 的 app 和 BrowserWindow 模块来创建一个浏览器窗口，在一个单独的进程(渲染器)中显示网页内容。...为了访问渲染器中的Node.js的某些功能，我们在 BrowserWindow 的构造函数上附加了一个预加载脚本。 3.
如果大家有更好的方案, 可以随时和我讨论. dooring-electron架构介绍 熟悉Electron的朋友也许知道, Electron继承了来自 Chromium 的多进程架构，这使得Electron...我们可以控制两种类型的进程：主进程和渲染器。 每个 Electron 应用都有一个单一的主进程，作为应用程序入口。主进程在 Node 环境中运行，我们可以使用所有 Node 的能力。...那么主进程中我们可以做些什么呢? 主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。...BrowserWindow 类的每个实例创建一个应用程序窗口，且在单独的渲染器进程中加载一个网页。我们可从主进程用 window 的 webContent 对象与网页内容进行交互。...有了以上基础, 我画了一张dooring-electron 的简单架构图方便大家理解: 如果相对electron有更多直观理解的, 也可以参考其官网: https://www.electronjs.org
这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程(稍后详细介绍)。...要将此脚本附加到渲染器流程，请在你现有的 BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项。...对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。...在此脚本中， 我们使用 Electron 的 app 和 BrowserWindow 模块来创建一个浏览器窗口，在一个单独的进程(渲染器)中显示网页内容。...为了访问渲染器中的Node.js的某些功能，我们在 BrowserWindow 的构造函数上附加了一个预加载脚本。
相关阅读: 从零使用electron搭建桌面端可视化编辑器Dooring electron的一些知识 熟悉Electron的朋友也许知道, Electron继承了来自 Chromium 的多进程架构，这使得...我们可以控制两种类型的进程：主进程和渲染器。 每个 Electron 应用都有一个单一的主进程，作为应用程序入口。主进程在 Node 环境中运行，我们可以使用所有 Node 的能力。...那么主进程中我们可以做些什么呢? 主进程的主要目的是使用 BrowserWindow 模块创建和管理应用程序窗口。...BrowserWindow 类的每个实例创建一个应用程序窗口，且在单独的渲染器进程中加载一个网页。我们可从主进程用 window 的 webContent 对象与网页内容进行交互。...有了以上基础, 我画了一张dooring-electron 的简单架构图方便大家理解: 想对electron有更多直观理解的, 也可以参考其官网: https://www.electronjs.org/
，点击文章，会出现一个新的窗口来显示文章内容，而不是在原本的窗口呢，这样原本的窗口可以继续聊天等 https://www.electronjs.org/zh/docs/latest/api/browser-window...在之前的一些版本中，似乎子窗口会继承父窗口的一些配置，但后来主要是为了生命周期等，简单来说，我把父窗口关了，子窗口也会被关闭或其他设置 该参数要在父窗口初始化是配置，而不是子窗口 0x03 测试 iframe...，看起来官方文档中描述的 child window 并不是官方文档其他部分中的 child window https://www.electronjs.org/docs/latest/api/browser-window...0x05 探索可能的子窗口 既然子窗口不是指主进程创建的窗口之间的父子关系，那么和 iframe 比较类似的应该就是 和 WebContentsView 了，还有 HTML 中的.../') 我们尝试在 baseWindow 中添加两个 WebContentsView，看看 WebContentsView 的行为是不是受 baseWindow 的 nodeIntegrationInSubFrames
每个Electron 中的 web页面运行在它自己的渲染进程中。 主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。...但实际上，我们在调用远程对象的方法、函数或者通过远程构造函数创建一个新的对象，实际上都是在发送一个同步的进程间消息。 在上面通过 remote 模块调用 dialog 的例子里。...在BrowserWindow的构造参数中，将frame设置为false可以指定窗口为无边框窗口，将工具栏隐藏后，就会产生两个问题： 1.窗口控制按钮（最小化、全屏、关闭按钮）会被隐藏 2.无法拖拽移动窗口...，而不是尝试手动实现click函数中的行为。...print的第二个参数callback是用于判断打印任务是否发出的回调，而不是打印任务完成后的回调。所以一般打印任务发出，回调函数即会调用并返回参数true。
Electron不是一个框架——它不提供任何框架，也没有关于如何构造应用程序或命名文件的严格规则，这些选择都留给了我们这些开发者。...主进程可以使用BrowserWindow创建多个渲染器进程。...根据标准JavaScript约定，这通常意味着我们用new关键字将其调用为构造函数。我们可以使用这个构造函数创建尽可能多的渲染器进程，只要我们喜欢，或者我们的计算机可以处理。...所有BrowserWindow实例都有一个web content属性，该属性具有几个有用的特性，比如将HTML文件加载到渲染器进程的窗口中、从主进程向渲染器进程发送消息、将页面打印为PDF或打印机等等。...图2.7 在渲染器进程的上下文中,BrowserWindow执行JavaScript。
在清单5.4中，让我们重构getFileFromUser()函数，以接受一个给定的窗口作为一个参数，而不是总是假设范围中有一个mainWindow实例。...列表5.6 在渲染器进程中获取对当前窗口的引用: ....这让主进程中的函数知道它们正在使用的是什么浏览器窗口。...如果有一个窗口，我们调用它的getWindow()方法，该方法返回一个此窗口的x和y坐标的数组。我们将把这些值存储在条件块之外的两个变量中，并将它们传递给BrowserWindow构造函数。...我们可以使用Electron的remote模块向渲染器进程中的窗口请求对自身的引用，并在与主进程通信时发送该引用。
我看我像是 Worker ，但是这里说的是 Web Worker Web Worker 是一项 HTML5 提出的技术，它允许在Web应用程序中创建后台线程，以实现JavaScript的多线程处理能力。...Web Worker 简介 一个 worker 是使用一个构造函数创建的一个对象（例如 Worker()）运行一个命名的 JavaScript 文件 这个文件包含将在 worker 线程中运行的代码;...因此，在 Worker 内通过 window 获取全局作用域（而不是self）将返回错误 Worker 分为两类 专用 Worker 一对一关联，即一个 Worker 服务于一个主线程，由创建它的脚本独享...主线程与 Worker 通信 这有点像 Electron 中的主进程和渲染进程通信了。...错误处理 为确保程序健壮性，应在主线程中监听 Worker 的 error 事件以处理 Worker 执行过程中的错误 myWorker.addEventListener('error', function
版本升级注意项 每个版本都有废弃和移除的API，废弃的依旧可以用，所以这里只列一些常用的被移除的API及对应的替换方法。...各版本移除的API 官方文档：https://www.electronjs.org/docs/latest/breaking-changes/#removed-remote-module 14.0 remote...{ app, dialog } = window.require('electron').remote 替换方式 安装依赖 npm install --save @electron/remote 主进程...remote/main').initialize() //创建每一个窗口后，都要调用 require("@electron/remote/main").enable(win.webContents); 渲染进程...require 引用时报错 const { ipcRenderer } = window.require('electron'); 错误信息 window.require not a function
菜单项属性： label：菜单项显示的文本。 accelerator：为菜单项指定快捷键，允许用户使用键盘快速访问菜单项。 click：菜单项被点击时触发的回调函数。...由于右键菜单的显示一般发生在渲染进程中，所有我们需要使用进程间通信和预处理脚本。...下面是一个例子： // 主进程 main.js const { app, BrowserWindow, Menu, ipcMain } = require('electron') const path...-- 渲染进程中的代码 --> document.addEventListener('contextmenu', function () { // 调用在预处理脚本中定义的函数
通过前面的学习，我们知道在Electron中，主进程和渲染进程是被换分成不同的功能的，主进程有完整的Node环境，而渲染进程默认是运行的是浏览器环境。...这样划分的好处是: 安全性：渲染进程运行在沙盒环境中，限制了对底层操作系统的访问和敏感资源的操作。...ipcMain.handle() 方法可以为指定频道注册处理函数，这个处理函数可以接收请求的参数并执行相应的操作，然后返回一个结果给渲染进程。...// 在处理函数中return的值就是返回给渲染进程的数据。... // 使用预处理脚本中定义的函数，间接监听从主进程中传开的数据 elecAPI.fromFather(function (event
领取专属 10元无门槛券
手把手带您无忧上云
