文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Electron入门教程2 ——进程模型

为了在渲染器中直接包含NPM模块，你必须使用你在web上使用的相同的捆绑工具链(例如，webpack或parcel等)。 ✧ 预加载脚本 预加载脚本包含在web内容开始加载之前在渲染进程中执行的代码。...这些脚本在呈现器上下文中运行，但通过访问Node.js api被授予了更多的特权。预加载脚本可以在BrowserWindow构造函数的webPreferences选项中附加到主进程。...但这里要注意，尽管预加载脚本与它们所连接的渲染器共享一个全局窗口，但由于contextIsolation默认值使上下文隔离的缘故，你不能直接将任何变量从预加载脚本连接到窗口。...这对于安全目的来说很重要，因为它有助于防止网站访问Electron内部组件或您的预加载脚本可以访问的强大api。这意味着你的预加载脚本访问的窗口对象实际上是一个不同于网站访问的对象。...例如，如果你设置window的Hello = 'wave'在您的预加载脚本和上下文隔离已启用如果网站试图访问Hello, Hello将是undefined。

1.4K50

Electron入门教程3 ——进程通信

2.在预加载脚本里面通过定义接口通道 要向上面创建的侦听器发送消息，您可以使用ipcRenderer。发送API。默认情况下，渲染器进程没有Node.js或Electron模块访问。...作为应用程序开发人员，您需要使用contextBridge 从预加载脚本中选择要公开哪些API。此时，您将能够在呈现过程中使用window.electronAPI.setTitle()函数。...调用通过预加载脚本定义接口 在预加载脚本中，我们公开了一个单行openFile函数，它调用并返回ipcRederer .invoke('openFileDialog')。...它的同步特性意味着它将阻塞呈现程序进程，直到接收到应答。 ✧ 主进程向渲染进程的单向通信 当从主进程向渲染进程发送消息时，您需要指定哪个渲染程序正在接收消息。...，我们在预加载脚本preload.js中使用contextBridge和ipcRederer模块向渲染进程公开IPC功能: const { contextBridge, ipcRenderer } =

1.7K40
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    《Electron应用性能深耕：资源加载与内存治理的进阶路径》

    Electron凭借“一次开发，多端运行”的特性占据重要地位，但 Chromium 内核与 Node.js 融合的架构，也使其在资源调度与内存控制上呈现出独特的复杂性。...一、资源加载的底层瓶颈与突破逻辑Electron应用的资源加载链路涉及三个核心环节：主进程资源预加载、渲染进程资源解析、跨进程资源共享，每个环节都存在潜在的性能损耗点。...某在线协作工具通过该体系，将重复资源的加载耗时从平均 800ms 降至 120ms，离线场景下的功能可用率提升至 92%。预加载脚本的优化需规避“权限滥用”陷阱。...preload.js 作为主进程与渲染进程的中间层，若过度暴露 Node.js API 或执行复杂逻辑，会导致预加载时间过长。...DOM 节点数量与内存占用呈正相关，对于列表类组件（如日志展示、数据表格），采用“虚拟滚动”技术仅渲染可视区域内的节点，某监控系统应用通过此方式，在展示 10 万条日志时，DOM 节点数量从 20 万个降至

    63410

    Electron 快速入门，顺便聊聊 IPC 通信

    预加载脚本 前面讲到我们会在 HTML 文件中插入 Electron 的版本号。...然而，在 index.js 主进程中，是不能编辑 DOM 的，因为它无法访问到渲染进程 document 上下文，它们存在于完全不同的进程中。 这时候，预加载脚本就可以派上用场了。...预加载脚本在渲染进程加载之前加载，并有权访问两个渲染进程全局 (例如 window 和 document) 和 Node.js 环境。 3.6.1....预加载脚本 前面上手的时候已经讲过预加载脚本了，预加载（preload）脚本会在渲染进程网页内容开始加载之前执行，并且可以访问 Node.js API。...然后渲染进程收到主线程的回复。 5.1.2. 预加载脚本暴露接口 在预加载脚本中，可以暴露一些全局的接口给到渲染进程，然后渲染进程调用，从而达到通信的目的。

    2.3K11

    预加载脚本 | Electron 安全

    预加载脚本中的Node.js https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-preload 预加载脚本的意义在于完成主进程和渲染进程之间的联络...，因此重要逻辑不应该在预加载脚本中进行，也不应该赋予其过于繁重的责任，完成主进程与渲染进程之间的通信，将通信结果传递给另一方才是它实际的意义，通过暴露方法使这种固定的逻辑可以被渲染进程调用 因此预加载脚本在渲染器加载网页之前注入...，也就是说预加载脚本中的内容会先一步定义好，以供网页中的 JavaScript 正确调用 如果没有被沙盒化，预加载脚本肯定是可以任意调用模块的，但是如果被沙盒化后，预加载脚本还可以加载哪些模块呢？...，从预加载脚本的职责来看，也确实可能用的到 使用案例如下 const { EventEmitter } = require('events'); class MyEmiter extends EventEmitter...其他 Buffer 相关方法 }); // 在渲染进程中，可以通过 window.myAPI 来访问预加载脚本提供的方法 我看很多 V8 漏洞的Payload 都会使用到 Buffer ，看起来似乎是与二进制数据处理离不开的模块

    1.3K20

    Electron 与鸿蒙 DevEco Studio 的融合实战：从 WebView 到安全 IPC 架构迁移指南

    本文将以一个完整的 Electron 示例为基础，逐行解析其架构，并探讨如何无缝迁移至鸿蒙 DevEco Studio 开发环境。...安全设计： 使用 ipcMain.handle（而非 on）支持异步返回值； 在主进程中调用 fs，避免渲染进程直接访问文件系统； 错误通过 throw 抛出，可在渲染端 catch。...，是唯一能同时访问 Node 和 DOM 的地方； contextIsolation: true：隔离预加载脚本与页面脚本的上下文，防止 XSS 攻击； nodeIntegration: false：禁止渲染进程直接使用...2. preload.js —— 预加载脚本：安全的“桥梁” const { contextBridge, ipcRenderer } = require('electron'); contextBridge.exposeInMainWorld...textContent = version; } catch (err) { console.error('获取版本失败:', err); } }); 通过 window.myAPI 调用预加载脚本暴露的方法

    26810

    Electron框架 介绍

    通过预加载脚本从渲染器访问Node.js。 现在，最后要做的是输出Electron的版本号和它的依赖项到你的web页面上。 在主进程通过Node的全局 process 对象访问这个信息是微不足道的。...这是将 预加载 脚本连接到渲染器时派上用场的地方。 预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。...要将此脚本附加到渲染器流程，请在你现有的 BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项。...额外：将功能添加到您的网页内容 此刻，您可能想知道如何为您的应用程序添加更多功能。 对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。...为了访问渲染器中的Node.js的某些功能，我们在 BrowserWindow 的构造函数上附加了一个预加载脚本。 3.

    1.3K00

    Electron入门教程1 —— 编写第一个桌面应用程序

    现在，要做的最后一件事是打印出Electron的版本号和它的依赖关系到你的网页上。...在主进程中通过Node的全局进程对象访问这些信息是很简单的。但是，您不能仅仅从主进程编辑DOM，因为它无法访问渲染器的文档上下文。它们处于完全不同的进程中! 关于这些进程相关的以后具体学习讲解。...预加载脚本在渲染进程被加载之前运行，并且可以访问渲染全局变量(例如窗口和文档)和Node.js环境。...要将此脚本附加到渲染过程中，请将预加载脚本的路径传递到webPreferences。在main.js现有的BrowserWindow构造函数中的预加载选项。...== 'darwin') app.quit() }) 8.自定义js脚本的添加 此时，您可能想知道如何向您的应用程序添加更多的功能。对于任何与你想要的其他功能，你都需要添加js脚本到你的渲染过程中。

    9.7K41

    contextIsolation | Electron 安全

    这对安全性很重要，因为它有助于阻止网站访问 Electron 的内部组件和您的预加载脚本可访问的高等级权限的API 。...这意味着，实际上，您的预加载脚本访问的 window 对象并不是网站所能访问的对象。...从描述看来，上下文隔离主要是确保预加载脚本与网站（渲染网页）之间的对象隔离，与主进程应该没有关系，但是我们在接下来的内容里，还是要测试一下真的是这样 0x02 Electron 流程模型 https:...预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。...因为预加载脚本与浏览器共享同一个全局 Window 接口，并且可以访问 Node.js API，所以它通过在全局 window 中暴露任意 API 来增强渲染器，以便你的网页内容使用。

    1.4K10

    nodeIntegration | Electron安全

    0x00 提醒 上一篇Electron 安全与你我息息相关文章非常的长，虽然提供了 PDF 版本，但还是导致很多人仅仅是点开看了一下，完读率大概 7.95% 左右，但上一篇真的是我觉得很重要的一篇，对大家了解...、渲染进程、iframe 中进行测试 预加载脚本 这里可以看出，预加载脚本就只能执行受限制的 NodeJS 方法了，基本无直接危害 失败 渲染进程 失败 iframe !...contextIsolation: true sandbox: false 预加载脚本 成功 渲染进程 iframe 失败 剩下就不用测试了了，可以得出结论了 Electron 20.0 总结 预加载脚本...是指主进程创建窗口时候的 sandbox），那到底是从哪个版本开始的呢？...所以我们需要再次测试了，但这里就不把过程中展示出来了 从 Electron 6.0.0 开始 sandbox: true 时， Preload 脚本的 NodeJS 环境为受限环境 再此之前即使设置了

    2K10

    electron 进程间通信

    预加载脚本（preload） Electron 不推荐在渲染进程开启Nodejs 环境，那也就意味着我们无法在渲染进程中使用NodeJS API，但有时候我们又真的很需要使用NodeJS API。...用大白话来说就是：我们可以在主进程创建窗口的时候，指定一些脚本(内容是我们定的)，这些脚本将来是在渲染进程中使用的，但是先于网页内容加载，由于是在主进程的时候就预加载了，所以能使用NodeJS API。...从 Electron 20 开始，预加载脚本默认 沙盒化 ，不再拥有完整 Node.js 环境的访问权，实际上，这意味着我们只拥有一个 require 函数，这个函数只能访问一组有限的 API。...下面写个示例体验一下： 创建一个预加载脚本 p1.js，我们可以在里面编写我们的代码，此脚本中可以使用Nodejs API。...') 在渲染进程中使用预加载脚本暴露的方法 <!

    90110

    第二章 你第首个Electron应用　| Electron in Action(中译)

    以启动主进程 从主进程生成渲染进程 利用Electron限制宽松的优点构建通常在浏览器无法构建的功能 使用Electron的内置模块来回避一些常见的问题 在第一章中，我们从高的层次上...在前面的代码中，我们在控制台打印日志，这是一件无需Electron就可以轻松完成的事情，但是这段代码强调了如何侦听ready事件。 创建渲染器进程 我们的主进程与其他Node进程非常相似。...它可以访问Node的所有内置库以及由Electron提供的一组特殊模块，我们将在本书中对此进行探讨。但是，与任何其他Node进程一样，我们的主进程没有DOM(文档对象模型)，也不能呈现UI。...所有BrowserWindow实例都有一个web content属性，该属性具有几个有用的特性，比如将HTML文件加载到渲染器进程的窗口中、从主进程向渲染器进程发送消息、将页面打印为PDF或打印机等等。...从渲染进程加载代码 从渲染器进程加载的HTML文件中，我们可以像在传统的基于浏览器的web应用程序中一样加载可能需要的任何其他文件－即和标签。

    5.8K30

    基于 Electron 模拟鸿蒙设备硬件信息查询的可行性探索

    本文探讨如何利用跨平台桌面框架 Electron，在 Windows/macOS/Linux 环境下模拟鸿蒙设备的硬件信息查询能力，为前端联调、UI 适配和逻辑验证提供低成本、高效率的桌面端仿真方案。...# 预加载脚本：安全桥接主进程与渲染进程 ├── index.html # 渲染进程首页（入口页面） ├── search.html # 功能页面示例（如搜索页..., height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), // 关键：注入预加载脚本...作用： 创建和管理应用窗口 注册 IPC 通信通道（如 app:navigate, system:getHardwareInfo） 控制应用生命周期（启动、退出） 3. preload.js —— 预加载脚本...全局复用 package.json 项目配置 定义入口与依赖 此架构具备： ✅ 安全性（上下文隔离 + 预加载脚本） ✅ 可维护性（职责分离） ✅ 可扩展性（轻松添加新页面或 IPC 接口） 你可以在该基础上集成

    20510

    nodeIntegrationInSubFrames | Electron 安全

    ，即虽然官网多个地方强调 sandbox 默认在 Electron 20.0.0 版本开始默认被设置为 true ，官网原话是 从 Electron 20 开始，渲染进程默认启用了沙盒，无需进一步配置。...及之前的版本中默认并未设置为 true ** 目前我们已经等了 Electron 一周了，还没有在 Github 上给我们反馈，所以这篇文章也会在 Electron 确认并修复漏洞后发布 4....测试预加载脚本 官网还提到一个功能，就是 Preload 会被注入到每一个 iframe 我们在 Preload 中创建一个 变量/常量，让 iframe 中的脚本 alert 弹窗显示出来 preload.js...测试预加载脚本 修改 object 服务器内容，获取并控制台输出预加载脚本暴露给渲染进程的值 设置 nodeIntegrationInSubFrames: true 成功获取到预加载脚本暴露给渲染页面的内容...iframe 一致 3) 测试预加载脚本 修改 embed 服务器内容，获取并控制台输出预加载脚本暴露给渲染进程的值 设置 nodeIntegrationInSubFrames: true 成功获取到预加载脚本暴露给渲染页面的内容

    1.1K10

    Electron 与 OpenHarmony 的实战入门：手把手打造一个安全的简易记事本应用

    ） 专栏链接：Electron for OpenHarmony 在学习 Electron 的过程中，很多人止步于 “Hello World” —— 能弹出窗口，却不知道如何实现真实功能。...今天，我们就跳过玩具示例，从零构建一个具备实际价值的“简易文本记事本”，并严格遵循 Electron 官方推荐的安全开发规范。...二、项目结构预览 note-app/ ├── main.js # 主进程：创建窗口 + 处理文件保存 ├── preload.js # 预加载脚本：安全桥接层 ├── index.html...width: 800, height: 600, webPreferences: { preload: __dirname + '/preload.js', // 关键：注入预加载脚本...alert('❌ 保存失败：' + err.message); } } 注意： 使用 window.noteAPI 调用预加载暴露的

    24410

    10分钟实现Typora(markdown)编辑器

    在Electron渲染进程中访问Chrome开发者工具 我们的书签管理器是一个很好的开始，但它只触及了我们可以用Electron做什么。...也就是说，由于我们的主进程目前在渲染器进程中加载了一个空文件，所以没有发生太多事情。 实现用户界面 在Electron中要获得图3.1中效果图的可行版本，实现必要的HTML和CSS是相当容易的。...优雅地显示浏览器窗口 如果你仔细观察你的应用程序的启动，您将注意到，在Electron加载index.html并在窗口中呈现DOM之前，窗口完全为空。...用户不习惯在本地应用程序中看到这种情况，我们可以通过重新思考如何启动窗口来避免这种情况。 如果您认为应用程序第一次启动时的虚无闪光是无意义的，考虑主进程中的代码:它创建一个窗口，然后在其中加载内容。...Chrome开发工具在所有渲染器进程中都可用，可以从默认的电子应用程序、键盘快捷键或主进程触发。 此时Electron中还没有完全支持Node Inspector检查器。

    3.7K50
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券