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