electron-browser-shell 架构完全解析4 大核心包如何协同打造一款浏览器【免费下载链接】electron-browser-shellA minimal, tabbed web browser with support for Chrome extensions—built on Electron.项目地址: https://gitcode.com/gh_mirrors/el/electron-browser-shell想用 Electron 打造一款真正能用、还能装 Chrome 扩展的浏览器electron-browser-shell 架构给出了教科书式的答案。这个开源项目用不到四个包就拼出了一台支持标签页、Chrome 扩展、应用商店的完整浏览器。本文将带你逐层拆解 electron-browser-shell 的浏览器架构看看shell、electron-chrome-extensions、electron-chrome-context-menu、electron-chrome-web-store这 4 大核心包各自承担什么职责又是如何握手协作的。无论你是想学习 Electron 浏览器开发还是想给自己的应用加浏览器能力这篇文章都值得读完。一眼看懂4 大核心包如何分工整个项目是一个 yarn workspaces 单仓库monorepo根目录的 package.json 用workspaces字段把 4 个包组织在一起。它们的分工可以用一张表说清楚核心包路径职责定位shellpackages/shell浏览器外壳本体标签页、窗口、菜单、预加载脚本electron-chrome-extensionspackages/electron-chrome-extensions核心引擎把 Chrome 扩展 API 移植到 Electronelectron-chrome-context-menupackages/electron-chrome-context-menu打造 Chrome 同款右键菜单体验electron-chrome-web-storepackages/electron-chrome-web-store从 Chrome 应用商店安装与自动更新扩展四个包各司其职shell 负责骨架extensions 负责灵魂context-menu 负责手感web-store 负责补给。下面逐个深入。核心包一shell —— 浏览器外壳与标签页的实现细节shell 是运行在用户面前的浏览器但它本身非常克制——只做三件事创建窗口、管理标签页、加载扩展系统。它的主进程入口在 packages/shell/browser/main.js核心是Browser类和TabbedBrowserWindow类标签页用 WebContentsView 实现项目特意没有用 Electron 内置的webview标签因为它在远程内容浏览上存在较多 bug。改用WebContentsView后每个标签页都是独立的渲染进程稳定性大幅提升。标签页管理逻辑集中在 packages/shell/browser/tabs.js。窗口与标签页双向同步TabbedBrowserWindow会在标签创建、选中时通知扩展系统addTab/selectTab这样chrome.tabsAPI 才能感知到标签变化。安全默认值拉满窗口的webPreferences开启了sandbox: true、contextIsolation: true并关闭nodeIntegration尽可能向 Chrome 的安全模型靠拢。弹窗统一拦截通过setWindowOpenHandler把所有window.open都转成新标签页行为与 Chrome 一致。可以说shell 就是一台裸浏览器把最烦琐的标签页工程化问题解决掉把扩展能力留给下一个包。核心包二electron-chrome-extensions —— 浏览器扩展支持的灵魂这是整个项目技术含量最高的部分。它的使命很明确让 Electron 认识 Chrome 扩展。类入口定义在 packages/electron-chrome-extensions/src/browser/index.ts 中的ElectronChromeExtensions。9 大扩展 API 全覆盖它实现了 9 个chrome.*API 模块全部挂在api/目录下chrome.tabs标签页操作如创建、切换、关闭chrome.windows窗口管理chrome.runtime运行时通信chrome.browserAction工具栏按钮与弹窗chrome.contextMenus右键菜单注入chrome.cookies、chrome.notifications、chrome.commands、chrome.webNavigation比如标签 API 的实现就藏在 packages/electron-chrome-extensions/src/browser/api/tabs.ts它会监听 shell 上报的标签事件再转换成扩展能理解的onActivated、onCreated等回调。双通道预加载机制要让扩展的 JS 能调用这些 API它通过session.registerPreloadScript注入两套 preload 脚本一套给frame类型MV2 背景页/弹窗一套给service-worker类型MV3 方向。preload 脚本定义在 packages/electron-chrome-extensions/src/preload.ts把扩展页面和主进程之间的 IPC 桥接起来。主进程与渲染进程联动包内还分出了browser主进程与renderer渲染进程两层主进程负责 API 状态管理渲染进程的 packages/electron-chrome-extensions/src/renderer/index.ts 负责把调用转发过去。这种主进程持有状态、渲染进程代理调用的模式是 Electron 应用里非常值得借鉴的架构设计。核心包三electron-chrome-context-menu —— 右键菜单的 Chrome 体验浏览器的手感很大程度体现在右键菜单上。这个包在 packages/electron-chrome-context-menu/index.ts 中导出一个buildChromeContextMenu函数按 Chrome 的行为逻辑动态组装菜单上下文感知检测到链接时给出新标签页打开 / 新窗口打开 / 复制地址检测到可编辑区域时给出剪切、复制、粘贴、全选、撤销重做甚至拼写建议和 emoji 面板入口。扩展菜单注入它预留了extensionMenuItems参数把chrome.contextMenus注册的菜单项追加进原生菜单——右键菜单瞬间变成Chrome 形态。兜底导航空白区域右键时提供后退、前进、刷新、检查元素与 Chrome 完全一致。在 shell 的 main.js 中它通过webContents.on(context-menu)事件被调用并传入扩展菜单项与打开链接的回调三方无缝衔接。核心包四electron-chrome-web-store —— 扩展商店的安装与更新有了扩展支持还得有扩展来源。这个包让浏览器可以直接连接 Chrome 应用商店installChromeWebStore在指定 session 中启用商店支持之后访问chromewebstore.google.com就能点添加到 Chrome。installExtension通过扩展 ID 程序化安装比如eimadpbcbfnmbkopoojfekhnkhdbieehDark Reader。updateExtensions启动时及每 5 小时自动检查并更新已安装扩展。loadAllExtensions批量加载本地extensions/目录下的未打包扩展非常适合开发调试。安装逻辑集中在 packages/electron-chrome-web-store/src/browser/installer.ts还支持.CRX格式扩展的加载。安装前会弹确认框明示扩展申请的权限安全体验接近真浏览器。4 大核心包如何协同工作用一条用户操作链就能看懂它们的协作方式用户点击网页中的链接 →shell拦截window.open交给标签页管理器新建标签新标签创建 →shell调用extensions.addTab()通知扩展系统chrome.tabs.onCreated事件触发用户点扩展图标 →electron-chrome-extensions弹出browserAction弹窗背景页脚本开始运行用户右键 →shell触发context-menu事件context-menu 包组装原生菜单extensions 包注入chrome.contextMenus项用户安装新扩展 →web-store 包负责下载、解包、加载随后extensions 包接管其 API 生命周期。整条链路以session 为纽带扩展系统绑定 sessionweb-store 也操作同一个 sessionshell 则把所有事件汇聚到这一层。这也是为什么ElectronChromeExtensions.fromSession(session)可以随时取回扩展实例。快速上手克隆并运行 electron-browser-shell想亲手跑起来三步即可git clone https://gitcode.com/gh_mirrors/el/electron-browser-shell cd electron-browser-shell yarn yarn start启动脚本见根目录 package.json 的start会先依次构建 context-menu、extensions、web-store 三个包再启动 shell。之后把未打包的扩展放进./extensions目录重启浏览器就能在工具栏看到它的按钮了。项目里还内置了完整的扩展测试套件位于 packages/electron-chrome-extensions/spec覆盖标签、窗口、右键菜单、通知、原生消息等场景是学习 Chrome 扩展 API 测试的绝佳素材。小结与展望electron-browser-shell 最值得学习的不是某个炫技功能而是它极致的模块化拆分思路浏览器外壳、扩展运行时、右键菜单、应用商店被切成 4 个可独立发布、独立测试的 npm 包。这也让它成为了许多 Electron 浏览器项目的参考实现。目前项目已支持 MV2 扩展与商店安装Manifest V3 支持正在跟进依赖 Electron 上游进展。如果你正在规划自己的 Electron 浏览器或浏览器套壳应用不妨把它的 4 大核心包逐个 clone 下来研读——你会发现造一个浏览器其实没有想象中那么难。【免费下载链接】electron-browser-shellA minimal, tabbed web browser with support for Chrome extensions—built on Electron.项目地址: https://gitcode.com/gh_mirrors/el/electron-browser-shell创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考