From 09472fce3ee228ef910a607ee67910e2cfc4d9af Mon Sep 17 00:00:00 2001 From: zzcr <894103554@qq.com> Date: Thu, 30 Jul 2026 16:18:29 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=8A=A8?= =?UTF-8?q?=E6=80=81=E6=B7=BB=E5=8A=A0=E7=BC=96=E8=BE=91mcpservers?= =?UTF-8?q?=E8=84=9A=E6=9C=AC=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/ai-extension/next-wxt.md | 77 +- packages/next-wxt/components.d.ts | 25 +- packages/next-wxt/entrypoints/background.ts | 44 +- .../background/inject-user-mcp-scripts.ts | 132 ++ packages/next-wxt/entrypoints/content.ts | 38 +- .../next-wxt/entrypoints/options/Options.vue | 11 +- .../entrypoints/options/UserMcpScriptsTab.vue | 1068 +++++++++++++++++ packages/next-wxt/mcp-servers/types.d.ts | 7 + packages/next-wxt/package.json | 3 + .../next-wxt/public/vendor/user-mcp-exec.js | 24 + .../REQ-20260730-user-mcp-scripts/design.md | 86 ++ .../requirements.md | 72 ++ .../REQ-20260730-user-mcp-scripts/tasks.md | 43 + .../user-mcp-scripts/csp-bridge-repro.test.ts | 29 + .../test/user-mcp-scripts/match.test.ts | 58 + .../test/user-mcp-scripts/resolve.test.ts | 90 ++ .../test/user-mcp-scripts/storage.test.ts | 79 ++ .../next-wxt/user-mcp-scripts/exec-bridge.ts | 19 + packages/next-wxt/user-mcp-scripts/index.ts | 22 + packages/next-wxt/user-mcp-scripts/match.ts | 135 +++ packages/next-wxt/user-mcp-scripts/resolve.ts | 25 + packages/next-wxt/user-mcp-scripts/storage.ts | 165 +++ .../next-wxt/user-mcp-scripts/template.ts | 62 + packages/next-wxt/user-mcp-scripts/types.ts | 26 + packages/next-wxt/vitest.config.ts | 16 + packages/next-wxt/wxt.config.ts | 8 +- 26 files changed, 2326 insertions(+), 38 deletions(-) create mode 100644 packages/next-wxt/entrypoints/background/inject-user-mcp-scripts.ts create mode 100644 packages/next-wxt/entrypoints/options/UserMcpScriptsTab.vue create mode 100644 packages/next-wxt/public/vendor/user-mcp-exec.js create mode 100644 packages/next-wxt/specs/REQ-20260730-user-mcp-scripts/design.md create mode 100644 packages/next-wxt/specs/REQ-20260730-user-mcp-scripts/requirements.md create mode 100644 packages/next-wxt/specs/REQ-20260730-user-mcp-scripts/tasks.md create mode 100644 packages/next-wxt/test/user-mcp-scripts/csp-bridge-repro.test.ts create mode 100644 packages/next-wxt/test/user-mcp-scripts/match.test.ts create mode 100644 packages/next-wxt/test/user-mcp-scripts/resolve.test.ts create mode 100644 packages/next-wxt/test/user-mcp-scripts/storage.test.ts create mode 100644 packages/next-wxt/user-mcp-scripts/exec-bridge.ts create mode 100644 packages/next-wxt/user-mcp-scripts/index.ts create mode 100644 packages/next-wxt/user-mcp-scripts/match.ts create mode 100644 packages/next-wxt/user-mcp-scripts/resolve.ts create mode 100644 packages/next-wxt/user-mcp-scripts/storage.ts create mode 100644 packages/next-wxt/user-mcp-scripts/template.ts create mode 100644 packages/next-wxt/user-mcp-scripts/types.ts create mode 100644 packages/next-wxt/vitest.config.ts diff --git a/docs/ai-extension/next-wxt.md b/docs/ai-extension/next-wxt.md index d4aa5483..07d42d71 100644 --- a/docs/ai-extension/next-wxt.md +++ b/docs/ai-extension/next-wxt.md @@ -4,7 +4,49 @@ 通过原生 `document.modelContext.registerTool` API,开发者可以极低成本地将前端页面的业务能力暴露给 AI 助手,实现"大模型直接操作业务后台"。 -## 一、工作原理 +有两条互补路径: + +| 路径 | 适用 | 说明 | +|---|---|---| +| **页面 MCP 脚本(推荐推广)** | 终端用户 / 快速适配新站 | Options →「页面 MCP 脚本」在线编辑,按 `@match` 匹配站点,保存后即时注入 | +| **源码内置 mcp-servers** | 扩展维护者 / 随包分发 | 在 `packages/next-wxt/mcp-servers//` 编写 TS,构建期打成 IIFE | + +二者并行:默认同时生效;用户脚本勾选「覆盖内置」且匹配当前页时,跳过该页内置域名脚本。 + +## 〇、页面 MCP 脚本(在线编辑) + +1. 打开扩展 Options(配置页)→ **页面 MCP 脚本**。 +2. 点击「新建脚本」,填写: + - **名称 / 描述** + - **@match**:每行一条,例如 `*://*.example.com/*`、`https://www.baidu.com/*` + - **源码**:纯 JS,在页面 MAIN world 调用 `document.modelContext.registerTool` + - **启用** / **覆盖内置**(可选) +3. 保存后,匹配的标签页会自动刷新并注入脚本;工具出现在侧栏「浏览器内置工具」中。 +4. 支持 JSON 导入/导出备份。 + +默认模板已包含幂等防护。示例片段: + +```javascript +;(function () { + if (window.__userMcp_demo_registered) return + var ctx = document.modelContext + if (!ctx) return + ctx.registerTool({ + name: 'demo_tool', + title: '示例', + description: '示例工具', + inputSchema: { type: 'object', properties: {} }, + execute: async function () { + return { content: [{ type: 'text', text: document.title }] } + } + }) + window.__userMcp_demo_registered = true +})() +``` + +实现位于独立模块 `packages/next-wxt/user-mcp-scripts/`,与 Skills、远程 MCP 市场解耦。 + +## 一、工作原理(源码内置) 开发一个网站原生工具,整体流程是这样的: @@ -16,7 +58,7 @@ ![工具注入流程](../assets/images/mermaid/next-wxt-workflow.svg) -## 二、开发步骤 +## 二、开发步骤(源码内置 mcp-servers) ### 1. 创建域名目录 @@ -32,8 +74,8 @@ // packages/next-wxt/mcp-servers/example.com/index.ts /** - * 此文件由 content script 通过 scripting.executeScript 注入到 example.com 的 JS 上下文中执行。 - * 拥有完整的页面执行权限,不受 CSP 限制。 + * 此文件由 content script 经 + +