@xiaou66/vite-plugin-vue-mcp-next 1.1.0 → 1.2.0

package/README.md

@@ -15,6 +15,7 @@
 | Console 日志        | Runtime Hook         | CDP 优先，Hook 兜底               | 采集 `log/info/warn/error/debug` 和运行时日志             |
 | Evaluate 控制台执行 | Runtime Hook         | CDP 优先，Hook 兜底               | 默认关闭，必须显式开启                                    |
 | Network 请求        | Runtime Hook         | CDP 优先，Hook 兜底               | 返回请求 URL、query、body、status、headers、response body |
+| 浏览器存储          | Runtime Hook         | CDP 优先，Hook 兜底               | 访问同源 Web Storage、IndexedDB；Cookie 在无 CDP 时回退到 `document.cookie` |
 | Vue 组件树          | Vue Runtime Bridge   | Vue Runtime Bridge                | Vue 专属语义不走 CDP                                      |
 | Vue 组件状态        | Vue Runtime Bridge   | Vue Runtime Bridge                | 读取和编辑组件状态                                        |
 | Router 信息         | Vue Runtime Bridge   | Vue Runtime Bridge                | 返回当前路由和路由表                                      |
@@ -548,6 +549,25 @@ interface NetworkRecord {
 
 Vue 组件、Router、Pinia 是应用层语义，固定走 Vue Runtime Bridge，不用 CDP 替代。
 
+### 浏览器存储
+
+浏览器存储工具组面向调试当前页面的运行时数据。`localStorage`、`sessionStorage` 和 `IndexedDB` 只作用于当前选中页面同源，避免跨站误操作。Cookie 在无 CDP 时通过 `document.cookie` 访问当前页面可见的同源条目；配置 CDP 后可查询浏览器级 Cookie，并能读取 `HttpOnly` 条目，但删除和清空时会跳过 `HttpOnly` 并返回跳过数量。
+
+| 资源 | Runtime Hook | CDP |
+| --- | --- | --- |
+| `localStorage` | 读 / 写 / 删 | 读 / 写 / 删 |
+| `sessionStorage` | 读 / 写 / 删 | 读 / 写 / 删 |
+| `IndexedDB` | 同源库和记录操作 | 同源库和记录操作 |
+| `Cookie` | 查询 / 写入 / 删除当前页面可见条目 | 查询 / 写入 / 删除非 `HttpOnly` 条目，`HttpOnly` 仅可查询 |
+
+相关 MCP 工具：
+
+- `list_storage`：列出当前页面同源存储和 Cookie；有 CDP 时补充浏览器级 Cookie
+- `get_storage_item`：读取指定 key、IndexedDB 记录或 Cookie
+- `set_storage_item`：写入 Web Storage、IndexedDB 记录或 Cookie
+- `delete_storage_item`：删除 Web Storage、IndexedDB 记录或 Cookie；`HttpOnly` Cookie 仅在 CDP 下可见且删除时会跳过
+- `clear_storage`：清空指定范围，Cookie 清空会跳过 `HttpOnly`
+
 ## 本地验证
 
 ### 自动化检查

package/dist/index.cjs

@@ -72,6 +72,11 @@ var MCP_TOOL_NAMES = {
   getNetworkRequests: "get_network_requests",
   getNetworkRequestDetail: "get_network_request_detail",
   clearNetworkRequests: "clear_network_requests",
+  listStorage: "list_storage",
+  getStorageItem: "get_storage_item",
+  setStorageItem: "set_storage_item",
+  deleteStorageItem: "delete_storage_item",
+  clearStorage: "clear_storage",
   recordPerformance: "record_performance",
   startPerformanceRecording: "start_performance_recording",
   stopPerformanceRecording: "stop_performance_recording",
@@ -1543,9 +1548,431 @@ function getPathname(url) {
   }
 }
 
-// src/mcp/tools/screenshot.ts
+// src/mcp/tools/storage.ts
 var import_zod7 = require("zod");
 
+// src/cdp/cdpStorage.ts
+function createCdpStorageAdapter(client) {
+  return {
+    async manageStorage(request) {
+      try {
+        return await manageCdpStorage(client, request);
+      } catch (error) {
+        return createCdpStorageError(
+          request,
+          error instanceof Error ? error.message : String(error)
+        );
+      }
+    }
+  };
+}
+async function manageCdpStorage(client, request) {
+  if (request.scope === "cookie") {
+    return manageCdpCookies(client, request);
+  }
+  if (request.scope === "indexedDB") {
+    return manageCdpIndexedDb(client, request);
+  }
+  return manageCdpDomStorage(client, request);
+}
+async function manageCdpCookies(client, request) {
+  if (request.action === "list" || request.action === "get") {
+    const result2 = await client.Storage.getCookies();
+    const cookies2 = result2.cookies.filter(
+      (cookie) => isCookieInOrigin(cookie, request.origin)
+    );
+    return createCdpStorageSuccess(request, {
+      origin: request.origin,
+      cookies: request.action === "get" && request.cookie?.name ? cookies2.filter((cookie) => cookie.name === request.cookie?.name) : cookies2
+    });
+  }
+  if (request.action === "set") {
+    if (!request.cookie?.name) {
+      throw new Error("Cookie name is required for set operation");
+    }
+    await client.Storage.setCookies({
+      cookies: [
+        {
+          name: request.cookie.name,
+          value: request.cookie.value ?? request.value ?? "",
+          url: request.cookie.url ?? request.origin,
+          domain: request.cookie.domain,
+          path: request.cookie.path,
+          httpOnly: request.cookie.httpOnly,
+          secure: request.cookie.secure,
+          sameSite: normalizeCookieSameSite(request.cookie.sameSite),
+          expires: request.cookie.expires
+        }
+      ]
+    });
+    return createCdpStorageSuccess(request, { ok: true });
+  }
+  const result = await client.Storage.getCookies();
+  const cookies = result.cookies.filter(
+    (cookie) => isCookieInOrigin(cookie, request.origin)
+  );
+  const candidates = request.action === "delete" && request.cookie?.name ? cookies.filter((cookie) => cookie.name === request.cookie?.name) : cookies;
+  const deletable = candidates.filter((cookie) => !cookie.httpOnly);
+  const skippedHttpOnlyCount = candidates.length - deletable.length;
+  for (const cookie of deletable) {
+    await client.Network.deleteCookies({
+      name: cookie.name,
+      domain: cookie.domain,
+      path: cookie.path
+    });
+  }
+  return createCdpStorageSuccess(request, {
+    deletedCount: deletable.length,
+    skippedHttpOnlyCount
+  });
+}
+async function manageCdpDomStorage(client, request) {
+  const storageId = {
+    securityOrigin: request.origin,
+    isLocalStorage: request.scope === "localStorage"
+  };
+  if (request.action === "list") {
+    const result2 = await client.DOMStorage.getDOMStorageItems({ storageId });
+    return createCdpStorageSuccess(request, {
+      origin: request.origin,
+      scope: request.scope,
+      entries: result2.entries.map(([key, value]) => ({ key, value }))
+    });
+  }
+  if (request.action === "get") {
+    assertStorageKey(request);
+    const result2 = await client.DOMStorage.getDOMStorageItems({ storageId });
+    const entry = result2.entries.find(([key]) => key === request.key);
+    return createCdpStorageSuccess(request, {
+      key: request.key,
+      value: entry?.[1] ?? null
+    });
+  }
+  if (request.action === "set") {
+    assertStorageKey(request);
+    await client.DOMStorage.setDOMStorageItem({
+      storageId,
+      key: request.key,
+      value: request.value ?? ""
+    });
+    return createCdpStorageSuccess(request, { ok: true });
+  }
+  if (request.action === "delete") {
+    assertStorageKey(request);
+    await client.DOMStorage.removeDOMStorageItem({
+      storageId,
+      key: request.key
+    });
+    return createCdpStorageSuccess(request, { ok: true });
+  }
+  const result = await client.DOMStorage.getDOMStorageItems({ storageId });
+  for (const [key] of result.entries) {
+    await client.DOMStorage.removeDOMStorageItem({ storageId, key });
+  }
+  return createCdpStorageSuccess(request, { deletedCount: result.entries.length });
+}
+async function manageCdpIndexedDb(client, request) {
+  if (request.action === "list") {
+    const result = await client.IndexedDB.requestDatabaseNames({
+      securityOrigin: request.origin
+    });
+    return createCdpStorageSuccess(request, {
+      origin: request.origin,
+      databases: result.databaseNames
+    });
+  }
+  assertIndexedDbTarget(request);
+  if (request.action === "get") {
+    const result = await client.IndexedDB.requestData({
+      securityOrigin: request.origin,
+      databaseName: request.databaseName,
+      objectStoreName: request.objectStoreName,
+      indexName: request.indexName ?? "",
+      skipCount: 0,
+      pageSize: 100
+    });
+    return createCdpStorageSuccess(request, {
+      entries: result.objectStoreDataEntries,
+      hasMore: result.hasMore
+    });
+  }
+  if (request.action === "delete") {
+    assertStorageKey(request);
+    await client.IndexedDB.deleteObjectStoreEntries({
+      securityOrigin: request.origin,
+      databaseName: request.databaseName,
+      objectStoreName: request.objectStoreName,
+      keyRange: createExactCdpKeyRange(request.key)
+    });
+    return createCdpStorageSuccess(request, { ok: true });
+  }
+  if (request.action === "clear") {
+    if (request.objectStoreName) {
+      await client.IndexedDB.clearObjectStore({
+        securityOrigin: request.origin,
+        databaseName: request.databaseName,
+        objectStoreName: request.objectStoreName
+      });
+      return createCdpStorageSuccess(request, { ok: true });
+    }
+    await client.IndexedDB.deleteDatabase({
+      securityOrigin: request.origin,
+      databaseName: request.databaseName
+    });
+    return createCdpStorageSuccess(request, { ok: true });
+  }
+  return createCdpStorageError(
+    request,
+    "IndexedDB set operation requires runtime bridge"
+  );
+}
+function isCookieInOrigin(cookie, origin) {
+  const hostname = new URL(origin).hostname;
+  const domain = cookie.domain?.replace(/^\./, "");
+  return Boolean(domain && (hostname === domain || hostname.endsWith(`.${domain}`)));
+}
+function normalizeCookieSameSite(sameSite) {
+  if (!sameSite) {
+    return void 0;
+  }
+  if (sameSite === "strict") {
+    return "Strict";
+  }
+  if (sameSite === "lax") {
+    return "Lax";
+  }
+  return "None";
+}
+function createExactCdpKeyRange(key) {
+  const parsedKey = parseJsonValue(key);
+  return {
+    lower: parsedKey,
+    upper: parsedKey,
+    lowerOpen: false,
+    upperOpen: false
+  };
+}
+function parseJsonValue(value) {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+function assertStorageKey(request) {
+  if (!request.key) {
+    throw new Error("Storage key is required for this operation");
+  }
+}
+function assertIndexedDbTarget(request) {
+  if (!request.databaseName || !request.objectStoreName) {
+    throw new Error("IndexedDB databaseName and objectStoreName are required");
+  }
+}
+function createCdpStorageSuccess(request, data) {
+  return {
+    ok: true,
+    source: "cdp",
+    action: request.action,
+    scope: request.scope,
+    data
+  };
+}
+function createCdpStorageError(request, error) {
+  return {
+    ok: false,
+    source: "cdp",
+    action: request.action,
+    scope: request.scope,
+    error
+  };
+}
+
+// src/mcp/tools/storage.ts
+function registerStorageTools(server, ctx) {
+  registerStorageTool(server, MCP_TOOL_NAMES.listStorage, {
+    description: "List same-origin storage and CDP cookies when available.",
+    inputSchema: {
+      pageId: import_zod7.z.string().optional()
+    },
+    action: "list",
+    handler: (input) => handleListStorage(ctx, input.pageId)
+  });
+  registerStorageTool(server, MCP_TOOL_NAMES.getStorageItem, {
+    description: "Read one storage entry.",
+    inputSchema: createStorageInputSchema(),
+    action: "get",
+    handler: (input) => handleStorageAction(ctx, { ...input, action: "get" })
+  });
+  registerStorageTool(server, MCP_TOOL_NAMES.setStorageItem, {
+    description: "Write one storage entry.",
+    inputSchema: createStorageInputSchema(),
+    action: "set",
+    handler: (input) => handleStorageAction(ctx, { ...input, action: "set" })
+  });
+  registerStorageTool(server, MCP_TOOL_NAMES.deleteStorageItem, {
+    description: "Delete one storage entry.",
+    inputSchema: createStorageInputSchema(),
+    action: "delete",
+    handler: (input) => handleStorageAction(ctx, { ...input, action: "delete" })
+  });
+  registerStorageTool(server, MCP_TOOL_NAMES.clearStorage, {
+    description: "Clear one storage scope.",
+    inputSchema: createStorageInputSchema(),
+    action: "clear",
+    handler: (input) => handleStorageAction(ctx, { ...input, action: "clear" })
+  });
+}
+function registerStorageTool(server, name, options) {
+  server.registerTool(
+    name,
+    {
+      description: options.description,
+      inputSchema: options.inputSchema
+    },
+    (async (input) => options.handler(
+      input
+    ))
+  );
+}
+function createStorageInputSchema() {
+  return {
+    pageId: import_zod7.z.string().optional(),
+    scope: import_zod7.z.enum(["localStorage", "sessionStorage", "indexedDB", "cookie"]).optional(),
+    key: import_zod7.z.string().optional(),
+    value: import_zod7.z.string().optional(),
+    databaseName: import_zod7.z.string().optional(),
+    objectStoreName: import_zod7.z.string().optional(),
+    indexName: import_zod7.z.string().optional(),
+    cookie: import_zod7.z.object({
+      name: import_zod7.z.string(),
+      value: import_zod7.z.string().optional(),
+      domain: import_zod7.z.string().optional(),
+      path: import_zod7.z.string().optional(),
+      url: import_zod7.z.string().optional(),
+      httpOnly: import_zod7.z.boolean().optional(),
+      secure: import_zod7.z.boolean().optional(),
+      sameSite: import_zod7.z.enum(["strict", "lax", "none"]).optional(),
+      expires: import_zod7.z.number().optional()
+    }).optional()
+  };
+}
+async function handleListStorage(ctx, pageId) {
+  let baseRequest;
+  try {
+    baseRequest = createStorageRequest(ctx, {
+      pageId,
+      action: "list",
+      scope: "localStorage"
+    });
+  } catch (error) {
+    return createToolError(error instanceof Error ? error.message : String(error));
+  }
+  const [localStorage, sessionStorage, indexedDB] = await Promise.all([
+    requestRuntimeStorage(ctx, { ...baseRequest, scope: "localStorage" }),
+    requestRuntimeStorage(ctx, { ...baseRequest, scope: "sessionStorage" }),
+    requestRuntimeStorage(ctx, { ...baseRequest, scope: "indexedDB" })
+  ]);
+  const cookie = await listCookiesIfCdpAvailable(ctx, baseRequest, pageId);
+  return createToolResponse({
+    ok: true,
+    origin: baseRequest.origin,
+    localStorage: extractStorageData(localStorage),
+    sessionStorage: extractStorageData(sessionStorage),
+    indexedDB: extractStorageData(indexedDB),
+    cookie
+  });
+}
+async function handleStorageAction(ctx, input) {
+  let request;
+  try {
+    request = createStorageRequest(ctx, input);
+  } catch (error) {
+    return createToolError(error instanceof Error ? error.message : String(error));
+  }
+  const cdp = await connectCdpForPage(ctx, input.pageId);
+  if (cdp && shouldUseCdpStorage(request)) {
+    try {
+      const result2 = await createCdpStorageAdapter(cdp.client).manageStorage(
+        request
+      );
+      return createToolResponse(result2);
+    } finally {
+      await closeCdpClient(cdp.client);
+    }
+  }
+  const result = await requestRuntimeStorage(ctx, request);
+  return createToolResponse(result);
+}
+async function requestRuntimeStorage(ctx, request) {
+  return requestRuntimeData(ctx, (event) => {
+    void ctx.rpcServer?.manageStorage({
+      ...request,
+      event
+    });
+  });
+}
+async function listCookiesIfCdpAvailable(ctx, request, pageId) {
+  if (!hasCdpConfig2(ctx)) {
+    return extractStorageData(
+      await requestRuntimeStorage(ctx, { ...request, scope: "cookie" })
+    );
+  }
+  const cdp = await connectCdpForPage(ctx, pageId);
+  if (!cdp) {
+    return extractStorageData(
+      await requestRuntimeStorage(ctx, { ...request, scope: "cookie" })
+    );
+  }
+  try {
+    const result = await createCdpStorageAdapter(cdp.client).manageStorage({
+      ...request,
+      scope: "cookie"
+    });
+    return extractStorageData(result);
+  } finally {
+    await closeCdpClient(cdp.client);
+  }
+}
+function extractStorageData(result) {
+  if (!isStorageResultRecord(result)) {
+    return result;
+  }
+  return result.data ?? result;
+}
+function isStorageResultRecord(value) {
+  return typeof value === "object" && value !== null && "ok" in value;
+}
+function shouldUseCdpStorage(request) {
+  return request.scope === "cookie";
+}
+function createStorageRequest(ctx, input) {
+  const page = resolvePageTarget(ctx, input.pageId);
+  const origin = new URL(page.url).origin;
+  return {
+    event: "",
+    pageId: page.pageId,
+    origin,
+    action: input.action,
+    scope: normalizeScope(input.scope),
+    key: input.key,
+    value: input.value,
+    databaseName: input.databaseName,
+    objectStoreName: input.objectStoreName,
+    indexName: input.indexName,
+    cookie: input.cookie
+  };
+}
+function normalizeScope(scope) {
+  return scope ?? "localStorage";
+}
+function hasCdpConfig2(ctx) {
+  return Boolean(ctx.options.cdp.browserUrl || ctx.options.cdp.wsEndpoint);
+}
+
+// src/mcp/tools/screenshot.ts
+var import_zod8 = require("zod");
+
 // src/cdp/cdpScreenshot.ts
 async function cdpCaptureScreenshot(options) {
   if (options.target === "element") {
@@ -1704,14 +2131,14 @@ function createProjectRelativePath(ctx, filePath) {
 var DEFAULT_SCREENSHOT_TARGET = "viewport";
 var DEFAULT_SCREENSHOT_FORMAT = "png";
 var screenshotInputSchema = {
-  pageId: import_zod7.z.string().optional(),
-  target: import_zod7.z.enum(["viewport", "fullPage", "element"]).optional(),
-  selector: import_zod7.z.string().optional(),
-  format: import_zod7.z.enum(["png", "jpeg", "webp"]).optional(),
-  prefer: import_zod7.z.enum(["auto", "cdp", "runtime"]).optional(),
-  quality: import_zod7.z.number().optional(),
-  scale: import_zod7.z.number().optional(),
-  snapdom: import_zod7.z.record(import_zod7.z.string(), import_zod7.z.unknown()).optional()
+  pageId: import_zod8.z.string().optional(),
+  target: import_zod8.z.enum(["viewport", "fullPage", "element"]).optional(),
+  selector: import_zod8.z.string().optional(),
+  format: import_zod8.z.enum(["png", "jpeg", "webp"]).optional(),
+  prefer: import_zod8.z.enum(["auto", "cdp", "runtime"]).optional(),
+  quality: import_zod8.z.number().optional(),
+  scale: import_zod8.z.number().optional(),
+  snapdom: import_zod8.z.record(import_zod8.z.string(), import_zod8.z.unknown()).optional()
 };
 function registerScreenshotTools(server, ctx) {
   server.registerTool(
@@ -1831,7 +2258,7 @@ function isScreenshotImagePayload(result) {
 
 // src/mcp/tools/vue.ts
 var import_nanoid3 = require("nanoid");
-var import_zod8 = require("zod");
+var import_zod9 = require("zod");
 function registerVueTools(server, ctx) {
   server.registerTool(
     MCP_TOOL_NAMES.getComponentTree,
@@ -1844,7 +2271,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getComponentState,
     {
       description: "Get Vue component state.",
-      inputSchema: { componentName: import_zod8.z.string() }
+      inputSchema: { componentName: import_zod9.z.string() }
     },
     async ({ componentName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getInspectorState({ event, componentName });
@@ -1855,10 +2282,10 @@ function registerVueTools(server, ctx) {
     {
       description: "Edit Vue component state.",
       inputSchema: {
-        componentName: import_zod8.z.string(),
-        path: import_zod8.z.array(import_zod8.z.string()),
-        value: import_zod8.z.string(),
-        valueType: import_zod8.z.enum(["string", "number", "boolean", "object", "array"])
+        componentName: import_zod9.z.string(),
+        path: import_zod9.z.array(import_zod9.z.string()),
+        value: import_zod9.z.string(),
+        valueType: import_zod9.z.enum(["string", "number", "boolean", "object", "array"])
       }
     },
     ({ componentName, path: path8, value, valueType }) => {
@@ -1878,7 +2305,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.highlightComponent,
     {
       description: "Highlight a Vue component.",
-      inputSchema: { componentName: import_zod8.z.string() }
+      inputSchema: { componentName: import_zod9.z.string() }
     },
     ({ componentName }) => {
       if (!ctx.rpcServer) {
@@ -1906,7 +2333,7 @@ function registerVueTools(server, ctx) {
     MCP_TOOL_NAMES.getPiniaState,
     {
       description: "Get Pinia store state.",
-      inputSchema: { storeName: import_zod8.z.string() }
+      inputSchema: { storeName: import_zod9.z.string() }
     },
     async ({ storeName }) => requestVueData(ctx, (event) => {
       void ctx.rpcServer?.getPiniaState({ event, storeName });
@@ -1953,6 +2380,7 @@ function createMcpServer(ctx, vite) {
   registerConsoleTools(server, ctx);
   registerEvaluateTools(server, ctx);
   registerNetworkTools(server, ctx);
+  registerStorageTools(server, ctx);
   registerPerformanceTools(server, ctx);
   registerVueTools(server, ctx);
   return server;
@@ -2041,6 +2469,10 @@ function createServerVueRuntimeRpc(ctx) {
     onScreenshotTaken: (event, data) => {
       void ctx.hooks.callHook(event, data);
     },
+    manageStorage: () => void 0,
+    onStorageUpdated: (event, data) => {
+      void ctx.hooks.callHook(event, data);
+    },
     recordPerformance: () => void 0,
     onPerformanceRecorded: (event, data) => {
       void ctx.hooks.callHook(event, data);