Bohdan Triapitsyn
a5aa32446d
The preview panel worked by proxying a dev server through OpenChamber's own origin and rewriting the HTML that came back. Anything the rewriter did not anticipate broke, and pages that refuse to be embedded never loaded at all. This deletes the proxy (-1604 lines and its tests) and merges the preview and browser panels into one surface backed by a real Chromium view. What the panel is now - A `<webview>` in its own session partition: logins and cookies persist, hot reload works because nothing is rewritten, DevTools are one click away. - Annotation: pick one element, drag a region, or draw freehand, write a note, and it reaches chat with a screenshot of the visible page with the marks on it. - Toolbar: hard reload, page zoom, device sizes, a light/dark switch that applies to the page rather than the app, and cookie/cache clearing scoped to the panel alone. - Several pages at once, each tab showing the page's own favicon, and an address bar that suggests pages already visited in this project. - Dev servers are listed from what is actually listening on the machine, checked against what a project announced, so a server is offered no matter how it was started. One that is still starting is waited for instead of failing. Remote dev servers The desktop app binds a local port and pipes raw bytes to the OpenChamber host over the existing authenticated connection, so the page keeps its own origin at the root of its own host. The reachable set is exactly what discovery reports and is re-checked per connection, so an authenticated client cannot dial arbitrary local services on the host. Links and redirects to another loopback port stay on the machine that served the page. A tunnel that cannot be opened is reported; it is never replaced by the plain loopback URL, which would answer from the user's own machine under a remote address. Agent control Browser actions are a separate `openchamber_web` tool: open, snapshot, click, type, scroll, inspect computed styles, resize between mobile/tablet/desktop, and capture a screenshot into `.openchamber/screenshots/` in the project. The existing `openchamber` tool keeps sessions, worktrees and scheduled tasks. Each has its own setting in the new Settings -> General -> OpenChamber Tools section, and the plugin is not injected at all when both are off. Capability belongs to the connected client, not to configuration: a client declares on its event stream that it can drive a page, which only a Chromium host does. Exactly one client performs each request — it claims the request before acting, and the first claim wins — because deciding by whose result arrives first would be too late for a click that already happened. No client listening is answered immediately with an explanation rather than a timeout. Runtime boundaries Web tabs get a plain iframe that can display a page but not inspect one. The VS Code extension no longer offers the surface at all, since nothing that makes the panel worth having works there. Mobile is unaffected. Native boundary Camera, microphone, location and device-picker requests from panel pages are denied — Electron grants them by default when no handler is set, and the panel loads whatever address the user types. Page capture, appearance emulation and storage clearing verify that their target belongs to the panel's own session instead of trusting a web-contents id from the renderer. Persisted state Stored `preview` tabs migrate to `browser` (v13 -> v14). Context panel tab limits are now per surface, so filling one surface no longer evicts another's tabs. Address history is stored per project and per runtime. Documentation `preview.mdx` and `desktop-browser.mdx` rewritten across all locales, the agent tool settings path corrected, new `DOCUMENTATION.md` for the browser-control broker and the dev tunnel, and the `ui-api-decoupling` skill updated where it still described the deleted proxy.
54 lines
3.1 KiB
Plaintext
54 lines
3.1 KiB
Plaintext
---
|
|
title: 浏览器面板
|
|
description: 在应用内浏览任意页面、为其添加标注，并让智能体操作它。
|
|
---
|
|
|
|
# 浏览器面板
|
|
|
|
浏览器面板会在聊天旁边打开任意页面。用应用标题栏的地球按钮打开它。
|
|
|
|
在桌面应用中，它是一个真正的浏览器：登录状态会保留，热重载可用，开发者工具一键即达。在浏览器标签页中，面板仍能显示页面，但无法查看其内部——下面的标注工具仅限桌面端。
|
|
|
|
在这里打开的页面无法使用你的摄像头、麦克风或位置：这类请求会被拒绝。
|
|
|
|
## 工具栏
|
|
|
|
地址栏会记住你在这个项目里打开过的页面，并在你输入时给出候选，按地址或页面标题的任意片段匹配。方向键在列表中移动，回车打开选中的一项，行上的按钮把它从列表中移除。
|
|
|
|
旁边是**重新加载**，还有在改动怎么都不出现时忽略缓存的**强制重新加载**，以及只缩放页面的缩放控件。
|
|
|
|
**清除 Cookie** 和**清除缓存数据**只作用于这个面板。你的 OpenChamber 会话和其他窗口不受影响。
|
|
|
|
## 为页面添加标注
|
|
|
|
按 **标注**，页面上方会出现一个包含三种工具的工具条：
|
|
|
|
- **元素** — 点击某个元素。点击另一个会移动选择，再次点击同一个则取消。
|
|
- **区域** — 当要说的内容不止一个元素时，拖拽出矩形框住那块区域。
|
|
- **绘制** — 在页面上自由手绘。
|
|
|
|
在标记旁出现的输入框里写下你的想法，然后按 **附加**，或直接按回车。你的聊天消息会收到一张卡片，包含你标记的全部内容、你的备注，以及一张画上你的标记的可见页面截图——于是你可以说"这个按钮，再圆一点"，而不必描述它在哪里。
|
|
|
|
页面本身不会被修改——标注只是标记已有的内容。按 `Esc` 取消并关闭工具条。
|
|
|
|
## 让智能体操作
|
|
|
|
智能体可以自己使用浏览器面板——打开页面、读取页面内容、点击、输入、滚动，并在移动端、平板和桌面端布局之间切换——从而自行检查工作成果，而不必来问你。你可以在面板中看到这个过程。
|
|
|
|
智能体无法在页面中执行任意代码。浏览器保留着你真实的登录状态，因此它只能执行上述操作。
|
|
|
|
它还可以把当前看到的画面保存为图片，放进项目里的 `.openchamber/screenshots/`，并在回复中展示给你。「改动前后」的对比正是靠这一点，而文件会留在那里，方便附到 pull request 上。
|
|
|
|
浏览器相关的动作属于 **OpenChamber Web 工具**，可在**设置 → 通用 → OpenChamber 工具**中单独开关。
|
|
|
|
这需要桌面应用：在浏览器标签页中显示的页面无法被操作。
|
|
|
|
## 开发者工具
|
|
|
|
按工具条上的终端按钮，即可打开 Chromium 自带的页面开发者工具——控制台、网络、元素，一应俱全。
|
|
|
|
## 相关
|
|
|
|
- [预览与开发服务器](/preview/) — 打开正在运行的应用，包括远程机器上的
|
|
- [智能体控制工具](/zh-cn/agent-control-tool/) — 在聊天中管理会话、worktree 和计划任务
|