悬浮按钮组
注入宿主页的悬浮玻璃操作条(导航 + 自定义主操作)
用途
向宿主网页(内嵌浏览器)注入的悬浮操作条(参考实现置于页面底部居中):导航区(「后退」圆钮,随 canBack 禁用)+ URL 胶囊(锁形标示 https / http、地址输入 Enter 导航、「重新加载」钮)+ 可扩展的自定义动作钮 + 唯一着色主操作。用例参考:「提取脚本」编辑层与「提取」抓取词条。
设计规范 · macOS 26 / 27
- Liquid Glass 分层原则的典型场景:玻璃只属于悬浮在内容(第三方网页)之上的功能层,页面滚动时内容从玻璃下经过、经
backdrop-blur透出。 - 圆钮与胶囊同排同心,间距 8px;整条只有「提取」一枚着色 prominent——主操作唯一。
- URL 胶囊形态同 Safari 26 的浮动玻璃地址栏:锁形标示安全态、地址与页面操作收在一枚胶囊里。
状态与交互
- 锁形随输入实时切换;「后退」的 disabled 表达导航栈状态。
- 注入实现:Shadow DOM 隔离宿主页样式、挂在 html 末端防 SPA 重渲染吞节点、z-index 取 2147483647 顶层;软导航(pushState / popstate)主动上报 URL。
参考实现
参考实现:frontend/src/floatbar/main.ts(IIFE 单文件,作为 user script 注入 WebView2 / WKWebView);与宿主进程经 postMessage 桥双向通信——命令 back / reload / navigate / js / extract / urlchange / ready,状态经 __nteFloatbar.setState 回推。