当前位置：首页 > news >正文

从 Page-Agent 到浏览器插件：打造你的第一个 AI 网页助手

news 2026/5/16 3:02:06

为什么我们需要一个浏览器 Agent？

你有没有遇到过这种场景：

刷到一个不错的技术文章，想提取关键内容，结果要手动复制粘贴半天；想在某个网站填个表单，同样的信息要输三遍；看到一个弹窗不知道怎么关，瞎点半天差点误操作。

这些都是人适应机器的典型症状。

传统网页自动化工具（Selenium、Puppeteer）本质上是在用代码模拟人的操作——你要告诉它「点哪里、填什么」，它才能执行。本质上，你还是在写代码。

但用户不应该需要写代码。

Page-Agent 给了我一个完全不同的思路：让 AI 直接理解网页结构，用自然语言控制界面。用户说「帮我填写这个表单」，AI 自动识别表单字段、理解你的意图、执行操作。

这才是「所想即所得」该有的样子。

核心技术原理：从 DOM 到自然语言

1. DOM 分析：让 AI 读懂网页

传统自动化靠截图+OCR，Page-Agent 的做法更聪明——直接解析 DOM 结构。

classDOMAnalyzer{analyze(){constelements=[];constiter=document.createTreeWalker(document.body,NodeFilter.SHOW_ELEMENT);while(iter.nextNode()){constel=iter.currentNode;// 提取可交互元素的元信息if(this.isInteractable(el)){elements.push({tag:el.tagName,text:el.textContent.trim(),type:el.type||el.getAttribute('role'),placeholder:el.placeholder,selector:this.getUniqueSelector(el)});}}returnelements;}}

关键在于语义提取——不仅拿到元素，还要理解它是什么。按钮？输入框？链接？有了这些元信息，LLM 才能做出正确的决策。

2. 意图解析：理解用户真正想要什么

用户说「登录」，可能是：

找到并点击「登录」按钮
填写登录表单
完成整个登录流程

意图解析器要做的是消歧义：

constintent=awaitllm.decideAction({userInput:"帮我登录",pageElements:elements,pageContext:{title:"用户中心",hasForm:true}});// 返回：{ action: "CLICK", target: "登录按钮", confidence: 0.92 }

如果置信度不够（比如页面上有多个可疑按钮），可以要求用户确认，或者列出候选让 LLM 再分析一次。

3. 操作执行：模拟人类行为

执行操作不是简单的element.click()——真实用户操作有延迟、有轨迹、有随机性。

classActionExecutor{asyncclick(element){// 模拟人类延迟awaitthis.humanDelay(100,300);// 计算目标位置（加入微小偏移模拟真实点击）constrect=element.getBoundingClientRect();constx=rect.left+rect.width/2+(Math.random()-0.5)*10;consty=rect.top+rect.height/2+(Math.random()-0.5)*10;// 触发点击事件element.dispatchEvent(newMouseEvent('click',{bubbles:true,cancelable:true,view:window,clientX:x,clientY:y}));}}

这个细节很重要——很多网站会检测自动化脚本（通过事件特征、时序等），加入随机延迟和位置偏移能显著降低被检测的概率。

浏览器插件：让 AI 真正住在网页里

Page-Agent 是一个框架，但要把它变成用户能随手使用的工具，需要一个载体——浏览器插件就是最好的选择。

为什么不是独立应用？

独立 Electron 应用需要：

用户下载安装
维护多平台兼容
处理系统权限

浏览器插件呢？一行命令chrome load unpacked，搞定。

核心架构：MV3 通信模型

Chrome Extension Manifest V3 有三个主要组件：

┌─────────────┐ chrome.runtime.sendMessage ┌──────────────────────┐ │ Popup │ ──────────────────────────────→ │ Background Worker │ │ 弹出面板 │ │ 后台脚本 │ └─────────────┘ chrome.tabs.sendMessage └──────────┬───────────┘ ┌─────────────┐ ←───────────────────────────────────────────┘ │ Content │ HTTPS 请求 │ Script │────────────────────────────────────────────────→ LLM API │ 注入脚本 │←────────────────────────────────────────────────┘ └─────────────┘ ↓ DOM 操作 ┌─────────────┐ │ 目标网页 │ └─────────────┘

Popup：用户点击插件图标看到的界面，用来输入指令、查看状态
Content Script：注入到网页中，负责提取页面内容、执行操作
Background Worker：处理 API 调用、消息路由

样式隔离：Shadow DOM 的妙用

插件 UI 和宿主网页的 CSS 可能会冲突——这是个老问题了。

解决方案是Shadow DOM：

consthost=document.createElement('div');host.id='page-agent-root';constshadow=host.attachShadow({mode:'open'});document.body.appendChild(host);// Shadow DOM 内部完全隔离shadow.innerHTML=`<style> :host { position: fixed; bottom: 20px; right: 20px; } .dialog { width: 380px; height: 520px; background: white; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); } </style> <div class="dialog">AI 对话界面</div>`;

Shadow DOM 内部的样式不会泄漏出去，外部样式也不会影响进来。完美隔离。

消息通信：让各组件协作

三个组件之间通过chrome.runtime通信：

// Popup 发送消息chrome.runtime.sendMessage({type:'CHAT',payload:{prompt:'帮我填写用户名',context:pageContext}});// Content Script 监听并处理chrome.runtime.onMessage.addListener((msg,sender,response)=>{if(msg.type==='CHAT'){constresult=awaitllm.chat(msg.payload);response(result);}returntrue;// 保持消息通道开启});

开发实战：从零构建一个简化版

1. 项目结构

my-page-agent/ ├── manifest.json # 插件配置 ├── background.js # 后台脚本 ├── content.js # 内容脚本 ├── popup.html/css/js # 弹出面板 └── ui/ └── agent-dialog.js # AI 对话组件

2. manifest.json 配置

{"manifest_version":3,"name":"My Page Agent","version":"1.0.0","permissions":["storage","activeTab","scripting"],"host_permissions":["<all_urls>"],"action":{"default_popup":"popup.html"},"content_scripts":[{"matches":["<all_urls>"],"js":["content.js"],"run_at":"document_idle"}]}

3. 内容脚本：提取上下文

// content.jsclassPageContextExtractor{extract(){return{title:document.title,url:location.href,selectedText:window.getSelection().toString(),mainContent:this.extractMainContent()};}extractMainContent(){// 智能识别文章主体constselectors=['article','main','.content','#content'];for(constselofselectors){constel=document.querySelector(sel);if(el)returnel.innerText.slice(0,5000);}returndocument.body.innerText.slice(0,3000);}}// 监听来自 popup 的消息chrome.runtime.onMessage.addListener((req,_,sendResponse)=>{if(req.action==='getContext'){sendResponse(newPageContextExtractor().extract());}returntrue;});

4. Popup：对话界面

// popup.jsdocument.getElementById('send-btn').addEventListener('click',async()=>{constinput=document.getElementById('user-input');constprompt=input.value.trim();if(!prompt)return;// 1. 获取页面上下文const[tab]=awaitchrome.tabs.query({active:true,currentWindow:true});constcontext=awaitchrome.tabs.sendMessage(tab.id,{action:'getContext'});// 2. 调用 LLMconstresponse=awaitfetch('https://api.openai.com/v1/chat/completions',{method:'POST',headers:{'Content-Type':'application/json','Authorization':`Bearer${awaitgetApiKey()}`},body:JSON.stringify({model:'gpt-4',messages:[{role:'system',content:'你是网页助手，根据页面内容回答问题或执行操作。'},{role:'user',content:`页面：${context.title}\n内容：${context.mainContent}\n\n用户：${prompt}`}]})});// 3. 显示回复constdata=awaitresponse.json();showMessage('ai',data.choices[0].message.content);});

5. 快速测试

# 1. 打开 chrome://extensions/# 2. 开启「开发者模式」# 3. 点击「加载已解压的扩展程序」# 4. 选择项目文件夹# 5. 打开任意网页，点击插件图标，输入「总结页面内容」

进阶功能：让 Agent 更智能

多轮对话与上下文继承

真正的 AI 助手不是「一问一答」，而是能记住上下文：

classConversationManager{constructor(){this.history=[];this.maxHistory=10;}add(role,content){this.history.push({role,content});if(this.history.length>this.maxHistory){this.history.shift();// 保留最近 N 轮}}buildPrompt(systemPrompt,newUserInput){return[{role:'system',content:systemPrompt},...this.history,{role:'user',content:newUserInput}];}}

操作序列与回滚

复杂任务需要多步骤操作，还要支持撤销：

classActionSequence{constructor(){this.stack=[];this.undoStack=[];}asyncexecuteSequence(actions){for(constactionofactions){constresult=awaitthis.executor.execute(action);if(result.success){this.stack.push(action);}else{// 遇到失败，尝试回滚awaitthis.rollback();return{success:false,failedAt:action};}}return{success:true,executed:this.stack.length};}asyncrollback(){while(this.stack.length){constaction=this.stack.pop();awaitthis.executor.undo(action);this.undoStack.push(action);}}}

本地模型支持

不想把数据发送到第三方？可以用Ollama在本地跑模型：

classOllamaClient{constructor(baseUrl='http://localhost:11434'){this.baseUrl=baseUrl;}asyncchat(messages){constresponse=awaitfetch(`${this.baseUrl}/api/chat`,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({model:'llama3',messages,stream:false})});return(awaitresponse.json()).message.content;}}