前端【免费下载链接】beakerAn experimental peer-to-peer Web browser项目地址https://gitcode.com/gh_mirrors/be/beaker点击查看免费下载本文以 Beaker 浏览器app/userland/README.md对 Userland 目录的定位说明为主体结合beaker://协议注册、webview 预加载与构建脚本等仓库源码系统讲解 Beaker 内置前端应用的组织方式、运行环境、域名映射与构建策略。读完本文你将理解 Userland 应用与/app/fg前台代码的本质区别、每个子目录如何成为beaker://下独立的应用、共享组件库app-stdlib的用法以及哪些应用具备迁移到 hyperdrive 的潜质。一、Userland与普通网页同环境的前台代码Beaker 的app/userland目录存放的是前端代码其命名意为用户态userland页面。关键设计约束在于这里的代码在与任何普通用户页面相同的运行环境中执行——因为webview-preload.js被注入了页面所以标准 Web APIDOM、fetch、Canvas 等全部可用。这一点从注入链路可以得到印证app/fg/webview-preload/index.js 在 webview 页面加载时执行setupWebAPIs()来自 app/bg/web-apis/fg.js并基于window.location.protocol决定暴露哪些能力// app/bg/web-apis/fg.js if ([beaker:, hyper:, https:, http:, data:].includes(window.location.protocol)) { beaker.hyperdrive hyperdrive.setup(rpc) Object.assign(beaker, external.setup(rpc)) } if (window.location.protocol beaker: || /* hyperdrive.network */) { Object.assign(beaker, internal.setup(rpc)) } ... contextBridge.exposeInMainWorld(beaker, beaker)也就是说beaker:协议页面不仅能使用全部标准 Web API还能通过全局beaker对象访问超驱动、内部管理等浏览器能力。这与/app/fg的组件形成鲜明对比——后者无法使用 Beaker Web API所有与 Electron 主进程的通信都要靠bg-process-rpc.js手工建立详见 app/fg/README.md。二、每个子目录 一个独立的 beaker:// 应用README 明确说明/app/userland下的每个文件夹都在beaker://下的独立域名上托管可以把每个文件夹看作一个独立应用。目录与域名的映射由 app/bg/protocols/beaker.js 中的registerStreamProtocol(beaker, beakerProtocol)完成。源码中的路由清单与仓库实际目录一一对应beaker:// 域名仓库目录特殊配置beaker://app-stdlibapp/userland/app-stdlib共享组件库beaker://desktopapp/userland/desktopBEAKER_APP_CSP、fallback 到 index.htmlbeaker://webtermapp/userland/webtermSIDEBAR_CSP、fallback 到 index.htmlbeaker://libraryapp/userland/libraryfallback 到 index.htmlbeaker://site-infoapp/userland/site-infofallback 到 index.htmlbeaker://explorerapp/userland/explorerfallback 到 index.htmlbeaker://editorapp/userland/editor—beaker://diffapp/userland/diff—beaker://drive-viewapp/userland/drive-view—beaker://cmd-pkgapp/userland/cmd-pkg—beaker://setupapp/userland/setupfallback 到 index.htmlbeaker://initapp/userland/initfallback 到 index.htmlbeaker://historyapp/userland/history—beaker://hypercore-toolsapp/userland/hypercore-toolsfallback 到 index.htmlbeaker://settingsapp/userland/settings—2.1 路由与静态资源服务serveAppAsset所有 Userland 应用统一由serveAppAsset(requestUrl, dirPath, cb, opts)提供服务app/bg/protocols/beaker.js解析 URL 的 pathname根路径默认改写为/index.html用fs.promises.stat检查文件是否存在若开启fallbackToIndexHTML缺失路径会回退到index.html典型 SPA 行为多数应用启用通过mime.identify(filepath)识别 Content-Type 后以流方式返回。请求还会被套上 CSPContent-Security-Policy头。beaker.js 定义了三种策略BEAKER_CSPdefault-src self beaker:script-src self beaker: unsafe-evalchild-src self默认BEAKER_APP_CSPscript-src额外允许hyper:child-src self hyper:desktop 使用允许内嵌 hyperdrive 页面SIDEBAR_CSPscript-src额外允许blob:child-src self beaker:webterm 侧边栏使用。2.2 Viewer 应用与多子应用README 特别注明viewer 应用内包含多个子应用。从路由表可以看出beaker://desktop新标签页主页是典型的聚合型应用——其入口 app/userland/desktop/index.html 通过desktop-app/desktop-app自定义元素挂载主界面并直接加载beaker://assets/vs/loader.js等协议内资源把多个功能模块聚合在一个域名下这与一个文件夹内可承载多个子应用的设计一致。三、app-stdlib跨应用共享组件库beaker://app-stdlibapp/userland/app-stdlib/readme.md定位是Beaker 默认应用间复用的一组 JS 与 Web Components 集合仓库中可以看到js/、css/、vendor/等子目录js/dom.jsDOM 工具与事件、strings.jstoNiceDomain等格式化、clipboard.js、time.js、fs.js、query-params.js、emoji.js、functions.js、const.js、is-ext-binary.js、quill.js等js/com/context-menu.js、toast.js等可复用 Web Componentscss/common.css.js、buttons.css.js、inputs.css.js等以.css.js形式导出的样式模块。Userland 应用通过相对导入直接引用它。以 site-info 为例app/userland/site-info/js/main.js 中import { LitElement, html } from ../../app-stdlib/vendor/lit-element/lit-element.js import { toNiceDomain } from ../../app-stdlib/js/strings.js import { writeToClipboard } from ../../app-stdlib/js/clipboard.js import * as contextMenu from ../../app-stdlib/js/com/context-menu.js import * as toast from ../../app-stdlib/js/com/toast.js3.1 样式构建生成 *.css.jsapp-stdlib的样式以 CSS 与.css.js双份形式共存。README 给出了重建命令node scripts/generate-css-js.js该脚本负责把原始 CSS 打包为可被 ES Module 直接import的*.css.js模块这是 Beaker 应用不做构建即可运行的基础设施之一。四、构建策略按需 build而不是默认 buildREADME 提出一个重要原则可能的情况下Userland 应用不做构建只有当 Userland 应用需要与 Beaker 内部代码共享代码时如 library 和 site-info才引入构建步骤。从 scripts/tasks/build/build.js 可以看到该策略在构建管线中的落地——只有少数几个应用被打包为main.build.jsbundle(userlandDir.path(site-info/js/main.js), userlandDir.path(site-info/js/main.build.js), {...}) bundle(userlandDir.path(editor/js/main.js), userlandDir.path(editor/js/main.build.js), {...}) bundle(userlandDir.path(settings/js/main.js), userlandDir.path(settings/js/main.build.js), {...})浏览器 UIfg/shell-window、fg/location-bar等同样通过该文件中的bundle(...)生成index.build.js而大部分 Userland 应用如 desktop、explorer、webterm直接以源码 index.html形式提供服务无需构建步骤。这种默认不构建、按需打包的取舍既降低了内置应用的维护成本又允许少数与内部代码耦合的应用在构建期完成依赖收拢。五、能迁移到 hyperdrive 的应用判据与实例README 给出了 Userland 应用的去向判断准则一般而言/app/userland中的每个应用都应该是可迁移到 hyperdrive的候选者如果一个应用完全没有迁移进 hyperdrive 的可能它就应该放进/app/fg。这一判据背后是 Beaker 的核心理念——内置应用尽量使用与普通用户网站一致的 Web 技术栈标准 Web API beakerWeb API以便被改造为去中心化站点。仓库中最典型的实例是 explorerapp/userland/explorer/README.md它以Hyperdrive.Network的身份存在定位为用于查看和修改 Hyperdrives 的应用需要支持 Hyperdrive 的浏览器并提供了完整的独立开发流程npm install # 安装开发依赖 npm run dev # 针对开发代码启动本地 http 服务器 npm run build # 产出 ./build 目录 npm run prod # 提供构建产物其开发地址要求写入/etc/hosts将dev.hyperdrive.network指向127.0.0.1——README 特意说明这是为了让 Beaker 向该应用授予正确权限对应 app/bg/web-apis/fg.js 中对hyperdrive.network域名临时放行的逻辑。这个例子完整展示了Userland 应用 潜在 hyperdrive 应用的形态应用在beaker://下开发却能以独立域名跑在本地 Web 服务器上最终迁移进 hyperdrive 后即为一个真正的去中心化应用。六、Userland 与 FG 的取舍边界将 app/userland/README.md 与 app/fg/README.md 对照可以得到清晰的边界规则维度Userlandapp/userlandFGapp/fg运行环境与用户页面相同注入 webview-preload专用 UI 组件环境标准 Web API全部可用不保证可用Beaker Web API通过全局beaker暴露按协议分级不可用需手动 RPCbg-process-rpc.js典型用途可复用、可外置的应用浏览器外壳强耦合组件shell-window、modals 等未来去向优先尝试迁入 hyperdrive留在浏览器内部具体到实现上beaker://协议处理器同时服务两类目录浏览器 UIbeaker://shell-window/、beaker://modals/等映射到 app/fg 下的对应文件夹与 Userland 应用映射到 app/userland两者的差异不在协议层而在执行环境与 API 可用性上——这正是 README 用Userland 页面同环境来定义 Userland 的原因。总结app/userland是 Beaker 中一类特殊的用户态前端它以beaker://独立域名承载每个内置应用通过 webview-preload 注入获得完整标准 Web API 与分级的beakerWeb API共享能力沉淀在app-stdlib默认不构建、仅在需要与内部代码共享时library、site-info、editor、settings才引入构建步骤而在设计哲学上凡是能迁入 hyperdrive 的应用都应留在 Userland否则才下沉到fg。理解这套分层就能清楚地区分 Beaker 中内置应用与浏览器外壳 UI两种前端代码的职责边界。赞分享前端【免费下载链接】beakerAn experimental peer-to-peer Web browser项目地址https://gitcode.com/gh_mirrors/be/beaker点击查看免费下载相关推荐Beaker 应用标准库 beaker-app-stdlib 深度解析CSS 构建脚本、Web Components 与工具函数复用体系Beaker 应用标准库 beaker app stdlib 深度解析CSS 构建脚本、Web Components 与工具函数复用体系 本文围绕 Beake前端cool-retro-term多显示器与大屏显示指南5分钟让CRT铺满你的桌面cool retro term多显示器与大屏显示指南5分钟让CRT铺满你的桌面 cool retro term 是一款模拟老式阴极射线管CRT显示效果的复Beaker 用户态应用路由实战深入理解 lit-element-router 的 Mixin 机制与源码实现Beaker 用户态应用路由实战深入理解 lit element router 的 Mixin 机制与源码实现 导读 本文以 Beaker 浏览器仓库中随 a前端上一篇为什么选择Jenkins Build Monitor Plugin10大核心优势深度剖析下一篇告别卡顿Flame引擎性能分析工具3步定位游戏帧率瓶颈的实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/7 9:32:18 · 阅读 1.2k Beaker 用户态应用（Userland）架构解析：beaker:// 协议下的内置前端应用体系
前端【免费下载链接】beakerAn experimental peer-to-peer Web browser项目地址https://gitcode.com/gh_mirrors/be/beaker点击查看免费下载本文以 Beaker 浏览器app/userland/README.md对 Userland 目录的定位说明为主体结合beaker://协议注册、webview 预加载与构建脚本等仓库源码系统讲解 Beaker 内置前端应用的组织方式、运行环境、域名映射与构建策略。读完本文你将理解 Userland 应用与/app/fg前台代码的本质区别、每个子目录如何成为beaker://下独立的应用、共享组件库app-stdlib的用法以及哪些应用具备迁移到 hyperdrive 的潜质。一、Userland与普通网页同环境的前台代码Beaker 的app/userland目录存放的是前端代码其命名意为用户态userland页面。关键设计约束在于这里的代码在与任何普通用户页面相同的运行环境中执行——因为webview-preload.js被注入了页面所以标准 Web APIDOM、fetch、Canvas 等全部可用。这一点从注入链路可以得到印证app/fg/webview-preload/index.js 在 webview 页面加载时执行setupWebAPIs()来自 app/bg/web-apis/fg.js并基于window.location.protocol决定暴露哪些能力// app/bg/web-apis/fg.js if ([beaker:, hyper:, https:, http:, data:].includes(window.location.protocol)) { beaker.hyperdrive hyperdrive.setup(rpc) Object.assign(beaker, external.setup(rpc)) } if (window.location.protocol beaker: || /* hyperdrive.network */) { Object.assign(beaker, internal.setup(rpc)) } ... contextBridge.exposeInMainWorld(beaker, beaker)也就是说beaker:协议页面不仅能使用全部标准 Web API还能通过全局beaker对象访问超驱动、内部管理等浏览器能力。这与/app/fg的组件形成鲜明对比——后者无法使用 Beaker Web API所有与 Electron 主进程的通信都要靠bg-process-rpc.js手工建立详见 app/fg/README.md。二、每个子目录 一个独立的 beaker:// 应用README 明确说明/app/userland下的每个文件夹都在beaker://下的独立域名上托管可以把每个文件夹看作一个独立应用。目录与域名的映射由 app/bg/protocols/beaker.js 中的registerStreamProtocol(beaker, beakerProtocol)完成。源码中的路由清单与仓库实际目录一一对应beaker:// 域名仓库目录特殊配置beaker://app-stdlibapp/userland/app-stdlib共享组件库beaker://desktopapp/userland/desktopBEAKER_APP_CSP、fallback 到 index.htmlbeaker://webtermapp/userland/webtermSIDEBAR_CSP、fallback 到 index.htmlbeaker://libraryapp/userland/libraryfallback 到 index.htmlbeaker://site-infoapp/userland/site-infofallback 到 index.htmlbeaker://explorerapp/userland/explorerfallback 到 index.htmlbeaker://editorapp/userland/editor—beaker://diffapp/userland/diff—beaker://drive-viewapp/userland/drive-view—beaker://cmd-pkgapp/userland/cmd-pkg—beaker://setupapp/userland/setupfallback 到 index.htmlbeaker://initapp/userland/initfallback 到 index.htmlbeaker://historyapp/userland/history—beaker://hypercore-toolsapp/userland/hypercore-toolsfallback 到 index.htmlbeaker://settingsapp/userland/settings—2.1 路由与静态资源服务serveAppAsset所有 Userland 应用统一由serveAppAsset(requestUrl, dirPath, cb, opts)提供服务app/bg/protocols/beaker.js解析 URL 的 pathname根路径默认改写为/index.html用fs.promises.stat检查文件是否存在若开启fallbackToIndexHTML缺失路径会回退到index.html典型 SPA 行为多数应用启用通过mime.identify(filepath)识别 Content-Type 后以流方式返回。请求还会被套上 CSPContent-Security-Policy头。beaker.js 定义了三种策略BEAKER_CSPdefault-src self beaker:script-src self beaker: unsafe-evalchild-src self默认BEAKER_APP_CSPscript-src额外允许hyper:child-src self hyper:desktop 使用允许内嵌 hyperdrive 页面SIDEBAR_CSPscript-src额外允许blob:child-src self beaker:webterm 侧边栏使用。2.2 Viewer 应用与多子应用README 特别注明viewer 应用内包含多个子应用。从路由表可以看出beaker://desktop新标签页主页是典型的聚合型应用——其入口 app/userland/desktop/index.html 通过desktop-app/desktop-app自定义元素挂载主界面并直接加载beaker://assets/vs/loader.js等协议内资源把多个功能模块聚合在一个域名下这与一个文件夹内可承载多个子应用的设计一致。三、app-stdlib跨应用共享组件库beaker://app-stdlibapp/userland/app-stdlib/readme.md定位是Beaker 默认应用间复用的一组 JS 与 Web Components 集合仓库中可以看到js/、css/、vendor/等子目录js/dom.jsDOM 工具与事件、strings.jstoNiceDomain等格式化、clipboard.js、time.js、fs.js、query-params.js、emoji.js、functions.js、const.js、is-ext-binary.js、quill.js等js/com/context-menu.js、toast.js等可复用 Web Componentscss/common.css.js、buttons.css.js、inputs.css.js等以.css.js形式导出的样式模块。Userland 应用通过相对导入直接引用它。以 site-info 为例app/userland/site-info/js/main.js 中import { LitElement, html } from ../../app-stdlib/vendor/lit-element/lit-element.js import { toNiceDomain } from ../../app-stdlib/js/strings.js import { writeToClipboard } from ../../app-stdlib/js/clipboard.js import * as contextMenu from ../../app-stdlib/js/com/context-menu.js import * as toast from ../../app-stdlib/js/com/toast.js3.1 样式构建生成 *.css.jsapp-stdlib的样式以 CSS 与.css.js双份形式共存。README 给出了重建命令node scripts/generate-css-js.js该脚本负责把原始 CSS 打包为可被 ES Module 直接import的*.css.js模块这是 Beaker 应用不做构建即可运行的基础设施之一。四、构建策略按需 build而不是默认 buildREADME 提出一个重要原则可能的情况下Userland 应用不做构建只有当 Userland 应用需要与 Beaker 内部代码共享代码时如 library 和 site-info才引入构建步骤。从 scripts/tasks/build/build.js 可以看到该策略在构建管线中的落地——只有少数几个应用被打包为main.build.jsbundle(userlandDir.path(site-info/js/main.js), userlandDir.path(site-info/js/main.build.js), {...}) bundle(userlandDir.path(editor/js/main.js), userlandDir.path(editor/js/main.build.js), {...}) bundle(userlandDir.path(settings/js/main.js), userlandDir.path(settings/js/main.build.js), {...})浏览器 UIfg/shell-window、fg/location-bar等同样通过该文件中的bundle(...)生成index.build.js而大部分 Userland 应用如 desktop、explorer、webterm直接以源码 index.html形式提供服务无需构建步骤。这种默认不构建、按需打包的取舍既降低了内置应用的维护成本又允许少数与内部代码耦合的应用在构建期完成依赖收拢。五、能迁移到 hyperdrive 的应用判据与实例README 给出了 Userland 应用的去向判断准则一般而言/app/userland中的每个应用都应该是可迁移到 hyperdrive的候选者如果一个应用完全没有迁移进 hyperdrive 的可能它就应该放进/app/fg。这一判据背后是 Beaker 的核心理念——内置应用尽量使用与普通用户网站一致的 Web 技术栈标准 Web API beakerWeb API以便被改造为去中心化站点。仓库中最典型的实例是 explorerapp/userland/explorer/README.md它以Hyperdrive.Network的身份存在定位为用于查看和修改 Hyperdrives 的应用需要支持 Hyperdrive 的浏览器并提供了完整的独立开发流程npm install # 安装开发依赖 npm run dev # 针对开发代码启动本地 http 服务器 npm run build # 产出 ./build 目录 npm run prod # 提供构建产物其开发地址要求写入/etc/hosts将dev.hyperdrive.network指向127.0.0.1——README 特意说明这是为了让 Beaker 向该应用授予正确权限对应 app/bg/web-apis/fg.js 中对hyperdrive.network域名临时放行的逻辑。这个例子完整展示了Userland 应用 潜在 hyperdrive 应用的形态应用在beaker://下开发却能以独立域名跑在本地 Web 服务器上最终迁移进 hyperdrive 后即为一个真正的去中心化应用。六、Userland 与 FG 的取舍边界将 app/userland/README.md 与 app/fg/README.md 对照可以得到清晰的边界规则维度Userlandapp/userlandFGapp/fg运行环境与用户页面相同注入 webview-preload专用 UI 组件环境标准 Web API全部可用不保证可用Beaker Web API通过全局beaker暴露按协议分级不可用需手动 RPCbg-process-rpc.js典型用途可复用、可外置的应用浏览器外壳强耦合组件shell-window、modals 等未来去向优先尝试迁入 hyperdrive留在浏览器内部具体到实现上beaker://协议处理器同时服务两类目录浏览器 UIbeaker://shell-window/、beaker://modals/等映射到 app/fg 下的对应文件夹与 Userland 应用映射到 app/userland两者的差异不在协议层而在执行环境与 API 可用性上——这正是 README 用Userland 页面同环境来定义 Userland 的原因。总结app/userland是 Beaker 中一类特殊的用户态前端它以beaker://独立域名承载每个内置应用通过 webview-preload 注入获得完整标准 Web API 与分级的beakerWeb API共享能力沉淀在app-stdlib默认不构建、仅在需要与内部代码共享时library、site-info、editor、settings才引入构建步骤而在设计哲学上凡是能迁入 hyperdrive 的应用都应留在 Userland否则才下沉到fg。理解这套分层就能清楚地区分 Beaker 中内置应用与浏览器外壳 UI两种前端代码的职责边界。赞分享前端【免费下载链接】beakerAn experimental peer-to-peer Web browser项目地址https://gitcode.com/gh_mirrors/be/beaker点击查看免费下载相关推荐Beaker 应用标准库 beaker-app-stdlib 深度解析CSS 构建脚本、Web Components 与工具函数复用体系Beaker 应用标准库 beaker app stdlib 深度解析CSS 构建脚本、Web Components 与工具函数复用体系 本文围绕 Beake前端cool-retro-term多显示器与大屏显示指南5分钟让CRT铺满你的桌面cool retro term多显示器与大屏显示指南5分钟让CRT铺满你的桌面 cool retro term 是一款模拟老式阴极射线管CRT显示效果的复Beaker 用户态应用路由实战深入理解 lit-element-router 的 Mixin 机制与源码实现Beaker 用户态应用路由实战深入理解 lit element router 的 Mixin 机制与源码实现 导读 本文以 Beaker 浏览器仓库中随 a前端上一篇为什么选择Jenkins Build Monitor Plugin10大核心优势深度剖析下一篇告别卡顿Flame引擎性能分析工具3步定位游戏帧率瓶颈的实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考