苍云阅读
88.41M · 2026-03-24
本文由云软件体验技术团队郑志超原创。
你有没有想过，有一天 AI 不只是帮你写代码、聊天，而是能直接帮你操作网页——点按钮、填表单、跨页面完成任务，甚至让你用手机远程指挥电脑上的浏览器？
AI-Extension，就是干这件事的，下面通过一个视频体验下AI-Extension的能力：
AI-Extension 是一个基于 WXT 框架构建的智能浏览器扩展插件。它把 MCP（Model Context Protocol）协议「塞进」了浏览器，让任意网页都能变成可被 AI 智能体操控的应用；同时内置 Skills 技能系统，通过一个 SKILL.md 文件即可为 AI 定义专业角色，让它自动识别意图、以领域专家身份响应。
安装完成，打开侧边栏，AI 就住进了你的浏览器。
它的核心思路非常直接：不改你的应用一行代码，却能让 AI 理解并操作你的任何网页。听起来像魔法？其实是工程。
官网链接：opentiny.design/ai-extensio…
不需要改现有应用的代码，不需要对接任何 SDK，不需要申请什么特别权限。Chrome/Edge 装上扩展，开启 User Scripts 权限，AI 就能开始工作。对业务代码的侵入程度：零。
基于业界标准的 MCP 协议构建，天然兼容各类 AI 主机——Cursor、CodeMate、Coze……你用哪个 AI，它就跟哪个对话。不绑厂商，不锁生态，想换就换。
工具可以跑在两个地方：
主世界（Main World）：直接访问页面的 JavaScript 内存和变量，能读 React/Vue 组件状态，能调页面内部方法——想深度集成，选这个；
Content Script 隔离环境：安全隔离，只碰 DOM，不影响页面原有逻辑——只要操作个按钮，选这个。
两种模式，一个 type字段搞定。
插件内置了类 Chrome DevTools MCP 的无障碍树操作能力。AI 不是盲操作——它会先调用 takeSnapshot 获取页面结构快照，给每个可交互节点分配唯一 UID，然后精确执行点击（click）、输入（fill）、选择（selectOption）等操作，操作完还会自动刷新快照确认结果。
不仅如此，插件还支持接入视觉模型，直接对页面截图进行理解与分析。对于那些无障碍树难以描述的复杂页面，视觉模型能凭「看一眼」就识别出元素位置和页面状态，让 AI 的操作能力覆盖更多真实场景。
用人话讲：AI 既有结构化的「X 光眼」，也有视觉模型的「肉眼」，两套感知能力随场景切换。
页面里会出现一个浮动按钮，扫码或输入 Session ID，手机就能远程指挥电脑浏览器里的 AI 干活。PC 端、移动端、Web 页面——三端都支持，通过 WebMCP Proxy 代哩服务務器中转 MCP 协议消息，延迟低、连接稳。
出门在外想操作公司电脑？扫一下就行。
每个域名可以注册自己的专属工具，工具间支持 toolsJumpLinks 跳转映射。AI 可以：先在 A 网站取数据，跳到 B 网站处理，再到 C 网站提交——全程自动，一条指令走完。
在 skills 目录下放一个 SKILL.md 文件，写上角色定义和行为规则，AI 就能自动识别用户意图并以对应专家身份响应。内置的「画图专家」已经能操作 Excalidraw 绘制专业架构图——无需任何手动触发。
新建一个技能：创建文件夹 + 写 SKILL.md，两步完事。
支持从大模型返回的文本流中动态解析并渲染 UI——动态表单、交互式卡片、流式更新，对话过程本身就是界面。告别"只能看文字"的 AI 对话体验。
| 场景 | 能干啥 |
|---|---|
| 网页自动化 | AI 帮你填表、点按钮、提交表单，把重复劳动全包了 |
| 跨页面工作流 | 从 A 网站取数据 → B 网站处理 → C 网站提交，一条指令跑完 |
| 专属 AI 助手 | 给任意网站定制专属工具，AI 深度理解该网站的业务逻辑 |
| 移动端远程操控 | 手机扫码，远程控制 PC 浏览器里的 AI 帮你干活 |
| 领域专家角色 | 画图、写月报、处理出差申请……写个 SKILL.md 就能给 AI 换脑子 |
| 云端工具集成 | 通过 MCP 市场接入云端工具，本地能力 + 云端能力无缝结合 |
# 下载扩展压缩包
#
1. 解压下载的 ZIP 文件
2. 浏览器地址栏输入 chrome://extensions`，打开扩展管理页
3. 右上角开启开发者模式
4. 点击「加载已解压的扩展程序」，选择解压后的文件夹
5. 在扩展详情页找到「User Scripts」并开启
点击浏览器工具栏的扩展图标，侧边栏弹出，直接输入你的需求即可。AI 会自动分析当前页面，调用对应工具完成任务。
四步，五分钟，AI 住进浏览器。
想亲手给 AI 扩充能力？无论是给某个网站注册专属工具，还是为 AI 定义一个领域专家角色，都只需 Fork 仓库、添加几个文件就搞定。
# 将仓库 Fork 到自己的 GitHub 账号后，克隆到本地
git clone
cd next-sdk
# 安装依赖
npm install -g pnpm
pnpm install
添加 MCP 工具
给某个网站注册专属工具，在 packages/next-wxt/mcp-servers 下操作：
mkdir packages/next-wxt/mcp-servers/your-site.com
// mcp-servers/your-site.com/meta.ts
export default {
name: 'your-site.com',
type: 'contentScriptMcpServer', // 或 'pageMcpServer'（需访问页面 JS 状态时使用）
url: 'https://your-site.com',
isAlwaysEnabled: true,
version: '1.0.0'
}
// mcp-servers/your-site.com/index.ts
export default ({ server, z }) => {
server.registerTool(
'my-tool',
{
title: '我的工具',
description: '工具的功能描述，AI 根据这里判断何时调用',
inputSchema: { text: z.string().describe('输入文本') }
},
async ({ text }) => ({
content: [{ type: 'text', text: `处理完成: ${text}` }]
})
)
}
想让 AI 在特定场景下以「专家」身份响应？在 packages/next-wxt/skills 下操作：
mkdir packages/next-wxt/skills/my-expert
---
name: my-expert
description: 擅长处理某类专业任务，当用户提到相关需求时自动激活
---
# 我的专家
你是一位专业的[角色名称]，擅长……
## 核心能力
- 能力 1
- 能力 2
## 工作规则
1. 规则 1
2. 规则 2
Vite 热更新自动生效，无需重启。
在侧边栏直接描述相关需求（如"帮我画一个流程图"），AI 会自动识别意图并以对应专家身份响应，全程无需手动干预。
提示：description 字段是关键，它决定了 AI 在什么时机激活该技能，写得越准确，匹配越精准。
AI-Extension 想做的事，不只是「帮你点几个按钮」。
我们相信，浏览器是 AI Agent 最天然的工作台。几十亿人每天在浏览器里完成绝大多数数字化工作——查信息、填数据、审批流程、协作沟通。这些工作，AI 都应该能参与、能协助、甚至能自主完成。
未来，我们希望：
从工具定义到 AI 操控，从本地能力到云端扩展，从单页操作到跨站工作流——AI-Extension 的目标，是让 AI 真正成为你浏览器里最得力的伙伴，而不只是一个会聊天的文本框。
欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
参与AI-Extension共建 → github.com/opentiny/ne…（欢迎star）
使用AI-Extension → opentiny.design/ai-extensio…
OpenTiny 官网：opentiny.design
关于我们：opentiny.design/opentiny-de…
如果你有任何问题，欢迎在评论区留言交流！
