Cartographist技术栈解剖Electron React immer如何搭建实验性Web浏览器【免费下载链接】cartographistexperimental web browser optimized for rabbit-holing项目地址: https://gitcode.com/gh_mirrors/ca/cartographistCartographist 是一款用Electron React immer技术栈打造的实验性 Web 浏览器专为喜欢兔子洞式深度浏览的用户设计点击链接不再弹出新窗口而是生成一个可横向滚动的窗格浏览历史不是一条线性列表而是一棵可以任意回溯的树整个浏览会话还能保存成一条 Trail随时完整恢复。项目源码只有一个src/目录是学习如何用现代前端技术搭建桌面浏览器的理想标本。它和 Chrome 有什么不同3个反直觉设计在拆技术栈之前先理解这个实验性浏览器想解决什么问题详见 README.md传统浏览器Cartographist 的做法Cmd点击打开新窗口生成一个水平可滚动的窗格Pane线性历史记录只能往前/往后树状大纲直观展示浏览的分支结构关闭即丢失会话保存/加载Trail长期跟踪研究主题一句话概括它不是让你更快打开网页而是让你不迷路地迷路。技术栈一览Electron 9 React 16 immer 7核心依赖在 package.json 中非常精简技术版本在项目中承担的角色Electron^9.1.2桌面壳提供BrowserWindow与webview渲染容器React / react-dom^16.13.1UI 框架渲染窗格列表与历史树immer^7.0.7状态管理把不可变更新写得像可变操作electron-webpack^2.8.2构建工具本地开发服务器 热重载tachyons^4.12.0原子化 CSS零自定义样式搞定界面md5 / normalize-url^2.2.1 / ^5.0.0Trail 未保存变更检测、URL 规范化整套架构是 Electron 经典的双进程模型src/main/是主进程src/renderer/是渲染进程中间靠 IPC 通信。下面逐层解剖。主进程一个窗口 一份菜单撑起整个浏览器 src/main/index.js 中创建窗口的代码不到 20 行但 3 个配置项决定了整个浏览器的形态titleBarStyle: hiddenInset— 隐藏系统标题栏浏览器自己画一条可拖拽的深色顶栏配合WebkitAppRegion: drag这就是截图中那种紧凑的专业工具质感webviewTag: true— 开启webview标签这是一个窗格装一个网页的物理基础nodeIntegration: true— 让渲染进程能直接require(fs)后面的 Trail 保存/加载全靠它。再看 src/main/menu.jsFile 菜单下的New Pane / New Trail / Save Trail / Load Trail四个自定义项本质都只是mainWindow.webContents.send(cmd)发一条 IPC 消息。主进程不做任何业务逻辑——它只是把键盘快捷键转发给渲染进程这种薄主进程的写法值得学习。渲染进程每个窗格都是一个 webview渲染进程的核心状态定义在 src/renderer/index.js{ history, panes, fullscreenId }panes是一个 URL 数组map一下就是界面右侧并排的窗格每个固定 640px 宽水平滚动。每个窗格由 webview.js 组件渲染关键就三行webview src{url}加载网页本体preloadinject.js预载一段脚本监听鼠标悬停并回传链接地址见 inject.js实现截图底部那条悬停 URL 提示监听new-window事件网页里target_blank打开的新窗口被劫持成新的 Pane——这就是不弹新窗口的魔法入口。状态管理immer 如何让不可变数据改得像可变数据React 官方要求状态更新必须返回新对象但树状浏览历史里有几十层嵌套手动slicemapspread写起来极其痛苦。immer的 draft 模式解决了这个问题——项目里 use-immer.js 把它包成了一个 5 行的 HooksetState((draft) { draft.panes.push(newUrl); // 直接改immer 自动生成新对象 });进阶的 use-persisted-immer.js 在此基础上加了localStorage自动读写启动时恢复上次会话每次变更自动落盘。一个 Hook 同时拿到不可变更新 本地持久化是 immer 最优雅的用法之一。而 Trail 功能index.js则演示了 Electron 特有的能力渲染进程用remote.dialog弹系统对话框再用fs把整个 state 序列化写成.trail文件并用md5 哈希判断当前会话是否有未保存的修改避免误覆盖。核心算法浏览历史是一棵树不是列表传统浏览器的历史是链表而 Cartographist 把每次跳转建模为在父节点下挂一个子节点于是历史天然长成树。核心逻辑在 src/renderer/history.jsnavigate(history, fromUrl, toUrl)— 从fromUrl节点下找到或创建toUrl子节点back/forward/get— 在树中定位节点取父节点或最后访问的子节点。难点在于如何在深层递归的遍历中提前退出。作者在 utils.js 里给出了一个非常实验性的答案——callcccontinuation-passing 风格用throw new Exit(arg)模拟从任意深度直接跳回顶层的语义traverse负责递归走树callcc负责携带结果逃离。这套组合拳只有 40 行代码却同时被历史操作和可视化复用是全项目最值得咀嚼的一段。history-visualization.js 则把这棵树画成了截图中左侧的 SVG竖线表示分支跨度横线连接同层节点点开任意节点即可沿着祖先路径直达那个窗格。快速上手两条命令跑起这个实验性浏览器项目目前只提供源码运行方式README 原话No binary builds are available right now, purely out of lazinessgit clone https://gitcode.com/gh_mirrors/ca/cartographist cd cartographist npm install npm start运行后就是一个带历史树的实验性浏览器Ctrl/CmdT开新窗格Ctrl/CmdS保存 Trail。总结这个小项目值得抄的三个作业薄主进程 厚渲染进程主进程只做窗口、菜单和 IPC 转发src/main/业务全在 React 里架构边界清晰immer 的 draft 模式管理深层嵌套状态时像改可变对象一样写代码拿到的却是不可变更新配合 5 行自定义 Hook 即可叠加持久化src/renderer/use-persisted-immer.js用数据模型而非 UI 驱动行为窗格是数组、历史是树界面只是这两个数据结构的投影——状态对了UI 几乎自动就对了。如果你想给自己的浏览器加空间感或者研究 Electron 中webview IPC immer 的完整闭环Cartographist 这个千行级小项目就是最好的起点。️【免费下载链接】cartographistexperimental web browser optimized for rabbit-holing项目地址: https://gitcode.com/gh_mirrors/ca/cartographist创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考