diff --git a/README.md b/README.md index f82c170..d86595e 100644 --- a/README.md +++ b/README.md @@ -81,7 +81,10 @@ Install once in Chrome: load unpacked extension from `extensions/tab-group-cdp/` - Download archive routing: downloads from managed tabs are routed to `agent-browser-stealth//...`. - Domain allowlist fallback: when allowlist is configured for a session, extension can force-block out-of-policy tabs to `about:blank`. - Risk hints (debug only): suspicious host/TLD hints are returned via handshake and printed only when `AGENT_BROWSER_DEBUG=1`. -- Side panel console: view session/tab/group mapping, focus a session, keep only one session, clean empty groups, edit session allowlist, and toggle auto-clean. +- Side panel browser controls: open/back/forward/reload, click/fill/press by CSS selector, run shortcut commands, and switch/close tabs. +- Side panel developer signals: capture page console errors/warnings, fetch/xhr network events, command history, and live DOM snapshots. +- Workflow automation: record actions into workflows, run workflows, map workflows to slash shortcuts, and schedule runs (daily/weekly/monthly/yearly). +- Side panel operations console: view session/tab/group mapping, focus a session, keep only one session, clean empty groups, edit session allowlist, and toggle auto-clean. ## Stealth Architecture diff --git a/cli/src/output.rs b/cli/src/output.rs index 9af100a..986ba8f 100644 --- a/cli/src/output.rs +++ b/cli/src/output.rs @@ -2249,6 +2249,7 @@ Notes: - doctor does not accept positional arguments - If browser is not already connected, doctor will still report CDP probe results - Plugin handshake requires CDP mode, a normal http(s) page, and the extension installed + - Extension side panel includes browser controls, developer signal panels, workflow shortcuts, and scheduled automation Global Options: --json Output as JSON @@ -2524,6 +2525,7 @@ Options: --download-path Default download directory (or AGENT_BROWSER_DOWNLOAD_PATH) --tab-group Base title for agent tab groups (CDP plugin mode; silent no-op if plugin unavailable) --tab-group-plugin-id Expected Chrome extension ID for tab-group handshake (or AGENT_BROWSER_TAB_GROUP_PLUGIN_ID) + Extension side panel supports browser controls + console/network/DOM + workflow scheduling --risk-mode Verify/captcha handling: off, warn, block (or AGENT_BROWSER_RISK_MODE) --wait-until Navigation wait strategy for open/navigate: load, domcontentloaded, networkidle --session-name Auto-save/restore session state (defaults to --session) diff --git a/docs/blog/agent-browser-stealth-new-features-release.zh-CN.md b/docs/blog/agent-browser-stealth-new-features-release.zh-CN.md new file mode 100644 index 0000000..adcb76e --- /dev/null +++ b/docs/blog/agent-browser-stealth-new-features-release.zh-CN.md @@ -0,0 +1,78 @@ +# agent-browser-stealth 新功能发布 + +这次我们对 `agent-browser-stealth` 做了一次完整升级: +从“标签分组辅助”升级为“可控制、可观测、可编排”的 AI 浏览器控制台。 + +## 这次升级解决了什么问题 + +过去插件主要解决会话隔离和分组管理。 +在真实自动化场景中,仍有三个核心缺口: + +1. 缺少侧边栏直接控页能力 +2. 缺少执行过程可观测性(console/network/DOM) +3. 缺少可复用流程(workflow/shortcut/schedule) + +本次发布一次性补齐这三块。 + +## 新增能力一:侧边栏浏览控制 + +现在你可以在 side panel 直接完成页面控制: + +- `open / back / forward / reload` +- 按 CSS 选择器执行 `click / fill / press` +- 标签页切换与关闭 +- 直接运行快捷指令(slash shortcut) + +这让“流程启动”和“人工微调”可以在同一界面完成。 + +## 新增能力二:开发者观测能力(Developer Signals) + +我们新增了调试信号面板,避免黑盒执行: + +- 页面 `console` 事件(含 error/warn) +- `fetch/xhr` 网络事件 +- 命令历史 +- DOM 状态快照(文本预览、交互元素、mutation 摘要) + +当流程失败时,可以快速判断是页面结构变化、网络问题还是动作配置问题。 + +## 新增能力三:Workflow 自动化体系 + +插件现在支持完整自动化闭环: + +- 录制:`Start -> Stop -> Save` +- 回放:运行 workflow +- 复用:绑定 slash shortcut +- 调度:`daily / weekly / monthly / yearly` + +调度任务会记录 `lastRunAt / nextRunAt`,并把执行结果写入活动流,便于排查和审计。 + +## 已完成实测:workflow + abs 接管流程 + +我们验证了一个非常实用的流程: + +1. 先用 workflow 进入目标页面 +2. 在关键节点停顿(checkpoint) +3. 让 AI 使用 `abs` 完成上传/填写等细操作 +4. 停在发布前,等待人工确认 + +这个模式已经在小红书发布场景中跑通: +进入发布页、上传图片、填写标题正文,且默认不自动点击“发布”。 + +## 兼容性与稳定性改进 + +这次还修复了几个关键稳定性问题: + +- 修复 side panel `activeTab` 空值崩溃 +- 增加面板状态归一化兜底,兼容热更新与旧返回结构 +- 修复侧边栏渲染的转义问题,避免内容显示异常 + +## 总结 + +`agent-browser-stealth` 现在不只是“分组插件”,而是一个真正可用于生产流的浏览器执行层: + +- 可控:侧边栏直接控页 + 分段执行 +- 可观测:console/network/DOM 全链路可见 +- 可复用:workflow + shortcut + schedule + +如果你在做 AI 浏览器自动化,这次升级能直接提升流程稳定性与迭代效率。 diff --git a/docs/src/app/commands/page.mdx b/docs/src/app/commands/page.mdx index 7d90e19..70ed65d 100644 --- a/docs/src/app/commands/page.mdx +++ b/docs/src/app/commands/page.mdx @@ -152,6 +152,9 @@ CDP mode uses a browser extension handshake to group tabs. - non-default: `Agent Browser Stealth • ` - Extension side panel (`agent-browser-stealth`) also provides: - Session window isolation and deterministic group colors. + - Browser controls (`open`, `back`, `forward`, `reload`, `click/fill/press` by CSS selector). + - Developer signals (console warnings/errors, fetch/xhr network events, DOM snapshot capture). + - Workflow automation (record actions, run workflows, assign slash shortcuts, and create schedules). - `Keep Only This`, `Focus`, `Clean Empty Groups` quick actions. - Toggle switches for strict isolation / activation guard / auto-clean. - Session allowlist editing (domain fallback to `about:blank` when violated). diff --git a/docs/src/app/configuration/page.mdx b/docs/src/app/configuration/page.mdx index cc31855..2a6ecbd 100644 --- a/docs/src/app/configuration/page.mdx +++ b/docs/src/app/configuration/page.mdx @@ -321,7 +321,7 @@ For tab grouping in CDP mode, grouping is best-effort through the extension hand extension available => grouped by session; extension missing/unavailable => silent no-op. With the `agent-browser-stealth` extension installed, the side panel also exposes -session window isolation controls, activation guard toggles, empty-group cleanup, and per-session allowlist policy editing. +session window isolation controls, activation guard toggles, empty-group cleanup, per-session allowlist policy editing, browser action controls, developer signal panels (console/network/DOM), and workflow automation (recording, shortcuts, and scheduled runs). ## Common Configurations diff --git a/extensions/tab-group-cdp/icons/icon.svg b/extensions/tab-group-cdp/icons/icon.svg new file mode 100644 index 0000000..b18c503 --- /dev/null +++ b/extensions/tab-group-cdp/icons/icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/extensions/tab-group-cdp/sidepanel.css b/extensions/tab-group-cdp/sidepanel.css index 91b20cf..c3f203e 100644 --- a/extensions/tab-group-cdp/sidepanel.css +++ b/extensions/tab-group-cdp/sidepanel.css @@ -1,64 +1,66 @@ :root { - --bg: #0d1117; - --panel: #161b22; - --item-bg: rgba(255, 255, 255, 0.03); - --item-hover: rgba(255, 255, 255, 0.06); - --border: #30363d; - --border-focus: #484f58; - --text-main: #e6edf3; - --text-muted: #848d97; - --accent: #2f81f7; - --accent-soft: rgba(47, 129, 247, 0.1); - --success: #3fb950; - --warning: #d29922; - --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; + --bg: #f3f5f7; + --surface: #ffffff; + --surface-alt: #f6f8fb; + --primary: #1769e0; + --primary-hover: #0f58c0; + --border: #d8dde4; + --text-main: #18212f; + --text-secondary: #4a5568; + --text-muted: #667287; + --success: #117a3d; + --warning: #b86d00; + --danger: #bd1e24; + --radius: 10px; + --mono: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } * { box-sizing: border-box; - -webkit-font-smoothing: antialiased; } body { margin: 0; - padding: 20px; - background-color: var(--bg); + padding: 14px; + background: var(--bg); color: var(--text-main); - font-family: var(--font-family); + font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; - line-height: 1.5; + line-height: 1.4; } -/* Scrollbar */ -::-webkit-scrollbar { width: 8px; } -::-webkit-scrollbar-track { background: transparent; } -::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } -::-webkit-scrollbar-thumb:hover { background: var(--border-focus); } - header { display: flex; flex-direction: column; - gap: 16px; - margin-bottom: 24px; + gap: 10px; + margin-bottom: 14px; } h1 { - font-size: 16px; - font-weight: 600; margin: 0; - display: flex; - align-items: center; - gap: 8px; + font-size: 19px; + font-weight: 650; } -h1::before { - content: ""; - display: block; - width: 12px; - height: 12px; - background: var(--accent); - border-radius: 3px; - box-shadow: 0 0 10px var(--accent); +h3 { + margin: 0 0 12px 0; + font-size: 11px; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-secondary); +} + +h4 { + margin: 0; + font-size: 14px; +} + +.card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 14px; + margin-bottom: 12px; } .actions { @@ -71,169 +73,186 @@ button { display: inline-flex; align-items: center; justify-content: center; - padding: 6px 12px; - background: var(--panel); border: 1px solid var(--border); border-radius: 6px; - color: var(--text-main); - font-size: 12px; - font-weight: 500; + padding: 6px 10px; + background: var(--surface); + color: var(--primary); cursor: pointer; - transition: all 0.15s ease; + font-size: 12px; + font-weight: 600; } button:hover { - background: var(--item-hover); - border-color: var(--border-focus); + border-color: var(--primary); + background: #eef4ff; } -#refresh-btn { - background: var(--accent); - border-color: var(--accent); - color: #ffffff; +button.primary { + background: var(--primary); + border-color: var(--primary); + color: #fff; } -#refresh-btn:hover { - background: #4493f8; - border-color: #4493f8; +button.primary:hover { + background: var(--primary-hover); } -.card { - background: var(--panel); - border: 1px solid var(--border); - border-radius: 10px; - padding: 16px; - margin-bottom: 20px; - overflow: hidden; +button.danger { + color: var(--danger); } -h3 { +.status-line { + min-height: 18px; + color: var(--text-secondary); font-size: 12px; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--text-muted); - margin: 0 0 12px 0; - font-weight: 600; +} + +.status-line.ok { + color: var(--success); +} + +.status-line.warn { + color: var(--warning); +} + +.status-line.error { + color: var(--danger); +} + +.row { + display: flex; + gap: 8px; + align-items: center; +} + +.row.wrap { + flex-wrap: wrap; +} + +.row + .row { + margin-top: 8px; +} + +input, +select, +textarea { + width: 100%; + padding: 7px 9px; + border-radius: 6px; + border: 1px solid var(--border); + background: var(--surface-alt); + color: var(--text-main); + font-size: 12px; +} + +input.mono, +textarea.mono, +code, +pre { + font-family: var(--mono); +} + +pre { + margin: 0; + background: #0f172a; + color: #dce6fb; + border-radius: 8px; + padding: 10px; + max-height: 220px; + overflow: auto; + font-size: 11px; +} + +.tags { + display: flex; + gap: 6px; + flex-wrap: wrap; + margin-top: 8px; +} + +.tag { + border-radius: 999px; + border: 1px solid var(--border); + padding: 2px 8px; + font-size: 11px; + color: var(--text-secondary); + background: var(--surface-alt); } .stack { display: flex; flex-direction: column; - gap: 16px; -} - -.session-title { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 12px; -} - -.session-title h4 { - font-size: 14px; - font-weight: 600; - margin: 0; - color: var(--accent); -} - -.tags { - display: flex; - flex-wrap: wrap; - gap: 4px; - margin: 8px 0; -} - -.tag { - background: var(--accent-soft); - color: var(--accent); - border: 1px solid transparent; - padding: 1px 6px; - border-radius: 4px; - font-size: 11px; - font-weight: 500; + gap: 10px; } .list { display: flex; flex-direction: column; - gap: 1px; /* Divider effect */ - background: var(--border); - border: 1px solid var(--border); - border-radius: 6px; - overflow: hidden; - margin-top: 12px; + gap: 6px; } .item { - background: var(--panel); - padding: 10px 12px; - display: flex; - flex-direction: column; - gap: 2px; - transition: background 0.1s ease; -} - -.item:hover { - background: var(--item-hover); + border: 1px solid var(--border); + border-radius: 8px; + padding: 8px; + background: var(--surface-alt); } .item-title { - font-weight: 500; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + font-weight: 600; color: var(--text-main); } .item-url { - color: var(--text-muted); font-size: 11px; + color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.row-actions { - display: flex; - gap: 4px; - margin-top: 12px; - padding-top: 12px; - border-top: 1px solid var(--border); -} - -.row-actions button { - padding: 4px 8px; +.caption { font-size: 11px; - background: transparent; -} - -.empty { color: var(--text-muted); - text-align: center; - padding: 40px 0; - font-size: 12px; } -code { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; - background: rgba(110, 118, 129, 0.4); - padding: 2px 5px; - border-radius: 4px; - font-size: 11px; +hr { + border: none; + border-top: 1px solid var(--border); + margin: 12px 0; } -#summary code { - color: var(--warning); +.section-title { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 8px; } -/* Summary Grid */ -#summary .tags { +.grid-2 { display: grid; - grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + grid-template-columns: 1fr 1fr; gap: 8px; } -#summary .tag { - text-align: center; - padding: 6px; +.event-pill { + display: inline-flex; + align-items: center; + border-radius: 999px; + border: 1px solid var(--border); + padding: 1px 7px; + font-size: 10px; + color: var(--text-secondary); + background: #f0f4fa; +} + +.muted { + color: var(--text-muted); +} + +.empty { + text-align: center; + color: var(--text-muted); + padding: 14px 0; } diff --git a/extensions/tab-group-cdp/sidepanel.html b/extensions/tab-group-cdp/sidepanel.html index fc92800..f8c5595 100644 --- a/extensions/tab-group-cdp/sidepanel.html +++ b/extensions/tab-group-cdp/sidepanel.html @@ -13,9 +13,13 @@ +
+
+
+
diff --git a/skills/agent-browser/SKILL.md b/skills/agent-browser/SKILL.md index 10f2757..e4c3074 100644 --- a/skills/agent-browser/SKILL.md +++ b/skills/agent-browser/SKILL.md @@ -286,7 +286,10 @@ Notes: - non-default session: `Agent Browser Stealth • ` - Additional extension-side capabilities: - Session window isolation + deterministic group colors. - - Side panel controls: Focus / Keep Only This / Clean Empty Groups + isolation/auto-clean toggles. + - Side panel browser controls: `open` / `back` / `forward` / `reload` + selector-based `click` / `fill` / `press`. + - Side panel developer signals: page console events, fetch/xhr network events, command history, and on-demand DOM snapshots. + - Side panel automation: action recording, workflow run, slash shortcut binding, and scheduled execution (daily/weekly/monthly/yearly). + - Side panel operations: Focus / Keep Only This / Clean Empty Groups + isolation/auto-clean toggles. - Session allowlist policy editing and fallback blocking (`about:blank`). - Download auto-routing to `agent-browser-stealth//...`.