ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

page-agent Chrome扩展完整指南:多标签页任务控制利器

page-agent Chrome扩展完整指南:多标签页任务控制利器 page-agent Chrome扩展完整指南多标签页任务控制利器【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agentpage-agent是一个运行在网页内的 JavaScript GUI 智能体只需一句自然语言它就能代替你点击、输入、滚动、填表帮你操控整个浏览器界面。而它的Chrome 扩展更是把这份能力升级成了多标签页任务控制利器不再局限于单个页面智能体可以跨多个标签页连续工作、自动切换页面甚至从页面外部发起任务。这篇完整指南将带你快速上手轻松掌握这套多标签页自动化能力。 一句话理解页面里的 AI 帮你点按钮扩展里的 AI 帮你管浏览器。 什么是 page-agent 的 Chrome 扩展先分清两者的关系避免误解PageAgent.js核心一段纯页面内脚本负责读懂网页 操作网页。它基于文本化 DOM不依赖截图或多模态大模型轻量且隐私友好。Chrome 扩展可选增强在核心之上额外提供多页面任务、浏览器级控制以及从浏览器外部发起任务的能力。换句话说扩展并不是必需的依赖而是一块能力扩展板。你可以只装核心脚本完成单页自动化也可以装上扩展解锁跨标签页的完整体验。相关能力在 README.md 的功能列表中已被明确标注为可选 Chrome 扩展用于多页面任务。 三大核心能力多标签页任务控制的关键1. 跨标签页连续执行任务普通页面脚本困在单个网页里而扩展版智能体可以在任务过程中打开新标签页、跳转到已有标签页、关闭多余标签页并在不同页面之间自由穿梭。这套能力由三件标签工具驱动定义在 tabTools.ts工具作用典型场景open_new_tab打开新标签页并设为当前页需要查资料时新开页面switch_to_tab按 ID 切换到已有标签页在多页面任务中来回跳转close_tab关闭指定标签页首标签除外任务结束清理页面 安全设计初始标签页你打开任务的那个页面永远无法被智能体关闭从底层保证了你不会迷失回不来。2. 浏览器级导航与控制扩展不仅操作页面元素还能感知整个浏览器的状态。每执行一步智能体都会看到一张当前打开了哪些标签页、我现在在哪个页的实时清单就像一个熟练的浏览器老手。每步自动同步标签状态及时发现你手动关闭/新增的页面每步开始前等待页面加载完成避免操作到半截页面智能体新打开的页面会被自动跟随聚焦体验像真人浏览一样顺畅这套拉取式同步逻辑在 TabsController.ts 中实现作者特意选择主动拉取而非长连接推送让多标签状态始终保持稳定可靠。3. 开放的集成接口装好扩展后你的网页、本地服务乃至云端 Agent都能在用户主动授权后通过统一接口发起多标签页任务。这意味着 page-agent 不只是一个浏览器插件更可以成为一个可编程的浏览器控制入口。⚙️ 快速上手安装与配置扩展一键安装步骤打开 Chrome 应用商店搜索并安装Page Agent 扩展。点击工具栏图标打开侧边栏Side Panel——这里就是你与智能体对话的主界面。在底部输入框描述任务按回车即可开始。侧边栏界面非常直观顶部有状态指示与历史、设置入口中间实时展示智能体在想什么、在做什么底部是任务输入框。界面逻辑可在 App.tsx 中找到包含对话、配置、历史记录三大视图。配置你的 AI 模型BYO-LLMpage-agent 支持自带模型Bring Your Own LLM兼容主流大模型也支持本地部署的模型。首次打开时扩展会自动预填一个免费的测试模型qwen3.5-plus让你无需任何配置就能立刻体验。想换成自己的模型点击右上角设置填入你的模型服务地址baseURL、模型名model和密钥apiKey即可。扩展还会自动识别你的系统语言中文/英文并用你使用的语言回复无需手动切换。 小贴士默认演示端点仅用于快速体验正式使用时建议配置自己的模型既稳定又保护隐私。️ 多标签页是如何被管理的——标签组魔法这是整个扩展最巧妙的设计之一。当你发起一个任务时智能体会把相关标签页自动整理成一个彩色的标签组并命名成PageAgent(你的任务)。想象一下这个场景你说帮我比较这三款笔记本的价格。智能体会自动为每个商品新开一个标签页把这几个页面归入同一个彩色标签组方便你一眼识别逐个切换页面读取价格信息汇总后切换回初始页面告诉你结果所有新开的标签页都会被收进这个组里既不会污染你原有的标签栏又随时能让你接管查看。这一创建并命名标签组的逻辑同样在 TabsController.ts 的createTabGroup方法中完成。 从浏览器外部发起任务Token 授权如果你希望让网页脚本、本地程序或云端 Agent直接驱动扩展page-agent 提供了一套受保护的开放接口window.PAGE_AGENT_EXT。为什么需要 Token密钥令牌因为扩展拥有较广的浏览器权限访问页面、导航、多标签控制一旦被滥用会威胁隐私安全。因此 page-agent 用 Token 做门禁——只有用户主动把 Token 交给信任的应用接口才会解锁。完整流程只有三步在扩展侧边栏复制你的授权 Token在你信任的页面里设置该 TokenToken 匹配后扩展自动暴露window.PAGE_AGENT_EXT接口解锁后你只需一行代码就能发起任务const result await window.PAGE_AGENT_EXT.execute( 搜索某产品并打开第一个结果, { baseURL: 你的模型地址, model: 模型名, apiKey: 你的密钥 } )配合PAGE_AGENT_EXT.stop()你随时可以随时叫停正在运行的任务。这套接口支持跨标签导航、包含/排除初始标签页、以及实验性的控制窗口内所有非固定标签页等高级选项完整说明见 extension_api.md。⚠️ 安全提醒Token 相当于钥匙切勿把它交给不信任的页面或脚本。 智能体是怎么看和想的page-agent 不用截图而是把网页转成一棵带编号的元素树每一步都让 AI 在这棵树上做决策先评估上一步结果 → 记住进度 → 设定下一步目标 → 选择动作。这套思考-行动循环的完整规则写在扩展的系统提示词 system_prompt.md 中。其中包含不少贴心的防坑约定例如遇到验证码会主动告诉你我无法解决请手动处理同一动作不重复超过 3 次避免死循环没有凭据时不主动登录尊重你的账号安全任务完成或卡住时会清晰汇报成功还是失败而把思考落到点击之间的桥梁是由 RemotePageController.ts 完成的远程页面控制器它负责在智能体所在环境与真实网页之间安全地传递每一次点击、输入与滚动。 使用限制与注意事项了解边界才能用得安心仅支持普通浏览器窗口弹窗popup和 PWA 应用窗口不受标签组 API 支持多标签控制在这类窗口中不可用。受限页面无法操作chrome://、about:、file://、扩展内部页、开发者工具等系统页面出于安全考虑不在操作范围内智能体会提示你请先打开一个普通网页。初始标签页受保护始终无法被关闭确保你随时能回到任务起点。这些保护机制正是 page-agent 在强大能力与用户安全之间做的平衡。 总结page-agent 的 Chrome 扩展为自然语言操控网页装上了一双跨标签页的手多页面任务跨标签页连续工作不再困在单页浏览器级控制自动开、关、切标签页智能分组管理开放接口Token 授权后页面/本地/云端皆可发起任务自带模型免费测试端点开箱即用也可一键换成你的模型对于想把繁琐的 20 次点击变成一句话指令的用户无论是 ERP、CRM、后台管理系统还是日常的批量资料整理这套多标签页任务控制能力都值得你花 5 分钟安装体验一次。现在打开侧边栏敲下你的第一句任务吧 更多细节可查阅核心能力 packages/core/、页面控制器 packages/page-controller/、扩展主逻辑 packages/extension/src/agent/【免费下载链接】page-agentJavaScript in-page GUI agent. Control web interfaces with natural language.项目地址: https://gitcode.com/GitHub_Trending/pa/page-agent创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表