Wenzi 蚊子前端博客

首页与文章组织

网站首页按发布时间列出文章，页面导航提供归档、标签、微说和关于等入口。读者可以从近期文章了解站点持续关注的技术方向，也可以通过归档和标签继续浏览以往内容。首页文章涉及 Electron 进程通信、webview 外链跳转、LiveKit 会议参与者、设备媒体权限、JavaScript 工具封装和富文本编辑器等主题。

这些主题共同指向实际开发中常见的浏览器与应用工程问题。前端页面需要与浏览器能力、桌面容器或外部服务配合，实际表现往往取决于运行环境和框架接口。以问题为标题的文章能够帮助开发者快速找到与当前情境相关的内容，再根据正文中的说明判断是否适用于自己的项目。

Electron 主进程与渲染进程

一篇近期文章讨论 Electron 渲染进程和主进程之间如何通信。文章先区分两个进程：渲染进程负责展示网页界面，主进程承担 Node.js 环境中的应用级工作。因为两者彼此独立，页面代码不能像访问同一个 JavaScript 对象那样直接使用主进程能力；应用需要通过进程间通信机制传递消息。

文章按不同交互需要介绍通信方式。对于只需告知主进程、无需等待结果的操作，例如窗口事件或日志提交，可以由渲染侧发送消息，再由主进程监听处理。需要获得结果时，则可使用请求与响应式交互，让渲染侧在等待期间接收对应返回值。这样的区分有助于开发者根据调用关系选择合适的接口，而不是把所有消息都设计成同一种模式。

文章还展示了通过 preload.js 连接两侧的做法：在 preload 中使用 Electron 提供的 IPC 能力，并借助 contextBridge.exposeInMainWorld() 将经过挑选的函数暴露给网页界面。渲染页面通过公开接口调用需要的动作，主进程再根据消息执行相应处理。这样的结构把页面可用的功能控制在明确范围内，便于管理进程边界。

从具体案例理解边界

在 Electron 应用中，渲染层运行网页内容，主进程则接触应用窗口和操作系统相关能力。若让任意网页脚本直接访问不受限制的 Node.js 接口，应用的安全边界会变得模糊。通过 preload 层提供有限的 API，可以让界面只调用经过设计的功能，例如切换主题或请求应用执行某项操作。文章中的代码示例说明了这种桥接关系，也提醒开发者理解消息由哪一侧发出、由哪一侧接收。

选择通信模式时，可以先明确业务动作是否需要返回值。如果只是告知主进程发生了一件事，单向事件更直观；如果界面必须拿到处理结果，则应设计清晰的请求和响应。消息名称、参数结构和错误处理也需要在两侧保持一致。对于多个窗口或多个请求并行的情况，开发者还应考虑如何对应返回结果，避免把不同调用的响应混淆。

其他开发主题

博客首页还列出 Electron webview 外部链接跳转、LiveKit 参与者获取与屏幕共享、Mac 摄像头和麦克风权限等文章。这些内容展示了前端应用与桌面能力、实时通信和系统权限之间的结合。站点也记录 UUID 封装、粘贴图片后的编辑器光标位置等具体问题，覆盖从底层调用关系到界面细节的不同层面。

对需要实现实时会议或媒体功能的开发者来说，LiveKit 相关文章提供了一个寻找技术线索的入口；对 Electron 开发者来说，进程通信、webview 和系统权限主题则更接近桌面应用的日常实践。博客并非只围绕单个框架整理的完整课程，而是由不同开发问题构成的文章库，适合根据实际任务逐篇阅读。

适合怎样的读者

如果你正在制作 Web 前端或 Electron 应用，可以把这里作为查找具体问题讨论的技术博客。开发者可以先浏览标题，找到与进程通信、桌面窗口、媒体设备或编辑器行为相近的文章，再对照自己的依赖版本和代码结构阅读。学习者也能从文章中看到如何把一个具体现象拆解成可描述、可验证的开发问题。

由于文章讨论的是特定技术环境，阅读代码时应结合当前使用的 Electron、浏览器和库版本。接口行为可能随版本变化，安全配置也需要遵循当前框架建议。博客提供的是作者的实践说明，读者应在自己的项目中验证细节，并根据应用的安全要求决定哪些能力适合暴露给渲染页面。

浏览与查找

进入站点首页可以查看新近文章，使用归档回看历史内容，或通过标签寻找同类主题。文章页通常围绕一个标题对应的开发问题展开，并包含解释、代码片段或实现提示。这样的结构适合通过搜索进入单篇内容，也适合从相关条目连续浏览。

Wenzi 蚊子前端博客的特点是主题贴近日常开发任务，涵盖前端、桌面应用和实时媒体等方向。对于遇到相似问题的读者，文章中的场景描述和方案组织可以提供排查思路；对于长期学习者，按问题积累的文章也能帮助理解不同 Web 技术之间的协作方式。阅读时将示例作为起点，并核对当前环境中的官方接口说明，会更容易把经验迁移到自己的项目。