page-agent浏览器扩展SidePanel侧边栏UI源码解读ConfigPanel与历史面板实现完全指南【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agentpage-agent是一个纯 JavaScript 实现的页面内 GUI agent可以用自然语言控制 Web 界面。其 Chrome 扩展版的核心交互入口就是SidePanel 侧边栏面板在这里输入任务、查看 Agent 执行过程、配置 LLM 参数、管理历史会话。本文将带你快速读懂侧边栏的源码结构重点剖析 ConfigPanel 设置面板与历史面板的实现细节。SidePanel 整体架构一个状态机驱动的聊天界面侧边栏入口是 App.tsx整个面板只用一个view状态字段在 4 个视图之间切换type View | { name: chat } | { name: config } | { name: history } | { name: history-detail; sessionId: string }没有引入路由库用条件渲染替代传统页面跳转非常符合扩展侧边栏轻量单页的场景 关键设计点会话自动持久化通过useEffect监听status变化当状态从running变为completed / error / stopped时自动调用saveSession()把本次任务写入 IndexedDB见 App.tsx 第 34-50 行自动滚动新事件到来时把历史区滚动到底部模拟实时日志体验输入框交互Enter 发送ShiftEnter 换行并处理了中文输入法合成期的误触发isComposing判断聊天视图由头部Logo 状态点 历史/设置按钮、中间事件流EventCard列表 ActivityCard实时活动指示、底部输入框三部分组成运行中的任务按钮会变成红色的停止按钮所有状态status、history、activity、config等来自 useAgent.ts 这个自定义 Hook——它内部创建MultiPageAgent实例并通过监听statuschange、historychange、activity三类事件把 Agent 的状态同步到 React 状态中是UI 层与 Agent 内核解耦的关键桥梁。ConfigPanel 设置面板LLM 配置与实验开关的实现点击侧边栏右上角的齿轮图标进入 ConfigPanel.tsx它是扩展的设置中心负责管理所有 LLM 相关配置配置项一览配置项说明类型Base URLLLM API 地址默认使用项目演示端点文本Model模型名称如gpt-5.1文本API Key支持明文/掩码切换显示密码Response LanguageAgent 回复语言跟随系统 / 英文 / 中文下拉Max Steps最大执行步数1-200位于 Advanced 折叠区数字System Instruction追加系统指令定制 Agent 行为多行文本实验开关llms.txt 支持、包含所有标签页、禁用 named tool_choiceSwitch值得学习的 3 个实现细节外部配置变化的同步机制ConfigPanel.tsx 第 52-64 行组件内用一个prevConfig状态与传入的configprop 比对发现不一致就重新同步所有本地 state。这让面板在Agent 热更新配置后仍能保持 UI 与数据源一致。User Auth Token 轮询读取第 66-88 行面板每秒轮询chrome.storage.local中的PageAgentExtUserAuthToken读到后停止轮询。这个 Token 允许网页反向调用本扩展是网页驱动 Agent玩法的凭证入口界面提供一键复制。测试端点的合规提示当isTestingEndpoint(baseURL)为真时会在表单中渲染一条琥珀色提示告知用户正在使用免费测试 API 并链接到条款说明——开源项目合规意识的体现。保存时handleSave调用onSave实际执行的是useAgent中的configure()把配置拆成llmConfig、language、advancedConfig三个键写入chrome.storage.local再触发 React 状态更新useAgent里的useEffect监听config变化从而重建 Agent 实例整个链路是单向数据流。历史面板基于 IndexedDB 的会话持久化方案历史功能的源码分三层存储层 db.ts、列表层 HistoryList.tsx、详情层 HistoryDetail.tsx。存储层极简的 IndexedDB 封装db.ts 用idb库封装了 4 个函数saveSession/listSessions/getSession/deleteSession外加一个clearSessions。数据结构非常清晰数据库名page-agent-ext单一 object storesessions每条记录SessionRecord包含idcrypto.randomUUID()生成、task任务文本、history完整的事件数组、status终态、createdAt时间戳在createdAt上建立by-created索引listSessions通过索引倒序取出实现最新在前列表层一个会呼吸的列表HistoryList.tsx 的细节相当用心骨架屏加载态加载时渲染 4 条animate-pulse的占位条目时间友好化timeAgo()把时间戳转成 just now / 3m ago / 2h ago 格式悬停才出现的操作区每条记录 hover 时才显示重跑RotateCcw、导出 JSON调用 history-export.ts 下载、删除三个小图标按钮平时保持界面干净状态用绿色对勾/红色叉号区分成功与否条目本身支持键盘可访问rolebuttontabIndex详情层只读回放 一键重跑HistoryDetail.tsx 按sessionId取出单条记录顶部显示任务与Run again / Delete操作下方用与聊天视图相同的EventCard组件只读回放整段执行历史——组件复用让实时执行和历史回放共享同一套渲染逻辑是很聪明的设计。事件卡片Agent 执行过程的可视化实时流与历史详情共用的 cards.tsx 按事件类型渲染不同卡片StepCard蓝色左边框展示第 N 步的反思评价/记忆/目标、动作点击/输入/滚动/跳转各配专属图标与原始请求/响应的可折叠调试区ObservationCard绿色Agent 对页面结构的观察RetryCard琥珀色自动重试提示含当前/最大次数ErrorCard红色错误信息 原始响应ResultCarddone动作专属的绿色成功/红色失败结果卡ActivityCard带脉冲光点的Thinking... / Executing...实时指示器三层架构小结整个侧边栏的数据流可以概括为一条清晰的单向链路ConfigPanel ──configure()──▶ chrome.storage.local ──▶ useAgent 重建 Agent Chat 输入 ──execute()──▶ MultiPageAgent ──事件──▶ cards.tsx 实时渲染 任务结束 ──saveSession()──▶ IndexedDB ──▶ HistoryList / HistoryDetail 回放UI 状态view 状态机与 Agent 状态status 事件互不干扰配置、会话、历史三类数据分别落在chrome.storage.local和 IndexedDB职责分明组件高度复用EventCard同时服务于实时流与历史回放这套 SidePanel 实现麻雀虽小五脏俱全对于想给自己的浏览器扩展做一个Agent 控制台的同学来说是非常值得参考的完整范本 相关源码导航侧边栏入口packages/extension/src/entrypoints/sidepanel/设置面板packages/extension/src/components/ConfigPanel.tsx历史面板packages/extension/src/components/HistoryList.tsx存储封装packages/extension/src/lib/db.ts扩展 API 文档docs/extension_api.md【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 page-agent浏览器扩展SidePanel侧边栏UI源码解读：ConfigPanel与历史面板实现完全指南
page-agent浏览器扩展SidePanel侧边栏UI源码解读ConfigPanel与历史面板实现完全指南【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agentpage-agent是一个纯 JavaScript 实现的页面内 GUI agent可以用自然语言控制 Web 界面。其 Chrome 扩展版的核心交互入口就是SidePanel 侧边栏面板在这里输入任务、查看 Agent 执行过程、配置 LLM 参数、管理历史会话。本文将带你快速读懂侧边栏的源码结构重点剖析 ConfigPanel 设置面板与历史面板的实现细节。SidePanel 整体架构一个状态机驱动的聊天界面侧边栏入口是 App.tsx整个面板只用一个view状态字段在 4 个视图之间切换type View | { name: chat } | { name: config } | { name: history } | { name: history-detail; sessionId: string }没有引入路由库用条件渲染替代传统页面跳转非常符合扩展侧边栏轻量单页的场景 关键设计点会话自动持久化通过useEffect监听status变化当状态从running变为completed / error / stopped时自动调用saveSession()把本次任务写入 IndexedDB见 App.tsx 第 34-50 行自动滚动新事件到来时把历史区滚动到底部模拟实时日志体验输入框交互Enter 发送ShiftEnter 换行并处理了中文输入法合成期的误触发isComposing判断聊天视图由头部Logo 状态点 历史/设置按钮、中间事件流EventCard列表 ActivityCard实时活动指示、底部输入框三部分组成运行中的任务按钮会变成红色的停止按钮所有状态status、history、activity、config等来自 useAgent.ts 这个自定义 Hook——它内部创建MultiPageAgent实例并通过监听statuschange、historychange、activity三类事件把 Agent 的状态同步到 React 状态中是UI 层与 Agent 内核解耦的关键桥梁。ConfigPanel 设置面板LLM 配置与实验开关的实现点击侧边栏右上角的齿轮图标进入 ConfigPanel.tsx它是扩展的设置中心负责管理所有 LLM 相关配置配置项一览配置项说明类型Base URLLLM API 地址默认使用项目演示端点文本Model模型名称如gpt-5.1文本API Key支持明文/掩码切换显示密码Response LanguageAgent 回复语言跟随系统 / 英文 / 中文下拉Max Steps最大执行步数1-200位于 Advanced 折叠区数字System Instruction追加系统指令定制 Agent 行为多行文本实验开关llms.txt 支持、包含所有标签页、禁用 named tool_choiceSwitch值得学习的 3 个实现细节外部配置变化的同步机制ConfigPanel.tsx 第 52-64 行组件内用一个prevConfig状态与传入的configprop 比对发现不一致就重新同步所有本地 state。这让面板在Agent 热更新配置后仍能保持 UI 与数据源一致。User Auth Token 轮询读取第 66-88 行面板每秒轮询chrome.storage.local中的PageAgentExtUserAuthToken读到后停止轮询。这个 Token 允许网页反向调用本扩展是网页驱动 Agent玩法的凭证入口界面提供一键复制。测试端点的合规提示当isTestingEndpoint(baseURL)为真时会在表单中渲染一条琥珀色提示告知用户正在使用免费测试 API 并链接到条款说明——开源项目合规意识的体现。保存时handleSave调用onSave实际执行的是useAgent中的configure()把配置拆成llmConfig、language、advancedConfig三个键写入chrome.storage.local再触发 React 状态更新useAgent里的useEffect监听config变化从而重建 Agent 实例整个链路是单向数据流。历史面板基于 IndexedDB 的会话持久化方案历史功能的源码分三层存储层 db.ts、列表层 HistoryList.tsx、详情层 HistoryDetail.tsx。存储层极简的 IndexedDB 封装db.ts 用idb库封装了 4 个函数saveSession/listSessions/getSession/deleteSession外加一个clearSessions。数据结构非常清晰数据库名page-agent-ext单一 object storesessions每条记录SessionRecord包含idcrypto.randomUUID()生成、task任务文本、history完整的事件数组、status终态、createdAt时间戳在createdAt上建立by-created索引listSessions通过索引倒序取出实现最新在前列表层一个会呼吸的列表HistoryList.tsx 的细节相当用心骨架屏加载态加载时渲染 4 条animate-pulse的占位条目时间友好化timeAgo()把时间戳转成 just now / 3m ago / 2h ago 格式悬停才出现的操作区每条记录 hover 时才显示重跑RotateCcw、导出 JSON调用 history-export.ts 下载、删除三个小图标按钮平时保持界面干净状态用绿色对勾/红色叉号区分成功与否条目本身支持键盘可访问rolebuttontabIndex详情层只读回放 一键重跑HistoryDetail.tsx 按sessionId取出单条记录顶部显示任务与Run again / Delete操作下方用与聊天视图相同的EventCard组件只读回放整段执行历史——组件复用让实时执行和历史回放共享同一套渲染逻辑是很聪明的设计。事件卡片Agent 执行过程的可视化实时流与历史详情共用的 cards.tsx 按事件类型渲染不同卡片StepCard蓝色左边框展示第 N 步的反思评价/记忆/目标、动作点击/输入/滚动/跳转各配专属图标与原始请求/响应的可折叠调试区ObservationCard绿色Agent 对页面结构的观察RetryCard琥珀色自动重试提示含当前/最大次数ErrorCard红色错误信息 原始响应ResultCarddone动作专属的绿色成功/红色失败结果卡ActivityCard带脉冲光点的Thinking... / Executing...实时指示器三层架构小结整个侧边栏的数据流可以概括为一条清晰的单向链路ConfigPanel ──configure()──▶ chrome.storage.local ──▶ useAgent 重建 Agent Chat 输入 ──execute()──▶ MultiPageAgent ──事件──▶ cards.tsx 实时渲染 任务结束 ──saveSession()──▶ IndexedDB ──▶ HistoryList / HistoryDetail 回放UI 状态view 状态机与 Agent 状态status 事件互不干扰配置、会话、历史三类数据分别落在chrome.storage.local和 IndexedDB职责分明组件高度复用EventCard同时服务于实时流与历史回放这套 SidePanel 实现麻雀虽小五脏俱全对于想给自己的浏览器扩展做一个Agent 控制台的同学来说是非常值得参考的完整范本 相关源码导航侧边栏入口packages/extension/src/entrypoints/sidepanel/设置面板packages/extension/src/components/ConfigPanel.tsx历史面板packages/extension/src/components/HistoryList.tsx存储封装packages/extension/src/lib/db.ts扩展 API 文档docs/extension_api.md【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考