@opentiny/webmcp-cli 0.0.1-alpha.1 → 0.0.1-alpha.2

package/README.md

@@ -100,18 +100,22 @@ webmcp-cli run page-agent-tool '{"action": "fill", "index": 40, "text": "OpenTin
 
 ---
 
-### 3. `open` 命令
+### 3. `tabs` 命令
 
-在浏览器中打开指定的网页，并且可以选择是在当前页签导航，还是开启全新页签。
+管理浏览器标签页。
 
 **用法：**
 ```bash
-webmcp-cli open <url>
-webmcp-cli open <url> -t <tabid>
-webmcp-cli open <url> -n    # 在新页签中打开
+webmcp-cli tabs open <url>         # 在新标签页打开网页
+webmcp-cli tabs close <tabid>      # 关闭指定标签页
+webmcp-cli tabs switch <tabid>     # 切换到指定标签页
+webmcp-cli tabs back [tabid]       # 后退（默认当前标签页）
+webmcp-cli tabs forward [tabid]    # 前进（默认当前标签页）
 ```
 
 **示例：**
 ```bash
-webmcp-cli open "https://github.com/opentiny/tiny-vue" -n
+webmcp-cli tabs open "https://github.com/opentiny/tiny-vue"
+webmcp-cli tabs switch 2EA73ED323E46E5E108D4E46DA4E4AA7
+webmcp-cli tabs back
 ```

package/dist/bin.cjs

@@ -25,7 +25,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 // src/bin.ts
 var import_commander = require("commander");
-var import_picocolors3 = __toESM(require("picocolors"), 1);
+var import_picocolors2 = __toESM(require("picocolors"), 1);
 
 // src/browser.ts
 var import_puppeteer_core = __toESM(require("puppeteer-core"), 1);
@@ -280,9 +280,8 @@ async function getPageTargetId(page) {
     });
   }
 }
-async function getTargetPage(browser, tabid) {
-  const targets = browser.targets();
-  const pageTargets = targets.filter((t) => {
+function getPageTargets(browser) {
+  return browser.targets().filter((t) => {
     try {
       const type = (typeof t.type === "function" ? t.type() : t.type) || "";
       const url = (typeof t.url === "function" ? t.url() : t.url) || "";
@@ -291,6 +290,41 @@ async function getTargetPage(browser, tabid) {
       return false;
     }
   });
+}
+function getTargetIdFromTarget(target) {
+  return typeof target._getTargetInfo === "function" ? target._getTargetInfo().targetId : target._targetId || target.targetId || "";
+}
+function findPageTargetByTabId(browser, tabid) {
+  const pageTargets = getPageTargets(browser);
+  return pageTargets.find((t) => {
+    const tid = getTargetIdFromTarget(t);
+    return tid === tabid || tid.includes(tabid);
+  }) ?? null;
+}
+async function activateTabById(browser, tabid) {
+  const target = findPageTargetByTabId(browser, tabid);
+  if (!target) {
+    throw new Error(`Tab with targetId "${tabid}" not found.`);
+  }
+  const realTabId = getTargetIdFromTarget(target);
+  const pages = await browser.pages();
+  let sessionPage = pages.find((p) => !p.url().startsWith("devtools://"));
+  if (!sessionPage && pages.length > 0) {
+    sessionPage = pages[0];
+  }
+  if (!sessionPage) {
+    sessionPage = await browser.newPage();
+  }
+  const session = await sessionPage.createCDPSession();
+  try {
+    await session.send("Target.activateTarget", { targetId: realTabId });
+  } finally {
+    await session.detach().catch(() => {
+    });
+  }
+}
+async function getTargetPage(browser, tabid) {
+  const pageTargets = getPageTargets(browser);
   if (pageTargets.length === 0) {
     const newPage = await browser.newPage();
     await injectWebMCPPolyfillAndTools(newPage);
@@ -298,16 +332,11 @@ async function getTargetPage(browser, tabid) {
   }
   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) {
+    const target = findPageTargetByTabId(browser, tabid);
+    if (!target) {
       throw new Error(`Tab with targetId "${tabid}" not found.`);
     }
+    targetPage = await target.page();
   } else {
     try {
       const urls = [
@@ -331,8 +360,7 @@ async function getTargetPage(browser, tabid) {
       }
       if (activeTargetId) {
         for (const target of pageTargets) {
-          const tid = typeof target._getTargetInfo === "function" ? target._getTargetInfo().targetId : target._targetId || target.targetId || "";
-          if (tid === activeTargetId) {
+          if (getTargetIdFromTarget(target) === activeTargetId) {
             targetPage = await target.page();
             break;
           }
@@ -452,7 +480,7 @@ async function stateCommand({ tabid }) {
       };
     });
     const pages = await browser.pages();
-    const tabs = await Promise.all(pages.map(async (p) => {
+    const tabs2 = await Promise.all(pages.map(async (p) => {
       const pUrl = p.url();
       if (pUrl.startsWith("devtools://")) return null;
       const pTitle = await Promise.race([
@@ -468,7 +496,7 @@ async function stateCommand({ tabid }) {
     }));
     return {
       ...state,
-      tabs: tabs.filter(Boolean)
+      tabs: tabs2.filter(Boolean)
     };
   } finally {
     await browser.disconnect();
@@ -509,56 +537,110 @@ async function runCommand({
   }
 }
 
-// src/commands/open.ts
-var import_picocolors2 = __toESM(require("picocolors"), 1);
-async function openCommand(url, { tabid, newTab }) {
+// src/commands/tabs.ts
+function normalizeUrl(url) {
+  if (!url.startsWith("http://") && !url.startsWith("https://")) {
+    return "https://" + url;
+  }
+  return url;
+}
+async function tabsOpenCommand(url) {
   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();
-      }
+    const page = await browser.newPage();
+    url = normalizeUrl(url);
+    await page.goto(url, { waitUntil: "domcontentloaded" });
+    await injectIntoPage(page);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    return {
+      success: true,
+      tabid: await getPageTargetId(page),
+      url: page.url(),
+      title: await page.title()
+    };
+  } finally {
+    await browser.disconnect();
+  }
+}
+async function tabsCloseCommand(tabid) {
+  const browser = await connectBrowser();
+  try {
+    const target = findPageTargetByTabId(browser, tabid);
+    if (!target) {
+      throw new Error(`Tab with targetId "${tabid}" not found.`);
     }
-    if (!url.startsWith("http://") && !url.startsWith("https://")) {
-      url = "https://" + url;
+    const page = await target.page();
+    if (!page) {
+      throw new Error(`Tab with targetId "${tabid}" not found.`);
+    }
+    const closedTabid = await getPageTargetId(page).catch(() => tabid);
+    await page.close();
+    return {
+      success: true,
+      tabid: closedTabid
+    };
+  } finally {
+    await browser.disconnect();
+  }
+}
+async function tabsSwitchCommand(tabid) {
+  const browser = await connectBrowser();
+  try {
+    await activateTabById(browser, tabid);
+    const page = await getTargetPage(browser, tabid);
+    return {
+      success: true,
+      tabid: await getPageTargetId(page),
+      url: page.url(),
+      title: await page.title()
+    };
+  } finally {
+    await browser.disconnect();
+  }
+}
+async function tabsBackCommand(tabid) {
+  const browser = await connectBrowser();
+  try {
+    const page = await getTargetPage(browser, tabid);
+    const response = await page.goBack();
+    if (!response) {
+      return {
+        success: false,
+        error: "\u65E0\u6CD5\u540E\u9000\uFF1A\u5DF2\u5728\u5386\u53F2\u8BB0\u5F55\u8D77\u70B9",
+        tabid: await getPageTargetId(page).catch(() => tabid),
+        url: page.url(),
+        title: await page.title()
+      };
     }
-    console.log(import_picocolors2.default.cyan(`\u6B63\u5728\u6253\u5F00: ${url}`));
-    await page.goto(url, { waitUntil: "domcontentloaded" });
     await injectIntoPage(page);
     return {
       success: true,
+      tabid: await getPageTargetId(page),
+      url: page.url(),
+      title: await page.title()
+    };
+  } finally {
+    await browser.disconnect();
+  }
+}
+async function tabsForwardCommand(tabid) {
+  const browser = await connectBrowser();
+  try {
+    const page = await getTargetPage(browser, tabid);
+    const response = await page.goForward();
+    if (!response) {
+      return {
+        success: false,
+        error: "\u65E0\u6CD5\u524D\u8FDB\uFF1A\u5DF2\u5728\u5386\u53F2\u8BB0\u5F55\u672B\u5C3E",
+        tabid: await getPageTargetId(page).catch(() => tabid),
+        url: page.url(),
+        title: await page.title()
+      };
+    }
+    await injectIntoPage(page);
+    return {
+      success: true,
+      tabid: await getPageTargetId(page),
       url: page.url(),
       title: await page.title()
     };
@@ -567,13 +649,71 @@ async function openCommand(url, { tabid, newTab }) {
   }
 }
 
+// package.json
+var package_default = {
+  name: "@opentiny/webmcp-cli",
+  version: "0.0.1-alpha.2",
+  type: "module",
+  description: "WebMCP CLI for AI Agents to interact with browser via Puppeteer",
+  main: "dist/index.js",
+  types: "dist/index.d.ts",
+  bin: {
+    "webmcp-cli": "./dist/bin.js"
+  },
+  files: [
+    "dist",
+    "README.md"
+  ],
+  scripts: {
+    dev: "tsup --watch",
+    "build:inject": "node scripts/build-inject.mjs",
+    build: "tsup && pnpm run build:inject",
+    prepublishOnly: "pnpm run build",
+    "link:global": "npm install -g .",
+    start: "node dist/bin.js"
+  },
+  keywords: [
+    "chrome",
+    "puppeteer",
+    "cli"
+  ],
+  license: "MIT",
+  author: "OpenTiny Team",
+  engines: {
+    node: ">=16"
+  },
+  publishConfig: {
+    access: "public"
+  },
+  dependencies: {
+    "@mcp-b/webmcp-polyfill": "catalog:",
+    "@opentiny/next-sdk": "workspace:^",
+    "@page-agent/page-controller": "catalog:",
+    commander: "^11.1.0",
+    picocolors: "^1.0.0",
+    "puppeteer-core": "^22.0.0"
+  },
+  devDependencies: {
+    "@types/node": "^20.0.0",
+    esbuild: "^0.25.0",
+    tsup: "^8.0.2",
+    tsx: "^4.0.0",
+    typescript: "^5.3.3"
+  }
+};
+
 // 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) => {
+function handleCommandError(error, commandName) {
+  const msg = error instanceof Error ? error.message : String(error);
+  console.error(import_picocolors2.default.red(`Error executing ${commandName} command: ${msg}`));
+  process.exit(1);
+}
+program.name("webmcp-cli").description("WebMCP CLI for interacting with browser via CDP").version(package_default.version).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;
@@ -584,9 +724,7 @@ program.command("state").description("\u83B7\u53D6\u6D4F\u89C8\u5668\u5F53\u524D
     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);
+    handleCommandError(error, "state");
   }
 });
 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) => {
@@ -598,22 +736,48 @@ program.command("run <toolName> <argsJson>").description("\u5411\u6307\u5B9A\u98
     });
     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);
+    handleCommandError(error, "run");
   }
 });
-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) => {
+var tabs = program.command("tabs").description("\u7BA1\u7406\u6D4F\u89C8\u5668\u6807\u7B7E\u9875");
+tabs.command("open <url>").description("\u6253\u5F00\u65B0\u7F51\u9875").action(async (url) => {
   try {
-    const result = await openCommand(url, {
-      tabid: parseTabId(options.tabid),
-      newTab: options.newTab
-    });
+    const result = await tabsOpenCommand(url);
+    console.log(JSON.stringify(result, null, 2));
+  } catch (error) {
+    handleCommandError(error, "tabs open");
+  }
+});
+tabs.command("close <tabid>").description("\u5173\u95ED\u6307\u5B9A tabid \u7684\u6807\u7B7E\u9875").action(async (tabid) => {
+  try {
+    const result = await tabsCloseCommand(tabid);
+    console.log(JSON.stringify(result, null, 2));
+  } catch (error) {
+    handleCommandError(error, "tabs close");
+  }
+});
+tabs.command("switch <tabid>").description("\u6FC0\u6D3B\u5E76\u5207\u6362\u5230\u6307\u5B9A tabid \u7684\u6807\u7B7E\u9875").action(async (tabid) => {
+  try {
+    const result = await tabsSwitchCommand(tabid);
+    console.log(JSON.stringify(result, null, 2));
+  } catch (error) {
+    handleCommandError(error, "tabs switch");
+  }
+});
+tabs.command("back [tabid]").description("\u5C06\u5F53\u524D\u6216\u6307\u5B9A\u6807\u7B7E\u9875\u5BFC\u822A\u540E\u9000\u4E00\u6B65").action(async (tabid) => {
+  try {
+    const result = await tabsBackCommand(parseTabId(tabid));
+    console.log(JSON.stringify(result, null, 2));
+  } catch (error) {
+    handleCommandError(error, "tabs back");
+  }
+});
+tabs.command("forward [tabid]").description("\u5C06\u5F53\u524D\u6216\u6307\u5B9A\u6807\u7B7E\u9875\u5BFC\u822A\u524D\u8FDB\u4E00\u6B65").action(async (tabid) => {
+  try {
+    const result = await tabsForwardCommand(parseTabId(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 open command: ${msg}`));
-    process.exit(1);
+    handleCommandError(error, "tabs forward");
   }
 });
 program.parse(process.argv);