@opentiny/webmcp-cli 0.0.1-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 - present OpenTiny Authors.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,117 @@
+# @opentiny/webmcp-cli
+
+`@opentiny/webmcp-cli` 是一个用于控制 Chrome 浏览器并暴露 WebMCP 接口的 CLI 工具。它基于 `puppeteer-core`，通过 CDP（Chrome DevTools Protocol）连接或启动本地浏览器，支持自动为页面注入 WebMCP 运行环境及页面操作工具 (`page-agent-tool`)，从而让 AI Agent 可以轻松感知和操控网页。
+
+## 安装与开发
+
+```bash
+# 全局安装（发布后）
+npm install -g @opentiny/webmcp-cli
+# 或
+pnpm add -g @opentiny/webmcp-cli
+
+# 本地联调（在 packages/webmcp-cli 目录）
+pnpm build
+npm install -g .
+```
+
+> **注意：** 在本地联调时，建议使用 `npm install -g .`，这会确保在你的 PATH 中生成有效的可执行文件（`webmcp-cli`）。
+
+## 核心架构特性
+
+- **后台浏览器驻留**：如果当前没有开启带有调试端口 (`9222`) 的 Chrome，CLI 会自动在后台拉起一个基于你本地 Profile 的独立 Chrome 实例。
+- **自动环境注入**：当获取页面状态时，CLI 会自动探测并向页面注入 `webmcp-polyfill` 以及内置的 `page-agent-tool` 工具。
+- **统一工具协议**：采用标准 MCP (Model Context Protocol) 规范。所有的页面操作（点击、输入等）不再是生硬的命令，而是直接调用页面上注册好的 `page-agent-tool`。
+
+## CLI 命令使用
+
+全局命令为 **`webmcp-cli`**，支持全局参数：
+- `-w, --workspace <path>`: 指定自定义的浏览器工作空间（用户配置目录）路径。如果不传默认使用 `~/.webmcp_chrome_profile`。
+
+---
+
+### 1. `state` 命令
+
+获取浏览器当前活跃页签（或指定页签）的详细状态，包括当前页面的标题、URL、页面中包含的可操作 DOM 树，以及当前页面所有可调用的 MCP 工具列表（包含自动注入的 `page-agent-tool`）。
+
+**用法：**
+```bash
+webmcp-cli state
+webmcp-cli state -t <tabid>
+```
+
+**返回格式（JSON）：**
+```json
+{
+  "content": "浏览器状态：包含 [index]<type>text</type> 格式的页面树...",
+  "url": "https://example.com",
+  "title": "Example Domain",
+  "webmcpTools": [
+    {
+      "name": "page-agent-tool",
+      "description": "...",
+      "inputSchema": "..."
+    }
+  ],
+  "tabs": [
+    {
+      "tabid": 1234,
+      "title": "Example Domain",
+      "url": "https://example.com"
+    }
+  ]
+}
+```
+
+---
+
+### 2. `run` 命令
+
+向指定页签调用并执行任意的 WebMCP 工具。工具名与参数须与 `state` 命令中获取到的 `webmcpTools` 清单匹配。
+
+**用法：**
+```bash
+webmcp-cli run <toolName> <argsJson> [-t tabid]
+```
+
+**示例一：执行页面自带工具**
+假设网页使用 `navigator.modelContext.registerTool` 注册了一个名为 `change-color` 的工具：
+```bash
+webmcp-cli run change-color '{"color": "#ff0000"}'
+```
+
+**示例二：使用内置的 `page-agent-tool` 操控浏览器**
+CLI 自动注入的 `page-agent-tool` 支持丰富的动作（action）：`browserState`, `click`, `fill`, `select`, `scroll`, `executeJavascript`。
+
+获取状态（执行前必须调用一次）：
+```bash
+webmcp-cli run page-agent-tool '{"action": "browserState"}'
+```
+
+点击索引为 35 的元素：
+```bash
+webmcp-cli run page-agent-tool '{"action": "click", "index": 35}'
+```
+
+向索引为 40 的输入框填入文本：
+```bash
+webmcp-cli run page-agent-tool '{"action": "fill", "index": 40, "text": "OpenTiny"}'
+```
+
+---
+
+### 3. `open` 命令
+
+在浏览器中打开指定的网页，并且可以选择是在当前页签导航，还是开启全新页签。
+
+**用法：**
+```bash
+webmcp-cli open <url>
+webmcp-cli open <url> -t <tabid>
+webmcp-cli open <url> -n    # 在新页签中打开
+```
+
+**示例：**
+```bash
+webmcp-cli open "https://github.com/opentiny/tiny-vue" -n
+```

package/dist/bin.cjs

@@ -0,0 +1,515 @@
+#!/usr/bin/env node
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/bin.ts
+var import_commander = require("commander");
+var import_picocolors3 = __toESM(require("picocolors"), 1);
+
+// src/browser.ts
+var import_puppeteer_core = __toESM(require("puppeteer-core"), 1);
+var import_picocolors = __toESM(require("picocolors"), 1);
+var import_fs = __toESM(require("fs"), 1);
+var import_os = __toESM(require("os"), 1);
+var import_path = __toESM(require("path"), 1);
+var import_child_process = require("child_process");
+var import_url = require("url");
+var import_meta = {};
+var __filename = (0, import_url.fileURLToPath)(import_meta.url);
+var __dirname = import_path.default.dirname(__filename);
+var CDP_PORT = 9222;
+var CDP_URL = `http://localhost:${CDP_PORT}`;
+function getDefaultChromePath() {
+  const platform = import_os.default.platform();
+  if (platform === "darwin") {
+    return "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
+  } else if (platform === "win32") {
+    const paths = [
+      process.env.LOCALAPPDATA + "\\Google\\Chrome\\Application\\chrome.exe",
+      process.env.PROGRAMFILES + "\\Google\\Chrome\\Application\\chrome.exe",
+      process.env["PROGRAMFILES(X86)"] + "\\Google\\Chrome\\Application\\chrome.exe"
+    ];
+    return paths.find((p) => import_fs.default.existsSync(p)) || null;
+  } else {
+    const paths = ["/usr/bin/google-chrome", "/usr/bin/google-chrome-stable", "/usr/bin/chromium", "/usr/bin/chromium-browser"];
+    return paths.find((p) => import_fs.default.existsSync(p)) || null;
+  }
+}
+async function startChromeInBackground() {
+  const chromePath = getDefaultChromePath();
+  if (!chromePath || !import_fs.default.existsSync(chromePath)) {
+    throw new Error("\u65E0\u6CD5\u5728\u7CFB\u7EDF\u4E2D\u627E\u5230 Chrome \u6D4F\u89C8\u5668\u7684\u9ED8\u8BA4\u5B89\u88C5\u8DEF\u5F84\u3002");
+  }
+  console.log(import_picocolors.default.yellow(`\u6B63\u5728\u542F\u52A8\u540E\u53F0 Chrome \u5B9E\u4F8B (\u7AEF\u53E3: ${CDP_PORT})...`));
+  const userDataDir = process.env.WEBMCP_WORKSPACE || import_path.default.join(import_os.default.homedir(), ".webmcp_chrome_profile");
+  const child = (0, import_child_process.spawn)(
+    chromePath,
+    [
+      `--remote-debugging-port=${CDP_PORT}`,
+      `--user-data-dir=${userDataDir}`,
+      "--no-first-run",
+      "--no-default-browser-check"
+    ],
+    {
+      detached: true,
+      stdio: "ignore"
+    }
+  );
+  child.unref();
+  for (let i = 0; i < 20; i++) {
+    try {
+      const urls = [`http://localhost:${CDP_PORT}/json/version`, `http://127.0.0.1:${CDP_PORT}/json/version`];
+      for (const url of urls) {
+        try {
+          const response = await fetch(url);
+          if (response.ok) {
+            console.log(import_picocolors.default.green("Chrome \u542F\u52A8\u5E76\u5C31\u7EEA\u3002"));
+            return;
+          }
+        } catch (err) {
+        }
+      }
+    } catch (e) {
+    }
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  }
+  throw new Error("Chrome \u542F\u52A8\u8D85\u65F6\uFF0C\u65E0\u6CD5\u8FDE\u63A5\u5230 CDP \u7AEF\u53E3\u3002");
+}
+async function connectBrowser() {
+  const targetFilter = (target) => {
+    try {
+      const info = typeof target._getTargetInfo === "function" ? target._getTargetInfo() : target;
+      const type = info.type || "";
+      const url = info.url || "";
+      if (type === "service_worker" || type === "shared_worker" || type === "iframe" || type === "other" || type === "webview" || type === "background_page") {
+        return false;
+      }
+      if (url.startsWith("devtools://") || url.startsWith("chrome-extension://")) {
+        return false;
+      }
+      return true;
+    } catch (e) {
+      return false;
+    }
+  };
+  try {
+    console.log(import_picocolors.default.yellow("connectBrowser: \u6B63\u5728\u5C1D\u8BD5\u8FDE\u63A5 127.0.0.1:9222..."));
+    const browser = await import_puppeteer_core.default.connect({
+      browserURL: `http://127.0.0.1:${CDP_PORT}`,
+      defaultViewport: null,
+      targetFilter
+    });
+    console.log(import_picocolors.default.green("connectBrowser: \u6210\u529F\u8FDE\u63A5 127.0.0.1:9222"));
+    return browser;
+  } catch (error) {
+    try {
+      console.log(import_picocolors.default.yellow("connectBrowser: \u6B63\u5728\u5C1D\u8BD5\u8FDE\u63A5 localhost:9222..."));
+      const browser = await import_puppeteer_core.default.connect({
+        browserURL: `http://localhost:${CDP_PORT}`,
+        defaultViewport: null,
+        targetFilter
+      });
+      console.log(import_picocolors.default.green("connectBrowser: \u6210\u529F\u8FDE\u63A5 localhost:9222"));
+      return browser;
+    } catch (error2) {
+      console.log(import_picocolors.default.yellow(`connectBrowser: \u8FDE\u63A5\u5931\u8D25\uFF0C\u5C06\u5C1D\u8BD5\u5524\u8D77\u6D4F\u89C8\u5668\u3002\u9519\u8BEF\u539F\u56E0: ${error2 instanceof Error ? error2.message : String(error2)}`));
+      try {
+        await startChromeInBackground();
+        try {
+          console.log(import_picocolors.default.yellow("connectBrowser: \u6D4F\u89C8\u5668\u5DF2\u542F\u52A8\uFF0C\u6B63\u5728\u5C1D\u8BD5\u8FDE\u63A5 127.0.0.1:9222..."));
+          const browser = await import_puppeteer_core.default.connect({
+            browserURL: `http://127.0.0.1:${CDP_PORT}`,
+            defaultViewport: null,
+            targetFilter
+          });
+          console.log(import_picocolors.default.green("connectBrowser: \u6210\u529F\u8FDE\u63A5 127.0.0.1:9222"));
+          return browser;
+        } catch (e) {
+          console.log(import_picocolors.default.yellow("connectBrowser: \u6B63\u5728\u5C1D\u8BD5\u8FDE\u63A5 localhost:9222..."));
+          const browser = await import_puppeteer_core.default.connect({
+            browserURL: `http://localhost:${CDP_PORT}`,
+            defaultViewport: null,
+            targetFilter
+          });
+          console.log(import_picocolors.default.green("connectBrowser: \u6210\u529F\u8FDE\u63A5 localhost:9222"));
+          return browser;
+        }
+      } catch (launchError) {
+        const msg = launchError instanceof Error ? launchError.message : String(launchError);
+        console.error(import_picocolors.default.red(`\u65E0\u6CD5\u8FDE\u63A5\u6216\u542F\u52A8\u6D4F\u89C8\u5668: ${msg}`));
+        console.error(import_picocolors.default.yellow(`\u{1F4A1} \u63D0\u793A\uFF1A\u7531\u4E8E\u6211\u4EEC\u8981\u4F7F\u7528\u4F60\u65E5\u5E38\u7684\u9ED8\u8BA4\u6D4F\u89C8\u5668\uFF08\u5305\u542B\u4F60\u7684\u4E66\u7B7E and \u767B\u5F55\u6001\uFF09\uFF0C\u5982\u679C\u4F60\u7684 Chrome \u76EE\u524D\u6B63\u5904\u4E8E\u6253\u5F00\u72B6\u6001\uFF0C\u5B83\u4F1A\u62D2\u7EDD\u4F7F\u7528\u5E26\u6709\u8C03\u8BD5\u7AEF\u53E3\u7684\u65B0\u53C2\u6570\u542F\u52A8\u3002`));
+        console.error(import_picocolors.default.yellow(`\u{1F449} \u89E3\u51B3\u529E\u6CD5\uFF1A\u8BF7\u5148\u5B8C\u5168\u9000\u51FA\u5F53\u524D\u7684 Chrome \u6D4F\u89C8\u5668\uFF08\u5728 Mac \u4E0A\u6309 Cmd+Q\uFF09\uFF0C\u7136\u540E\u518D\u91CD\u65B0\u8FD0\u884C\u547D\u4EE4\u3002`));
+        throw new Error("Browser connection failed.");
+      }
+    }
+  }
+}
+async function getPageTargetId(page) {
+  const session = await page.target().createCDPSession();
+  try {
+    const { targetInfo } = await session.send("Target.getTargetInfo");
+    return targetInfo.targetId;
+  } finally {
+    await session.detach().catch(() => {
+    });
+  }
+}
+async function getTargetPage(browser, tabid) {
+  const targets = browser.targets();
+  const pageTargets = targets.filter((t) => {
+    try {
+      const type = (typeof t.type === "function" ? t.type() : t.type) || "";
+      const url = (typeof t.url === "function" ? t.url() : t.url) || "";
+      return type === "page" && !url.startsWith("devtools://");
+    } catch {
+      return false;
+    }
+  });
+  if (pageTargets.length === 0) {
+    const newPage = await browser.newPage();
+    await injectWebMCPPolyfillAndTools(newPage);
+    return newPage;
+  }
+  let targetPage = null;
+  if (tabid !== void 0) {
+    for (const target of pageTargets) {
+      const tid = typeof target._getTargetInfo === "function" ? target._getTargetInfo().targetId : target._targetId || target.targetId || "";
+      if (tid === tabid || tid.includes(tabid)) {
+        targetPage = await target.page();
+        break;
+      }
+    }
+    if (!targetPage) {
+      throw new Error(`Tab with targetId "${tabid}" not found.`);
+    }
+  } else {
+    try {
+      const urls = [
+        `http://localhost:${CDP_PORT}/json/list`,
+        `http://127.0.0.1:${CDP_PORT}/json/list`
+      ];
+      let activeTargetId = null;
+      for (const url of urls) {
+        try {
+          const res = await fetch(url);
+          if (res.ok) {
+            const targetsData = await res.json();
+            const active = targetsData.find((t) => t.type === "page" && !t.url.startsWith("devtools://"));
+            if (active) {
+              activeTargetId = active.id;
+              break;
+            }
+          }
+        } catch {
+        }
+      }
+      if (activeTargetId) {
+        for (const target of pageTargets) {
+          const tid = typeof target._getTargetInfo === "function" ? target._getTargetInfo().targetId : target._targetId || target.targetId || "";
+          if (tid === activeTargetId) {
+            targetPage = await target.page();
+            break;
+          }
+        }
+      }
+    } catch {
+    }
+    if (!targetPage) {
+      const lastTarget = pageTargets[pageTargets.length - 1];
+      targetPage = await lastTarget.page();
+    }
+  }
+  if (!targetPage) {
+    throw new Error("\u65E0\u6CD5\u83B7\u53D6\u76EE\u6807\u9875\u9762");
+  }
+  await injectWebMCPPolyfillAndTools(targetPage);
+  return targetPage;
+}
+async function injectIntoPage(page) {
+  await injectWebMCPPolyfillAndTools(page, true);
+}
+async function injectWebMCPPolyfillAndTools(page, force = false) {
+  const polyfillReady = !force && await page.evaluate(() => {
+    return !!window.__webmcpcli_init;
+  }).catch(() => false);
+  if (!polyfillReady) {
+    console.log(import_picocolors.default.cyan("\u5F53\u524D\u9875\u9762\u5C1A\u672A\u6CE8\u5165 WebMCP \u73AF\u5883\uFF0C\u6B63\u5728\u6267\u884C\u81EA\u52A8\u6CE8\u5165..."));
+    const injectScriptPath = import_path.default.resolve(__dirname, "inject-bundle.js");
+    if (!import_fs.default.existsSync(injectScriptPath)) {
+      throw new Error(`Cannot find inject-bundle.js at ${injectScriptPath}. Please ensure you run 'pnpm build:inject' first.`);
+    }
+    const scriptContent = import_fs.default.readFileSync(injectScriptPath, "utf-8");
+    try {
+      await page.evaluate(scriptContent);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      throw new Error("\u81EA\u52A8\u6CE8\u5165\u811A\u672C\u6267\u884C\u5931\u8D25: " + msg);
+    }
+    await new Promise((resolve) => setTimeout(resolve, 300));
+  }
+  await injectDomainTools(page);
+}
+async function injectDomainTools(page) {
+  let hostname;
+  try {
+    const url = new URL(page.url());
+    hostname = url.hostname;
+  } catch {
+    return;
+  }
+  const toolBundlePath = import_path.default.resolve(__dirname, "webmcp-tools", `${hostname}.js`);
+  if (!import_fs.default.existsSync(toolBundlePath)) {
+    return;
+  }
+  console.log(import_picocolors.default.cyan(`\u68C0\u6D4B\u5230\u57DF\u540D ${hostname} \u6709\u9884\u7F6E\u5DE5\u5177\uFF0C\u6B63\u5728\u6CE8\u5165...`));
+  const toolScript = import_fs.default.readFileSync(toolBundlePath, "utf-8");
+  try {
+    await page.evaluate(toolScript);
+    console.log(import_picocolors.default.green(`\u5DF2\u4E3A ${hostname} \u6CE8\u5165\u9884\u7F6E\u5DE5\u5177`));
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    console.warn(import_picocolors.default.yellow(`\u57DF\u540D\u5DE5\u5177\u6CE8\u5165\u5931\u8D25 (${hostname}): ${msg}`));
+  }
+}
+
+// src/commands/state.ts
+async function stateCommand({ tabid }) {
+  const browser = await connectBrowser();
+  try {
+    const page = await getTargetPage(browser, tabid);
+    const state = await page.evaluate(async () => {
+      const url = document.URL;
+      const title = document.title;
+      const mcp = navigator.modelContextTesting || navigator.modelContext;
+      let webmcpTools = [];
+      let contentData = `\u9875\u9762\u5DF2\u51C6\u5907\u597D: ${title}`;
+      if (mcp) {
+        if (typeof mcp.listTools === "function") {
+          const toolsResult = await mcp.listTools();
+          webmcpTools = toolsResult?.tools || toolsResult || [];
+        }
+        if (typeof mcp.executeTool === "function") {
+          try {
+            const argsString = JSON.stringify({ action: "browserState" });
+            let stateRes = await mcp.executeTool("page-agent-tool", argsString);
+            if (typeof stateRes === "string") {
+              try {
+                stateRes = JSON.parse(stateRes);
+              } catch (e) {
+              }
+            }
+            if (stateRes && stateRes.content && stateRes.content.length > 0) {
+              const textContent = stateRes.content.map((c) => c.text).join("\\n");
+              const prefix = "\u6D4F\u89C8\u5668\u72B6\u6001: ";
+              if (textContent.startsWith(prefix)) {
+                try {
+                  const jsonStr = textContent.substring(prefix.length);
+                  const parsedState = JSON.parse(jsonStr);
+                  contentData = parsedState.content;
+                } catch (e) {
+                  contentData = textContent;
+                }
+              } else {
+                contentData = textContent;
+              }
+            }
+          } catch (e) {
+            console.error("Snapshot error:", e.message);
+          }
+        }
+      }
+      return {
+        content: contentData,
+        url,
+        title,
+        webmcpTools
+      };
+    });
+    const pages = await browser.pages();
+    const tabs = await Promise.all(pages.map(async (p) => {
+      const pUrl = p.url();
+      if (pUrl.startsWith("devtools://")) return null;
+      const pTitle = await Promise.race([
+        p.title().catch(() => "Unknown"),
+        new Promise((resolve) => setTimeout(() => resolve("Unknown"), 500))
+      ]);
+      return {
+        // 使用真实的 Chrome target ID，而非数组下标
+        tabid: await getPageTargetId(p).catch(() => pUrl),
+        title: pTitle,
+        url: pUrl
+      };
+    }));
+    return {
+      ...state,
+      tabs: tabs.filter(Boolean)
+    };
+  } finally {
+    await browser.disconnect();
+  }
+}
+
+// src/commands/run.ts
+async function runCommand({
+  toolName,
+  argsJson,
+  tabid
+}) {
+  const browser = await connectBrowser();
+  try {
+    const page = await getTargetPage(browser, tabid);
+    try {
+      JSON.parse(argsJson);
+    } catch (e) {
+      throw new Error(`\u53C2\u6570\u4E0D\u662F\u6709\u6548\u7684 JSON: ${e.message}`);
+    }
+    const result = await page.evaluate(async (name, inputString) => {
+      const mcp = navigator.modelContextTesting || navigator.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)");
+      }
+      let res = await mcp.executeTool(name, inputString);
+      if (typeof res === "string") {
+        try {
+          res = JSON.parse(res);
+        } catch (e) {
+        }
+      }
+      return res;
+    }, toolName, argsJson);
+    return result;
+  } finally {
+    await browser.disconnect();
+  }
+}
+
+// src/commands/open.ts
+var import_picocolors2 = __toESM(require("picocolors"), 1);
+async function openCommand(url, { tabid, newTab }) {
+  const browser = await connectBrowser();
+  try {
+    let page;
+    if (newTab) {
+      console.log(import_picocolors2.default.yellow("openCommand: \u6B63\u5728\u521B\u5EFA\u65B0\u9875\u9762..."));
+      page = await browser.newPage();
+    } else {
+      console.log(import_picocolors2.default.yellow("openCommand: \u83B7\u53D6\u6D4F\u89C8\u5668 targets..."));
+      const targets = browser.targets();
+      const pageTargets = targets.filter((t) => {
+        try {
+          const type = (typeof t.type === "function" ? t.type() : t.type) || "";
+          const urlStr = (typeof t.url === "function" ? t.url() : t.url) || "";
+          return type === "page" && !urlStr.startsWith("devtools://");
+        } catch {
+          return false;
+        }
+      });
+      console.log(import_picocolors2.default.yellow(`openCommand: \u666E\u901A\u9875\u9762 targets \u6570\u91CF: ${pageTargets.length}`));
+      let selectedTarget;
+      if (tabid !== void 0) {
+        console.log(import_picocolors2.default.yellow(`openCommand: \u6B63\u5728\u5339\u914D\u6307\u5B9A\u7684 tabid: ${tabid}...`));
+        selectedTarget = pageTargets.find((t) => {
+          const tid = typeof t._getTargetInfo === "function" ? t._getTargetInfo().targetId : t._targetId || t.targetId || "";
+          return tid === tabid || tid.includes(tabid);
+        });
+      }
+      if (selectedTarget) {
+        console.log(import_picocolors2.default.yellow("openCommand: \u6B63\u5728\u5C06\u5339\u914D\u7684 target \u8F6C\u6362\u4E3A page..."));
+        page = await selectedTarget.page();
+      } else if (pageTargets.length > 0) {
+        console.log(import_picocolors2.default.yellow("openCommand: \u6B63\u5728\u5C06\u6700\u540E\u4E00\u4E2A target \u8F6C\u6362\u4E3A page..."));
+        page = await pageTargets[pageTargets.length - 1].page();
+      }
+      if (!page) {
+        console.log(import_picocolors2.default.yellow("openCommand: \u6CA1\u6709\u627E\u5230\u53EF\u7528 page\uFF0C\u6B63\u5728\u521B\u5EFA\u65B0\u9875\u9762..."));
+        page = await browser.newPage();
+      }
+    }
+    if (!url.startsWith("http://") && !url.startsWith("https://")) {
+      url = "https://" + url;
+    }
+    console.log(import_picocolors2.default.cyan(`\u6B63\u5728\u6253\u5F00: ${url}`));
+    await page.goto(url, { waitUntil: "domcontentloaded" });
+    await injectIntoPage(page);
+    return {
+      success: true,
+      url: page.url(),
+      title: await page.title()
+    };
+  } finally {
+    await browser.disconnect();
+  }
+}
+
+// src/bin.ts
+var program = new import_commander.Command();
+function parseTabId(id) {
+  if (!id) return void 0;
+  return id;
+}
+program.name("webmcp-cli").description("WebMCP CLI for interacting with browser via CDP").version("1.0.0").option("-w, --workspace <path>", "\u6307\u5B9A\u81EA\u5B9A\u4E49\u7684\u6D4F\u89C8\u5668\u5DE5\u4F5C\u7A7A\u95F4\uFF08\u7528\u6237\u914D\u7F6E\u76EE\u5F55\uFF09\u8DEF\u5F84").hook("preAction", (thisCommand) => {
+  const opts = thisCommand.opts();
+  if (opts.workspace) {
+    process.env.WEBMCP_WORKSPACE = opts.workspace;
+  }
+});
+program.command("state").description("\u83B7\u53D6\u6D4F\u89C8\u5668\u5F53\u524D\u9875\u7B7E\u6216\u6307\u5B9A\u9875\u7B7E\u7684\u72B6\u6001\uFF08\u5185\u5BB9\u3001\u6240\u6709\u9875\u7B7E\u5217\u8868\u3001\u53EF\u7528 WebMCP \u5DE5\u5177\u5217\u8868\uFF09").option("-t, --tabid <id>", "\u6307\u5B9A\u9875\u7B7E\u7684 ID").action(async (options) => {
+  try {
+    const result = await stateCommand({ tabid: parseTabId(options.tabid) });
+    console.log(JSON.stringify(result, null, 2));
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : String(error);
+    console.error(import_picocolors3.default.red(`Error executing state command: ${msg}`));
+    process.exit(1);
+  }
+});
+program.command("run <toolName> <argsJson>").description("\u5411\u6307\u5B9A\u9875\u7B7E\u8C03\u7528\u6307\u5B9A\u7684 WebMCP \u5DE5\u5177\u6267\u884C\u64CD\u4F5C").option("-t, --tabid <id>", "\u6307\u5B9A\u9875\u7B7E\u7684 ID").action(async (toolName, argsJson, options) => {
+  try {
+    const result = await runCommand({
+      toolName,
+      argsJson,
+      tabid: parseTabId(options.tabid)
+    });
+    console.log(JSON.stringify(result, null, 2));
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : String(error);
+    console.error(import_picocolors3.default.red(`Error executing run command: ${msg}`));
+    process.exit(1);
+  }
+});
+program.command("open <url>").description("\u5728\u5F53\u524D\u6D4F\u89C8\u5668\u4E2D\u6253\u5F00\u6307\u5B9A\u7F51\u9875").option("-t, --tabid <id>", "\u5728\u6307\u5B9A\u9875\u7B7E\u4E2D\u6253\u5F00").option("-n, --new-tab", "\u5728\u4E00\u4E2A\u5168\u65B0\u7684\u9875\u7B7E\u4E2D\u6253\u5F00").action(async (url, options) => {
+  try {
+    const result = await openCommand(url, {
+      tabid: parseTabId(options.tabid),
+      newTab: options.newTab
+    });
+    console.log(JSON.stringify(result, null, 2));
+  } catch (error) {
+    const msg = error instanceof Error ? error.message : String(error);
+    console.error(import_picocolors3.default.red(`Error executing open command: ${msg}`));
+    process.exit(1);
+  }
+});
+program.parse(process.argv);
+//# sourceMappingURL=bin.cjs.map