AI-Extension 浏览器插件技术架构

一、 架构概述

AI-Extension 是一个基于 WXT 框架构建的智能浏览器扩展，旨在将浏览器转变为一个强大的 AI Agent 运行环境。

其核心技术架构基于浏览器内置的 WebMCP 协议愿景，通过 Polyfill 技术在页面中注入标准化的 navigator.modelContext 接口。这使得开发者能够使用标准的 WebMCP 规范来定义工具，实现了从底层 DOM 操作到高层业务逻辑工具化的全面覆盖。

二、 六大核心架构维度

AI-Extension 的架构由以下六个关键技术维度支撑，能够应对从简单网页操作到复杂企业级应用的各种需求：

1. 原生 WebMCP 支持（面向复杂应用）

插件深度支持 WebMCP 规范，允许 Web 应用在页面内部直接通过 navigator.modelContext 注册业务工具。

• 场景：适用于拥有复杂状态、私有 API 或高性能交互要求的单页应用（SPA）。
• 优势：AI 可以像调用原生 API 一样直接触发页面内的业务逻辑，无需模拟 UI 操作。

2. 多模态交互能力（面向中/低复杂度应用）

内置了强大的通用页面处理引擎，支持多种交互维度：

• DOM 解析与无障碍 (Accessibility)：将页面结构转化为高可读性的无障碍树，让 AI 能够理解页面语义。
• 视觉模型 (Visual Model)：支持截图与坐标定位，允许 AI 结合视觉特征（如图标、布局颜色）进行精准操作。
• 通用操作：提供标准化的点击、填充、滚动及状态查询工具，覆盖绝大多数中等复杂度的网页。

3. 渐进式披露的 Skills 体系

为了防止工具过载（Tool Overload）和幻觉，架构引入了 Skills（技能）机制：

• 按需加载：大模型仅在需要时才查阅特定的 Skill 文档和 API 定义。
• 在线配置：支持 Skills 的在线配置与动态更新，无需重新发布插件即可扩展 AI 的专业领域能力。

4. 动态上下文工具链

插件具备实时的 Tab 敏感性：

• 实时切换：随着用户在不同页签间切换，插件会自动卸载旧页面的工具并加载当前页面专属的工具。
• 列表通知：通过 page-tools-updated 机制，实时向大模型推送当前环境最可用的工具集，确保操作的连贯性。

5. Web-Agent 远程连接

架构支持 跨进程/跨网络的远程连接：

• 第三方 Agent 接入：通过内置的 WebSocket Server，支持将浏览器环境暴露给外部 AI 助手（如 Cursor、CodeMate 或自定义 AI 平台）。
• 环境隔离：远程智能体可以像操作本地环境一样，安全地指挥浏览器执行任务。

6. 零侵入式工具定义

支持通过 插件脚本注入 (Script Injection) 的方式定义工具：

• 无需修改业务代码：通过 mcp-servers/ 目录下的域名配置，插件可以在页面加载时自动注入工具逻辑。
• 灵活扩展：开发者可以针对任何第三方网站编写“适配器”脚本，将其功能快速工具化。

---

三、 执行环境与隔离架构

AI-Extension 利用浏览器的多层沙箱机制确保了性能与安全：

环境	角色	特性
Sidepanel / Background	中央处理器	维护全局状态，处理与远程 Agent 的通信，管理 Skills 配置。
Isolated World (Content)	DOM 隔离执行器	执行 page-agent-tool 的 DOM 操作。绕过页面的 CSP 限制，确保在安全性极高的网站上也能正常工作。
Main World (Page)	原生工具宿主	运行 WebMCP 工具和域名专属注入脚本。拥有访问页面原生 JS 变量和函数的完整权限。

四、 总结

AI-Extension 的架构不仅是 MCP 协议在浏览器中的实现，更是一套完整的 Web 自动化与智能化基础设施。它通过“原生 WebMCP”与“零侵入脚本注入”的双轨驱动，实现了对任意 Web 内容的高度控制力与理解力。