hyper-agent-browser 0.3.0 → 0.3.2

package/README.md

@@ -204,11 +204,12 @@ hyper-agent-browser 专为 AI Agent 设计，可与 Claude Code 无缝集成。
 
 ```bash
 # 方法 1：从本地仓库复制
-mkdir -p ~/.claude/skills
-cp skills/hyper-browser.md ~/.claude/skills/
+mkdir -p ~/.claude/skills/hyper-agent-browser
+cp skills/hyper-browser.md ~/.claude/skills/hyper-agent-browser/skill.md
 
 # 方法 2：直接下载
-curl -o ~/.claude/skills/hyper-browser.md \
+mkdir -p ~/.claude/skills/hyper-agent-browser
+curl -o ~/.claude/skills/hyper-agent-browser/skill.md \
   https://raw.githubusercontent.com/hubo1989/hyper-agent-browser/main/skills/hyper-browser.md
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyper-agent-browser",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Pure browser automation CLI for AI Agents - 纯浏览器自动化 CLI，专为 AI Agent 设计",
   "type": "module",
   "main": "src/cli.ts",

package/src/browser/manager.ts

@@ -149,14 +149,23 @@ export class BrowserManager {
       }
 
       // Use launchPersistentContext for UserData persistence
-      this.context = await chromium.launchPersistentContext(this.session.userDataDir, {
+      // 给启动加上超时保护（15秒）
+      const launchPromise = chromium.launchPersistentContext(this.session.userDataDir, {
         channel: this.options.channel,
         headless: !this.options.headed,
         args: launchArgs,
         ignoreDefaultArgs: ignoreArgs,
         viewport: { width: 1280, height: 720 },
+        timeout: 15000, // 15秒启动超时
       });
 
+      this.context = await Promise.race([
+        launchPromise,
+        new Promise<never>((_, reject) =>
+          setTimeout(() => reject(new Error("Browser launch timeout (15s)")), 15000),
+        ),
+      ]);
+
       // Extract browser from context
       // @ts-ignore - context has _browser property
       this.browser = this.context._browser;
@@ -334,6 +343,22 @@ export class BrowserManager {
       // 重新连接
       await this.connect();
     }
+
+    // 确保返回当前活动页面（可能有多个页面时需要获取最新的）
+    if (this.context) {
+      const pages = this.context.pages();
+      if (pages.length > 0) {
+        // 优先返回非 about:blank 的页面
+        const activePage = pages.find((p) => p.url() !== "about:blank") || pages[pages.length - 1];
+        if (activePage !== this.page) {
+          this.page = activePage;
+          if (this.options.timeout) {
+            this.page.setDefaultTimeout(this.options.timeout);
+          }
+        }
+      }
+    }
+
     return this.page!;
   }
 
@@ -353,7 +378,30 @@ export class BrowserManager {
 
   async close(): Promise<void> {
     if (this.browser) {
-      await this.browser.close();
+      // 获取 PID 以便超时后强制 kill
+      const pid = this.getPid();
+
+      try {
+        // 给 close 操作 5 秒超时
+        await Promise.race([
+          this.browser.close(),
+          new Promise((_, reject) =>
+            setTimeout(() => reject(new Error("Browser close timeout")), 5000),
+          ),
+        ]);
+      } catch (error) {
+        console.log("Browser close failed or timed out, forcing cleanup...");
+        // 强制 kill 进程
+        if (pid) {
+          try {
+            process.kill(pid, "SIGKILL");
+            console.log(`Force killed browser process (PID: ${pid})`);
+          } catch {
+            // 进程可能已经退出
+          }
+        }
+      }
+
       this.browser = null;
       this.context = null;
       this.page = null;

package/src/cli.ts

@@ -747,7 +747,7 @@ program
   .command("version")
   .description("Show version information")
   .action(() => {
-    console.log("hyper-agent-browser v0.2.0 (with daemon architecture)");
+    console.log("hyper-agent-browser v0.3.1 (with daemon architecture)");
     console.log(`Bun v${Bun.version}`);
     console.log("Patchright v1.55.1");
   });

package/src/commands/actions.ts

@@ -43,7 +43,42 @@ async function getLocator(page: Page, selector: string): Promise<Locator> {
 
 export async function click(page: Page, selector: string): Promise<void> {
   const locator = await getLocator(page, selector);
-  await locator.click();
+
+  // 先尝试正常点击
+  try {
+    await locator.click({ timeout: 5000 });
+  } catch (error) {
+    // 如果被遮罩拦截，逐级降级
+    if (error instanceof Error && error.message.includes("intercepts pointer events")) {
+      console.log("Element intercepted, trying force click...");
+      try {
+        await locator.click({ force: true, timeout: 5000 });
+      } catch {
+        // force click 失败，使用完整鼠标事件序列（兼容 React 等框架）
+        console.log("Force click failed, using mouse event sequence...");
+        await locator.evaluate((el: HTMLElement) => {
+          const rect = el.getBoundingClientRect();
+          const x = rect.left + rect.width / 2;
+          const y = rect.top + rect.height / 2;
+
+          // 模拟完整鼠标事件序列
+          for (const type of ["mousedown", "mouseup", "click"]) {
+            el.dispatchEvent(
+              new MouseEvent(type, {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+                clientX: x,
+                clientY: y,
+              }),
+            );
+          }
+        });
+      }
+    } else {
+      throw error;
+    }
+  }
 }
 
 export async function fill(page: Page, selector: string, value: string): Promise<void> {

package/src/daemon/browser-pool.ts

@@ -2,55 +2,95 @@ import { BrowserManager } from "../browser/manager";
 import type { BrowserManagerOptions } from "../browser/manager";
 import type { Session } from "../session/store";
 
+interface CachedBrowser {
+  manager: BrowserManager;
+  options: BrowserManagerOptions;
+}
+
 /**
  * BrowserPool 管理多个 Session 的浏览器实例
  */
 export class BrowserPool {
-  private browsers: Map<string, BrowserManager> = new Map();
+  private browsers: Map<string, CachedBrowser> = new Map();
 
   async get(session: Session, options: BrowserManagerOptions = {}): Promise<BrowserManager> {
     const key = session.name;
 
     if (this.browsers.has(key)) {
-      const browser = this.browsers.get(key)!;
-
-      // 检查浏览器是否还连接
-      if (browser.isConnected()) {
+      const cached = this.browsers.get(key)!;
+      const browser = cached.manager;
+
+      // 检查选项是否一致（特别是 headed 模式）
+      const optionsMismatch = this.hasOptionsMismatch(cached.options, options);
+
+      if (optionsMismatch) {
+        console.log(
+          `Options mismatch for session ${key} (headed: ${cached.options.headed} -> ${options.headed}), recreating browser`,
+        );
+        try {
+          await browser.close();
+        } catch (error) {
+          console.error("Error closing browser for options change:", error);
+        }
+        this.browsers.delete(key);
+        // 继续创建新的浏览器实例
+      } else if (browser.isConnected()) {
+        // 选项一致且浏览器已连接，直接返回
         return browser;
-      }
-
-      // 浏览器断开连接，尝试重连
-      try {
-        await browser.connect();
-        if (browser.isConnected()) {
-          return browser;
+      } else {
+        // 浏览器断开连接，尝试重连
+        try {
+          await browser.connect();
+          if (browser.isConnected()) {
+            return browser;
+          }
+        } catch (error) {
+          console.error(`Failed to reconnect browser for session ${key}:`, error);
         }
-      } catch (error) {
-        console.error(`Failed to reconnect browser for session ${key}:`, error);
-      }
 
-      // 重连失败，移除旧实例并创建新的
-      console.log(`Removing stale browser instance for session ${key}`);
-      this.browsers.delete(key);
+        // 重连失败，移除旧实例并创建新的
+        console.log(`Removing stale browser instance for session ${key}`);
+        this.browsers.delete(key);
+      }
     }
 
     // 创建新的浏览器实例
-    console.log(`Creating new browser instance for session ${key}`);
+    console.log(
+      `Creating new browser instance for session ${key} (headed: ${options.headed ?? false})`,
+    );
     const browser = new BrowserManager(session, options);
     await browser.connect();
-    this.browsers.set(key, browser);
+    this.browsers.set(key, { manager: browser, options: { ...options } });
 
     return browser;
   }
 
+  /**
+   * 检查选项是否有重要变化需要重建浏览器
+   */
+  private hasOptionsMismatch(
+    cached: BrowserManagerOptions,
+    requested: BrowserManagerOptions,
+  ): boolean {
+    // headed 模式变化需要重建浏览器
+    if ((cached.headed ?? false) !== (requested.headed ?? false)) {
+      return true;
+    }
+    // channel 变化也需要重建
+    if (cached.channel && requested.channel && cached.channel !== requested.channel) {
+      return true;
+    }
+    return false;
+  }
+
   async close(sessionName: string): Promise<boolean> {
-    const browser = this.browsers.get(sessionName);
-    if (!browser) {
+    const cached = this.browsers.get(sessionName);
+    if (!cached) {
       return false;
     }
 
     try {
-      await browser.close();
+      await cached.manager.close();
     } catch (error) {
       console.error(`Error closing browser for session ${sessionName}:`, error);
     }
@@ -59,9 +99,9 @@ export class BrowserPool {
   }
 
   async closeAll(): Promise<void> {
-    const closePromises = Array.from(this.browsers.entries()).map(async ([name, browser]) => {
+    const closePromises = Array.from(this.browsers.entries()).map(async ([name, cached]) => {
       try {
-        await browser.close();
+        await cached.manager.close();
       } catch (error) {
         console.error(`Error closing browser for session ${name}:`, error);
       }
@@ -84,8 +124,8 @@ export class BrowserPool {
   async cleanup(): Promise<void> {
     const toRemove: string[] = [];
 
-    for (const [name, browser] of this.browsers.entries()) {
-      if (!browser.isConnected()) {
+    for (const [name, cached] of this.browsers.entries()) {
+      if (!cached.manager.isConnected()) {
         toRemove.push(name);
       }
     }

package/src/snapshot/dom-extractor.ts

@@ -101,30 +101,43 @@ export class DomSnapshotExtractor {
         // Try ID first
         if (el.id) return `#${el.id}`;
 
-        // Generate nth-child selector
-        let selector = el.tagName.toLowerCase();
+        // Build path from element to root (or an element with ID)
+        const path: string[] = [];
         let current: Element | null = el;
 
-        while (current?.parentElement) {
-          const parent: Element = current.parentElement;
-          const siblings = Array.from(parent.children);
-          const index = siblings.indexOf(current);
-
-          if (index >= 0) {
-            selector = `${parent.tagName.toLowerCase()} > ${selector}:nth-child(${index + 1})`;
+        while (current && current !== document.body && path.length < 6) {
+          const parentEl: Element | null = current.parentElement;
+          if (!parentEl) break;
+
+          // Find index among siblings of same tag type
+          const currentTag = current.tagName;
+          const siblings: Element[] = [];
+          for (let i = 0; i < parentEl.children.length; i++) {
+            const child = parentEl.children[i];
+            if (child.tagName === currentTag) {
+              siblings.push(child);
+            }
           }
+          const index = siblings.indexOf(current) + 1;
+
+          // Use nth-of-type for uniqueness among same-tag siblings
+          const segment =
+            siblings.length > 1
+              ? `${current.tagName.toLowerCase()}:nth-of-type(${index})`
+              : current.tagName.toLowerCase();
+
+          path.unshift(segment);
 
-          current = parent;
-          if (current?.id) {
-            selector = `#${current.id} ${selector}`;
+          // Stop if parent has ID
+          if (parentEl.id) {
+            path.unshift(`#${parentEl.id}`);
             break;
           }
 
-          // Limit depth
-          if (selector.split(">").length > 5) break;
+          current = parentEl;
         }
 
-        return selector;
+        return path.join(" > ");
       }
 
       // Traverse DOM