@opentiny/webmcp-cli 0.0.4 → 0.0.8

package/README.md

@@ -17,6 +17,23 @@ npm install -g .
 
 > **注意：** 在本地联调时，建议使用 `npm install -g .`，这会确保在你的 PATH 中生成有效的可执行文件（`webmcp-cli`）。
 
+## 测试
+
+统一使用 [Vitest](https://vitest.dev/)（与 `@opentiny/next-sdk` 一致）：
+
+```bash
+# 单元测试（无浏览器依赖，已接入根目录 pnpm test）
+pnpm test
+
+# 浏览器 E2E（需本机 Chrome/Edge，或设置 CHROME_PATH；默认 headless）
+pnpm build:webmcp-cli
+pnpm test:browser
+```
+
+CI 中浏览器任务使用 [browser-actions/setup-chrome](https://github.com/browser-actions/setup-chrome) 安装 Chrome，并通过 `CHROME_PATH` + `WEBMCP_HEADLESS=1` 启动。
+
+---
+
 ## 核心架构特性
 
 - **后台浏览器驻留**：如果当前没有开启带有调试端口 (`9222`) 的 Chrome，CLI 会自动在后台拉起一个基于你本地 Profile 的独立 Chrome 实例。
@@ -76,7 +93,7 @@ webmcp-cli run <toolName> <argsJson> [-t tabid]
 ```
 
 **示例一：执行页面自带工具**
-假设网页使用 `navigator.modelContext.registerTool` 注册了一个名为 `change-color` 的工具：
+假设网页使用 `document.modelContext.registerTool` 注册了一个名为 `change-color` 的工具：
 ```bash
 webmcp-cli run change-color '{"color": "#ff0000"}'
 ```

package/dist/bin.cjs

@@ -223,11 +223,37 @@ var import_url2 = require("url");
 var import_meta = {};
 var __filename = (0, import_url2.fileURLToPath)(import_meta.url);
 var __dirname = import_path2.default.dirname(__filename);
-var CDP_PORT = 9222;
-var CDP_URL = `http://localhost:${CDP_PORT}`;
+function getCdpPort() {
+  const raw = process.env.WEBMCP_CDP_PORT;
+  if (raw) {
+    const port = Number.parseInt(raw, 10);
+    if (Number.isFinite(port) && port > 0) return port;
+  }
+  return 9222;
+}
 function getWorkspaceDir() {
   return process.env.WEBMCP_WORKSPACE || import_path2.default.join(import_os.default.homedir(), ".webmcp_chrome_profile");
 }
+function shouldLaunchHeadless() {
+  if (process.env.WEBMCP_HEADLESS === "0") return false;
+  return process.env.WEBMCP_HEADLESS === "1" || process.env.CI === "true" || process.env.CI === "1";
+}
+function readActivePortFromProfile(userDataDir) {
+  try {
+    const content = import_fs2.default.readFileSync(import_path2.default.join(userDataDir, "DevToolsActivePort"), "utf-8");
+    const port = parseInt(content.split("\n")[0].trim(), 10);
+    return Number.isFinite(port) && port > 0 ? port : null;
+  } catch {
+    return null;
+  }
+}
+function candidateCdpBaseUrls(port) {
+  return [
+    `http://127.0.0.1:${port}`,
+    `http://[::1]:${port}`,
+    `http://localhost:${port}`
+  ];
+}
 function getLastTabIdFilePath() {
   return import_path2.default.join(getWorkspaceDir(), ".last-tab-id");
 }
@@ -321,6 +347,13 @@ async function connectPuppeteer(browserBaseUrl, attempt = 1, maxAttempts = 3) {
   }
 }
 function getDefaultBrowserPath() {
+  const envPath = process.env.CHROME_PATH || process.env.WEBMCP_CHROME_PATH || process.env.PUPPETEER_EXECUTABLE_PATH;
+  if (envPath && import_fs2.default.existsSync(envPath)) {
+    return { path: envPath, name: "Chrome" };
+  }
+  if (envPath) {
+    console.log(import_picocolors.default.yellow(`\u6307\u5B9A\u7684\u6D4F\u89C8\u5668\u8DEF\u5F84\u4E0D\u5B58\u5728\uFF0C\u5C06\u56DE\u9000\u5230\u81EA\u52A8\u68C0\u6D4B: ${envPath}`));
+  }
   const platform = import_os.default.platform();
   if (platform === "darwin") {
     const chromePath = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
@@ -364,16 +397,30 @@ async function startBrowserInBackground() {
   if (!browserInfo || !import_fs2.default.existsSync(browserInfo.path)) {
     throw new Error("\u65E0\u6CD5\u5728\u7CFB\u7EDF\u4E2D\u627E\u5230 Chrome \u6216 Edge \u6D4F\u89C8\u5668\u7684\u9ED8\u8BA4\u5B89\u88C5\u8DEF\u5F84\u3002");
   }
-  console.log(import_picocolors.default.yellow(`\u6B63\u5728\u542F\u52A8\u540E\u53F0 ${browserInfo.name} \u5B9E\u4F8B (\u7AEF\u53E3: ${CDP_PORT})...`));
-  const userDataDir = process.env.WEBMCP_WORKSPACE || import_path2.default.join(import_os.default.homedir(), ".webmcp_chrome_profile");
+  const cdpPort = getCdpPort();
+  console.log(import_picocolors.default.yellow(`\u6B63\u5728\u542F\u52A8\u540E\u53F0 ${browserInfo.name} \u5B9E\u4F8B (\u7AEF\u53E3: ${cdpPort})...`));
+  const userDataDir = getWorkspaceDir();
+  if (!import_fs2.default.existsSync(userDataDir)) {
+    import_fs2.default.mkdirSync(userDataDir, { recursive: true });
+  }
+  try {
+    import_fs2.default.unlinkSync(import_path2.default.join(userDataDir, "DevToolsActivePort"));
+  } catch {
+  }
   const launchArgs = [
-    `--remote-debugging-port=${CDP_PORT}`,
+    `--remote-debugging-port=${cdpPort}`,
     `--user-data-dir=${userDataDir}`,
     "--no-first-run",
     "--no-default-browser-check"
   ];
-  if (import_os.default.platform() === "win32") {
-    launchArgs.push("--remote-debugging-address=127.0.0.1");
+  if (shouldLaunchHeadless()) {
+    launchArgs.push(
+      "--headless=new",
+      "--no-sandbox",
+      "--disable-setuid-sandbox",
+      "--disable-gpu",
+      "--disable-dev-shm-usage"
+    );
   }
   const child = (0, import_child_process.spawn)(
     browserInfo.path,
@@ -384,15 +431,22 @@ async function startBrowserInBackground() {
     }
   );
   child.unref();
-  const pollUrls = [`http://127.0.0.1:${CDP_PORT}/json/version`, `http://localhost:${CDP_PORT}/json/version`];
-  for (let i = 0; i < 30; i++) {
-    for (const url of pollUrls) {
-      try {
-        await httpGet(url, 1e3);
-        console.log(import_picocolors.default.green(`${browserInfo.name} \u542F\u52A8\u5E76\u5C31\u7EEA\u3002`));
-        await new Promise((resolve3) => setTimeout(resolve3, 500));
-        return;
-      } catch {
+  for (let i = 0; i < 40; i++) {
+    const ports = /* @__PURE__ */ new Set([cdpPort]);
+    const activePort = readActivePortFromProfile(userDataDir);
+    if (activePort) ports.add(activePort);
+    for (const port of ports) {
+      for (const baseUrl of candidateCdpBaseUrls(port)) {
+        try {
+          await httpGet(`${baseUrl}/json/version`, 1e3);
+          if (port !== cdpPort) {
+            console.log(import_picocolors.default.yellow(`\u68C0\u6D4B\u5230\u7AEF\u53E3 ${cdpPort} \u5DF2\u88AB\u5176\u4ED6\u7A0B\u5E8F\u5360\u7528\uFF0C${browserInfo.name} \u5DF2\u81EA\u52A8\u5207\u6362\u5230\u7AEF\u53E3 ${port}\u3002`));
+          }
+          console.log(import_picocolors.default.green(`${browserInfo.name} \u542F\u52A8\u5E76\u5C31\u7EEA\uFF08${baseUrl}\uFF09\u3002`));
+          await new Promise((resolve3) => setTimeout(resolve3, 500));
+          return baseUrl;
+        } catch {
+        }
       }
     }
     await new Promise((resolve3) => setTimeout(resolve3, 500));
@@ -400,13 +454,16 @@ async function startBrowserInBackground() {
   throw new Error(`${browserInfo.name} \u542F\u52A8\u8D85\u65F6\uFF0C\u65E0\u6CD5\u8FDE\u63A5\u5230 CDP \u7AEF\u53E3\u3002`);
 }
 async function connectBrowser() {
+  const userDataDir = getWorkspaceDir();
+  const cdpPort = getCdpPort();
+  const recordedPort = readActivePortFromProfile(userDataDir);
   const versionAddresses = [
-    `http://127.0.0.1:${CDP_PORT}/json/version`,
-    `http://localhost:${CDP_PORT}/json/version`
+    ...recordedPort && recordedPort !== cdpPort ? candidateCdpBaseUrls(recordedPort).map((u) => `${u}/json/version`) : [],
+    ...candidateCdpBaseUrls(cdpPort).map((u) => `${u}/json/version`)
   ];
   const existingUrl = await findAvailableCdpUrl(versionAddresses, 2);
   if (existingUrl) {
-    console.log(import_picocolors.default.yellow(`connectBrowser: \u68C0\u6D4B\u5230\u7AEF\u53E3 ${CDP_PORT} \u5DF2\u5C31\u7EEA\uFF0C\u6B63\u5728\u8FDE\u63A5 ${existingUrl}...`));
+    console.log(import_picocolors.default.yellow(`connectBrowser: \u68C0\u6D4B\u5230\u7AEF\u53E3 ${cdpPort} \u5DF2\u5C31\u7EEA\uFF0C\u6B63\u5728\u8FDE\u63A5 ${existingUrl}...`));
     try {
       const browser = await connectPuppeteer(existingUrl);
       console.log(import_picocolors.default.green(`connectBrowser: \u6210\u529F\u8FDE\u63A5 ${existingUrl}`));
@@ -418,25 +475,22 @@ async function connectBrowser() {
       );
     }
   }
-  console.log(import_picocolors.default.yellow(`connectBrowser: \u7AEF\u53E3 ${CDP_PORT} \u65E0\u54CD\u5E94\uFF0C\u6B63\u5728\u542F\u52A8\u65B0\u7684\u6D4F\u89C8\u5668\u5B9E\u4F8B...`));
+  console.log(import_picocolors.default.yellow(`connectBrowser: \u7AEF\u53E3 ${cdpPort} \u65E0\u54CD\u5E94\uFF0C\u6B63\u5728\u542F\u52A8\u65B0\u7684\u6D4F\u89C8\u5668\u5B9E\u4F8B...`));
+  let launchedUrl;
   try {
-    await startBrowserInBackground();
+    launchedUrl = await startBrowserInBackground();
   } catch (launchError) {
     const msg = launchError instanceof Error ? launchError.message : String(launchError);
     console.error(import_picocolors.default.red(`\u65E0\u6CD5\u542F\u52A8\u6D4F\u89C8\u5668: ${msg}`));
     throw new Error("Browser launch failed.");
   }
-  const launchedUrl = await findAvailableCdpUrl(versionAddresses, 5);
-  if (!launchedUrl) {
-    throw new Error(`\u65E0\u6CD5\u8FDE\u63A5\u5230\u6D4F\u89C8\u5668\uFF08\u7AEF\u53E3 ${CDP_PORT}\uFF09\uFF0C\u8BF7\u68C0\u67E5 Chrome/Edge \u662F\u5426\u5DF2\u5B89\u88C5\u3002`);
-  }
   try {
     console.log(import_picocolors.default.yellow(`connectBrowser: \u6D4F\u89C8\u5668\u5DF2\u542F\u52A8\uFF0C\u6B63\u5728\u8FDE\u63A5 ${launchedUrl}...`));
     const browser = await connectPuppeteer(launchedUrl);
     console.log(import_picocolors.default.green(`connectBrowser: \u6210\u529F\u8FDE\u63A5 ${launchedUrl}`));
     return browser;
   } catch {
-    throw new Error(`\u65E0\u6CD5\u8FDE\u63A5\u5230\u6D4F\u89C8\u5668\uFF08\u7AEF\u53E3 ${CDP_PORT}\uFF09\uFF0C\u8BF7\u68C0\u67E5 Chrome/Edge \u662F\u5426\u5DF2\u5B89\u88C5\u3002`);
+    throw new Error(`\u65E0\u6CD5\u8FDE\u63A5\u5230\u6D4F\u89C8\u5668\uFF08${launchedUrl}\uFF09\uFF0C\u8BF7\u68C0\u67E5 Chrome/Edge \u662F\u5426\u5DF2\u5B89\u88C5\u3002`);
   }
 }
 async function getPageTargetId(page) {
@@ -516,10 +570,11 @@ async function getTargetPage(browser, tabid) {
     }
     if (!targetPage) {
       try {
-        const urls = [
-          `http://localhost:${CDP_PORT}/json/list`,
-          `http://127.0.0.1:${CDP_PORT}/json/list`
-        ];
+        const workspaceDir = getWorkspaceDir();
+        const cdpPort = getCdpPort();
+        const recordedPort = readActivePortFromProfile(workspaceDir);
+        const ports = recordedPort && recordedPort !== cdpPort ? [recordedPort, cdpPort] : [cdpPort];
+        const urls = ports.flatMap((port) => candidateCdpBaseUrls(port).map((u) => `${u}/json/list`));
         let activeTargetId = null;
         for (const url of urls) {
           try {
@@ -556,10 +611,10 @@ async function getTargetPage(browser, tabid) {
   return targetPage;
 }
 async function injectIntoPage(page) {
-  await injectWebMCPPolyfillAndTools(page, true);
+  await injectWebMCPPolyfillAndTools(page);
 }
-async function injectWebMCPPolyfillAndTools(page, force = false) {
-  const polyfillReady = !force && await page.evaluate(() => {
+async function injectWebMCPPolyfillAndTools(page) {
+  const polyfillReady = await page.evaluate(() => {
     return !!window.__webmcpcli_init;
   }).catch(() => false);
   if (!polyfillReady) {
@@ -649,11 +704,19 @@ async function stateCommand({ tabid }) {
     const state = await page.evaluate(async () => {
       const url = document.URL;
       const title = document.title;
-      const mcp = navigator.modelContextTesting || navigator.modelContext;
+      const mcp = document.modelContext || navigator.modelContext;
       let webmcpTools = [];
-      if (mcp && typeof mcp.listTools === "function") {
-        const toolsResult = await mcp.listTools();
-        webmcpTools = toolsResult?.tools || toolsResult || [];
+      if (mcp && typeof mcp.getTools === "function") {
+        try {
+          const toolsResult = await mcp.getTools();
+          const list = toolsResult?.tools || toolsResult || [];
+          webmcpTools = list.filter((t) => t && typeof t.name === "string").map((t) => ({
+            name: t.name,
+            description: typeof t.description === "string" ? t.description.slice(0, 200) : void 0
+          }));
+        } catch {
+          webmcpTools = [];
+        }
       }
       return { url, title, webmcpTools };
     });
@@ -695,15 +758,19 @@ async function runCommand({
   try {
     const page = await getTargetPage(browser, tabid);
     const urlBefore = page.url();
+    await injectIntoPage(page);
     const cleanedArgs = argsJson.trim();
     let result;
     try {
       result = await page.evaluate(async (name, inputString) => {
-        const mcp = navigator.modelContextTesting || navigator.modelContext;
+        const mcp = document.modelContext || document.modelContext || document.modelContext;
         if (!mcp || typeof mcp.executeTool !== "function") {
-          throw new Error("\u5F53\u524D\u9875\u9762\u6CA1\u6709\u6CE8\u5165 WebMCP \u73AF\u5883 (navigator.modelContextTesting.executeTool \u672A\u627E\u5230)");
+          throw new Error("\u5F53\u524D\u9875\u9762\u6CA1\u6709\u6CE8\u5165 WebMCP \u73AF\u5883 (document.modelContext \u672A\u627E\u5230)");
         }
-        let res = await mcp.executeTool(name, inputString);
+        const tools = await mcp.getTools();
+        const toolObj = tools.find((t) => t.name === name);
+        if (!toolObj) throw new Error(`Tool ${name} not found`);
+        let res = await mcp.executeTool(toolObj, inputString);
         if (typeof res === "string") {
           try {
             res = JSON.parse(res);
@@ -880,7 +947,7 @@ async function tabsForwardCommand(tabid) {
 // package.json
 var package_default = {
   name: "@opentiny/webmcp-cli",
-  version: "0.0.4",
+  version: "0.0.8",
   type: "module",
   description: "WebMCP CLI for AI Agents to interact with browser via Puppeteer",
   main: "dist/index.js",
@@ -898,7 +965,10 @@ var package_default = {
     build: "tsup && pnpm run build:inject",
     prepublishOnly: "pnpm run build",
     "link:global": "npm install -g .",
-    start: "node dist/bin.js"
+    start: "node dist/bin.js",
+    test: "vitest run",
+    "test:watch": "vitest",
+    "test:browser": "vitest run --config vitest.e2e.config.ts"
   },
   keywords: [
     "chrome",
@@ -920,6 +990,7 @@ var package_default = {
     clipboardy: "^5.3.1",
     commander: "^11.1.0",
     json5: "^2.2.3",
+    marked: "^15.0.7",
     picocolors: "^1.0.0",
     "puppeteer-core": "^22.0.0"
   },
@@ -928,7 +999,8 @@ var package_default = {
     esbuild: "^0.25.0",
     tsup: "^8.0.2",
     tsx: "^4.0.0",
-    typescript: "^5.3.3"
+    typescript: "^5.3.3",
+    vitest: "^4.1.10"
   }
 };
 
@@ -938,6 +1010,30 @@ function parseTabId(id) {
   if (!id) return void 0;
   return id;
 }
+function tryParseBrowserStateText(text) {
+  const tryParse = (jsonStr) => {
+    try {
+      const parsed = JSON.parse(jsonStr);
+      if (parsed && typeof parsed.content === "string") {
+        return parsed;
+      }
+    } catch {
+    }
+    return null;
+  };
+  const direct = tryParse(text);
+  if (direct) return direct;
+  if (text.startsWith("\u6D4F\u89C8\u5668\u72B6\u6001: ")) {
+    let jsonStr = text.substring("\u6D4F\u89C8\u5668\u72B6\u6001: ".length);
+    const firstNewline = jsonStr.indexOf("\n");
+    if (firstNewline !== -1) {
+      const maybeJson = jsonStr.substring(0, firstNewline);
+      if (tryParse(maybeJson)) jsonStr = maybeJson;
+    }
+    return tryParse(jsonStr);
+  }
+  return null;
+}
 function cleanOldLogs(baseDir, logDir) {
   try {
     const oldLogFile = import_path3.default.join(baseDir, "webmcp-cli.log");
@@ -980,6 +1076,51 @@ function cleanOldLogs(baseDir, logDir) {
   } catch (e) {
   }
 }
+function formatLogResult(result) {
+  if (result === void 0 || result === null) {
+    return "null";
+  }
+  try {
+    if (typeof result !== "object") {
+      return String(result);
+    }
+    const clone = JSON.parse(JSON.stringify(result));
+    let a11yTreeStr = "";
+    let searchResultStr = "";
+    if (clone && Array.isArray(clone.content) && clone.content.length > 0 && clone.content[0] && typeof clone.content[0].text === "string") {
+      const text = clone.content[0].text;
+      const browserState = tryParseBrowserStateText(text);
+      if (browserState) {
+        a11yTreeStr = browserState.content;
+        browserState.content = "[Formatted A11y Tree - See details below]";
+        clone.content[0].text = JSON.stringify(browserState, null, 2);
+      } else if (text.includes("A11y Tree \u641C\u7D22\u7ED3\u679C") || text.includes("\u65E0\u969C\u788D\u6811\u641C\u7D22\u7ED3\u679C") || text.includes("\u65E0\u969C\u788D\u6811\u641C\u7D22") || text.includes("\u547D\u4E2D\u884C") || text.includes("context:")) {
+        searchResultStr = text;
+        clone.content[0].text = "[Search A11y Tree Result - See details below]";
+      }
+    }
+    let out = JSON.stringify(clone, null, 2);
+    if (a11yTreeStr) {
+      out += `
+
+[FORMATTED A11Y TREE]:
+${a11yTreeStr}`;
+    }
+    if (searchResultStr) {
+      out += `
+
+[FORMATTED SEARCH RESULT]:
+${searchResultStr}`;
+    }
+    return out;
+  } catch (e) {
+    try {
+      return JSON.stringify(result, null, 2);
+    } catch {
+      return String(result);
+    }
+  }
+}
 function writeLog(commandName, args, result, error) {
   try {
     const baseDir = process.env.WEBMCP_WORKSPACE || import_path3.default.join(import_os2.default.homedir(), ".webmcp_chrome_profile");
@@ -1005,15 +1146,8 @@ ${error instanceof Error ? error.stack : String(error)}
     } else if (result) {
       logText += `RESULT:
 `;
-      try {
-        if (result && typeof result === "object") {
-          logText += JSON.stringify(result, null, 2).split("\n").map((line) => `  ${line}`).join("\n") + "\n";
-        } else {
-          logText += String(result).split("\n").map((line) => `  ${line}`).join("\n") + "\n";
-        }
-      } catch {
-        logText += JSON.stringify(result, null, 2).split("\n").map((line) => `  ${line}`).join("\n") + "\n";
-      }
+      const formattedResult = formatLogResult(result);
+      logText += formattedResult.split("\n").map((line) => `  ${line}`).join("\n") + "\n";
     } else {
       logText += `RESULT: null
 `;
@@ -1043,7 +1177,7 @@ program.command("state").description("\u83B7\u53D6\u6D4F\u89C8\u5668\u5F53\u524D
   try {
     const result = await stateCommand(args);
     writeLog("state", args, result);
-    console.log(JSON.stringify(result, null, 2));
+    console.log(formatLogResult(result));
   } catch (error) {
     handleCommandError(error, "state", args);
   }
@@ -1077,7 +1211,7 @@ program.command("run <toolName> [args...]").description("\u5411\u6307\u5B9A\u987
       tabid: parseTabId(options.tabid)
     });
     writeLog("run", { ...rawArgs, finalArgsJson }, result);
-    console.log(JSON.stringify(result, null, 2));
+    console.log(formatLogResult(result));
   } catch (error) {
     handleCommandError(error, "run", { ...rawArgs, finalArgsJson });
   }