@taole/dd-playwright 0.0.0-stage → 0.1.0

package/src/browser-manager.mjs

@@ -0,0 +1,516 @@
+/**
+ * Playwright 浏览器管理器：自动挂载点点账号 storageState，托管隔离 whistle 代理。
+ */
+import { existsSync, mkdirSync, readFileSync } from "node:fs";
+import { DatabaseSync } from "node:sqlite";
+import { join } from "node:path";
+import { chromium } from "playwright";
+import { WhistleProxyManager } from "./whistle-proxy.mjs";
+
+/**
+ * 从账号库或文件加载指定账号或激活账号的 storageState。
+ * 优先级：
+ *   1. anonymous === true -> null
+ *   2. uid 显式指定 -> 查询该 uid 账号的 storageState（不存在则报错）
+ *   3. 显式 storageStateFile -> 读取该文件
+ *   4. SQLite 中 is_active = 1 的账号
+ *   5. null（无登录态）
+ * @param {{dbPath: string, storageStateFile?: string|null, uid?: string|null, anonymous?: boolean}} options
+ */
+export function resolveStorageState({
+  dbPath,
+  storageStateFile,
+  uid,
+  anonymous = false,
+}) {
+  if (anonymous) return null;
+
+  if (uid) {
+    if (!existsSync(dbPath)) {
+      throw new Error(`无法按 UID [${uid}] 加载账号：数据库文件不存在 (${dbPath})`);
+    }
+    const db = new DatabaseSync(dbPath, { readOnly: true });
+    try {
+      const row = db
+        .prepare(
+          "SELECT account_id, nickname, storage_state FROM diandian_accounts WHERE account_id = ?",
+        )
+        .get(String(uid));
+      if (!row || !row.storage_state) {
+        throw new Error(`未找到 UID 为 [${uid}] 的点点账号`);
+      }
+      return JSON.parse(row.storage_state);
+    } finally {
+      db.close();
+    }
+  }
+
+  if (storageStateFile) {
+    if (!existsSync(storageStateFile)) {
+      throw new Error(
+        `BROWSER_MCP_STORAGE_STATE 指向的文件不存在: ${storageStateFile}`,
+      );
+    }
+    return JSON.parse(readFileSync(storageStateFile, "utf8"));
+  }
+
+  if (!existsSync(dbPath)) return null;
+  try {
+    const db = new DatabaseSync(dbPath, { readOnly: true });
+    try {
+      const row = db
+        .prepare(
+          "SELECT storage_state FROM diandian_accounts WHERE is_active = 1 LIMIT 1",
+        )
+        .get();
+      if (!row || !row.storage_state) return null;
+      try {
+        return JSON.parse(row.storage_state);
+      } catch {
+        return null;
+      }
+    } finally {
+      db.close();
+    }
+  } catch {
+    return null;
+  }
+}
+
+export function loadActiveStorageState(config) {
+  return resolveStorageState(config);
+}
+export class PlaywrightBrowserManager {
+  /**
+   * @param {object} options
+   * @param {string} options.screenshotsDir 截图落盘根目录
+   * @param {RegExp} options.domainRegex 代理规则允许的域名白名单
+   * @param {boolean} [options.headless]
+   * @param {string} [options.dbPath]
+   * @param {string|null} [options.storageStateFile]
+   * @param {object} [options.storageState] 直接注入，跳过自动加载
+   */
+  constructor({
+    screenshotsDir,
+    domainRegex,
+    headless = true,
+    dbPath,
+    storageStateFile = null,
+    storageState,
+  } = {}) {
+    this.headless = headless;
+    this.screenshotsDir = screenshotsDir;
+    this.dbPath = dbPath;
+    this.storageStateFile = storageStateFile;
+    this.customStorageState = storageState;
+    this.storageState =
+      storageState !== undefined
+        ? storageState
+        : resolveStorageState({ dbPath, storageStateFile });
+    this.currentUid = null;
+    this.isAnonymous = false;
+    this.browser = null;
+    this.context = null;
+    this.page = null;
+    this.consoleErrors = [];
+    this.whistle = new WhistleProxyManager({ domainRegex });
+    this.proxyRule = null; // { domain, port, protocol, url, rule }
+  }
+  get hasAuth() {
+    return Boolean(this.storageState);
+  }
+
+  async ensureProxy() {
+    if (!this.whistle.started) {
+      await this.whistle.start();
+    }
+    return this.whistle;
+  }
+
+  /**
+   * 声明域名映射：把本地 dev server 映射到干净域名。
+   * @param {{domain: string, port: number, protocol?: "http"|"https"}} params
+   */
+  async setProxyRule({ domain, port, protocol = "http" }) {
+    const whistle = await this.ensureProxy();
+    const { url, rule } = await whistle.setRule(domain, port, protocol);
+    this.proxyRule = { domain, port, protocol, url, rule };
+    // 已有浏览器需要重启才能加载新规则；代理保持运行
+    await this._closeBrowserOnly();
+    return this.proxyRule;
+  }
+
+  /**
+   * 根据指定的 uid 或 anonymous 状态准备浏览器上下文。
+   * @param {{uid?: string|null, anonymous?: boolean}} [authOptions]
+   */
+  async ensurePage({ uid = null, anonymous = false } = {}) {
+    const targetAnonymous = Boolean(anonymous);
+    const targetUid = targetAnonymous ? null : (uid ? String(uid) : null);
+
+    // 检查是否需要重建上下文（当前模式与目标不一致）
+    const authChanged =
+      this.isAnonymous !== targetAnonymous ||
+      (targetUid !== null && this.currentUid !== targetUid) ||
+      (targetUid === null && this.currentUid !== null && !targetAnonymous);
+
+    if (authChanged && this.context) {
+      if (this.page && !this.page.isClosed()) {
+        await this.page.close().catch(() => {});
+        this.page = null;
+      }
+      await this.context.close().catch(() => {});
+      this.context = null;
+    }
+
+    if (!this.browser) {
+      const launchArgs = this.whistle.started ? this.whistle.getBrowserArgs() : [];
+      this.browser = await chromium.launch({
+        headless: this.headless,
+        args: launchArgs,
+      });
+    }
+
+    if (!this.context) {
+      let state = null;
+      if (targetAnonymous) {
+        state = null;
+      } else if (targetUid) {
+        state = resolveStorageState({
+          dbPath: this.dbPath,
+          uid: targetUid,
+        });
+      } else if (this.customStorageState !== undefined) {
+        state = this.customStorageState;
+      } else {
+        state = resolveStorageState({
+          dbPath: this.dbPath,
+          storageStateFile: this.storageStateFile,
+        });
+      }
+
+      this.storageState = state;
+      this.currentUid = targetUid;
+      this.isAnonymous = targetAnonymous;
+
+      const contextOptions = {
+        viewport: { width: 1280, height: 800 },
+      };
+      if (state) {
+        contextOptions.storageState = state;
+      }
+      if (this.whistle.started) {
+        contextOptions.ignoreHTTPSErrors = true;
+      }
+      this.context = await this.browser.newContext(contextOptions);
+    }
+
+    if (!this.page || this.page.isClosed()) {
+      this.page = await this.context.newPage();
+      this.consoleErrors = [];
+
+      this.page.on("console", (msg) => {
+        if (msg.type() === "error") {
+          this.consoleErrors.push({
+            type: "console.error",
+            text: msg.text(),
+            location: msg.location(),
+            timestamp: new Date().toISOString(),
+          });
+        }
+      });
+
+      this.page.on("pageerror", (err) => {
+        this.consoleErrors.push({
+          type: "uncaught.error",
+          text: err.message,
+          stack: err.stack,
+          timestamp: new Date().toISOString(),
+        });
+      });
+    }
+
+    return this.page;
+  }
+
+  async navigate({ url, waitFor, timeout = 15000, uid, anonymous = false }) {
+    const page = await this.ensurePage({ uid, anonymous });
+    const response = await page.goto(url, {
+      timeout,
+      waitUntil: "domcontentloaded",
+    });
+
+    if (waitFor) {
+      await page.waitForSelector(waitFor, { timeout });
+    }
+
+    const title = await page.title();
+    const status = response ? response.status() : 200;
+    return {
+      status,
+      title,
+      url: page.url(),
+      hasErrors: this.consoleErrors.length > 0,
+      errorCount: this.consoleErrors.length,
+    };
+  }
+
+  async screenshot({ selector, fullPage = false } = {}) {
+    const page = await this.ensurePage();
+    const dir = this.screenshotsDir;
+    mkdirSync(dir, { recursive: true });
+    const filename = `screenshot-${Date.now()}-${Math.random()
+      .toString(36)
+      .slice(2, 8)}.png`;
+    const outputPath = join(dir, filename);
+
+    if (selector) {
+      const locator = page.locator(selector).first();
+      await locator.screenshot({ path: outputPath });
+    } else {
+      await page.screenshot({ path: outputPath, fullPage: Boolean(fullPage) });
+    }
+
+    return {
+      outputPath,
+      fullPage: Boolean(fullPage),
+      selector: selector || null,
+    };
+  }
+
+  getConsoleErrors() {
+    return {
+      total: this.consoleErrors.length,
+      errors: [...this.consoleErrors],
+    };
+  }
+
+  async clickElement({ selector, timeout = 10000 }) {
+    const page = await this.ensurePage();
+    const locator = page.locator(selector).first();
+    await locator.click({ timeout });
+    return {
+      clicked: true,
+      selector,
+      url: page.url(),
+    };
+  }
+  async fillText({ selector, text, timeout = 10000 }) {
+    const page = await this.ensurePage();
+    const locator = page.locator(selector).first();
+    await locator.fill(String(text), { timeout });
+    return {
+      filled: true,
+      selector,
+      text: String(text),
+      url: page.url(),
+    };
+  }
+
+  async pressKey({ key, selector, timeout = 10000 }) {
+    const page = await this.ensurePage();
+    if (selector) {
+      const locator = page.locator(selector).first();
+      await locator.press(key, { timeout });
+    } else {
+      await page.keyboard.press(key);
+    }
+    return {
+      pressed: true,
+      key,
+      selector: selector || null,
+      url: page.url(),
+    };
+  }
+
+  async hover({ selector, timeout = 10000 }) {
+    const page = await this.ensurePage();
+    const locator = page.locator(selector).first();
+    await locator.hover({ timeout });
+    return {
+      hovered: true,
+      selector,
+      url: page.url(),
+    };
+  }
+
+  async scroll({ direction = "down", deltaY, selector } = {}) {
+    const page = await this.ensurePage();
+    if (selector) {
+      const locator = page.locator(selector).first();
+      await locator.scrollIntoViewIfNeeded();
+      return {
+        scrolled: true,
+        selector,
+        url: page.url(),
+      };
+    }
+
+    const distance =
+      typeof deltaY === "number"
+        ? deltaY
+        : direction === "up"
+          ? -600
+          : 600;
+    await page.mouse.wheel(0, distance);
+    await page.waitForTimeout(200);
+    return {
+      scrolled: true,
+      deltaY: distance,
+      url: page.url(),
+    };
+  }
+
+  async waitFor({ selector, state = "visible", timeout = 15000 }) {
+    const page = await this.ensurePage();
+    if (selector) {
+      await page.waitForSelector(selector, { state, timeout });
+      return {
+        waited: true,
+        selector,
+        state,
+        url: page.url(),
+      };
+    }
+    await page.waitForLoadState(state === "visible" ? "load" : state, { timeout });
+    return {
+      waited: true,
+      state,
+      url: page.url(),
+    };
+  }
+
+  async getDom({ interactiveOnly = true, maxDepth = 10 } = {}) {
+    const page = await this.ensurePage();
+    const snapshot = await page.evaluate(
+      ({ onlyInteractive, maxD }) => {
+        function isVisible(el) {
+          if (!el || el.nodeType !== 1) return false;
+          const style = window.getComputedStyle(el);
+          if (
+            style.display === "none" ||
+            style.visibility === "hidden" ||
+            style.opacity === "0"
+          )
+            return false;
+          const rect = el.getBoundingClientRect();
+          return rect.width > 0 && rect.height > 0;
+        }
+
+        function buildSelector(el) {
+          if (el.id) return `#${el.id}`;
+          let path = el.tagName.toLowerCase();
+          if (el.className && typeof el.className === "string") {
+            const classes = el.className
+              .trim()
+              .split(/\s+/)
+              .filter((c) => c && !c.includes(":") && !c.includes("/"))
+              .slice(0, 2);
+            if (classes.length) path += `.${classes.join(".")}`;
+          }
+          return path;
+        }
+
+        const interactiveTags = new Set([
+          "A",
+          "BUTTON",
+          "INPUT",
+          "SELECT",
+          "TEXTAREA",
+          "DETAILS",
+          "SUMMARY",
+        ]);
+
+        function extract(el, depth = 0) {
+          if (depth > maxD || !isVisible(el)) return null;
+          const tag = el.tagName;
+          const isInteractive =
+            interactiveTags.has(tag) ||
+            el.getAttribute("role") === "button" ||
+            el.onclick != null ||
+            el.hasAttribute("tabindex");
+
+          const text =
+            el.children.length === 0 ? (el.innerText || "").trim().slice(0, 100) : "";
+
+          const children = [];
+          for (const child of el.children) {
+            const childRes = extract(child, depth + 1);
+            if (childRes) {
+              if (Array.isArray(childRes)) children.push(...childRes);
+              else children.push(childRes);
+            }
+          }
+
+          if (onlyInteractive) {
+            if (isInteractive) {
+              return {
+                tag: tag.toLowerCase(),
+                selector: buildSelector(el),
+                text: text || el.getAttribute("aria-label") || el.getAttribute("placeholder") || "",
+                id: el.id || undefined,
+                role: el.getAttribute("role") || undefined,
+                type: el.getAttribute("type") || undefined,
+                children: children.length ? children : undefined,
+              };
+            }
+            return children.length ? children : null;
+          }
+
+          return {
+            tag: tag.toLowerCase(),
+            selector: buildSelector(el),
+            text: text || undefined,
+            children: children.length ? children : undefined,
+          };
+        }
+
+        return {
+          title: document.title,
+          url: window.location.href,
+          elements: extract(document.body) || [],
+        };
+      },
+      { onlyInteractive: Boolean(interactiveOnly), maxD: maxDepth },
+    );
+
+    return snapshot;
+  }
+
+  async evalJs({ script }) {
+    const page = await this.ensurePage();
+    const result = await page.evaluate((code) => {
+      // eslint-disable-next-line no-eval
+      return window.eval(code);
+    }, script);
+    return {
+      result,
+    };
+  }
+
+  async _closeBrowserOnly() {
+    if (this.page && !this.page.isClosed()) {
+      try {
+        await this.page.close();
+      } catch {}
+      this.page = null;
+    }
+    if (this.context) {
+      try {
+        await this.context.close();
+      } catch {}
+      this.context = null;
+    }
+    if (this.browser) {
+      try {
+        await this.browser.close();
+      } catch {}
+      this.browser = null;
+    }
+  }
+
+  async close() {
+    await this._closeBrowserOnly();
+    await this.whistle.close();
+  }
+}

package/src/config.mjs

@@ -0,0 +1,61 @@
+/**
+ * 环境配置解析。所有配置均来自环境变量，无项目目录约定。
+ */
+import { homedir } from "node:os";
+import { join, resolve } from "node:path";
+import { existsSync } from "node:fs";
+import { DatabaseSync } from "node:sqlite";
+
+export const DEFAULT_DOMAIN_SUFFIX = "tuwan.com";
+
+/**
+ * @param {NodeJS.ProcessEnv} [env]
+ */
+export function resolveConfig(env = process.env) {
+  // 数据目录固定为默认值 ~/.dd-browser-mcp，无需环境变量覆盖
+  const dataDir = resolve(join(homedir(), ".dd-browser-mcp"));
+  const dbPath = join(dataDir, "runtime.db");
+
+  const domainSuffix = (
+    env.BROWSER_MCP_DOMAIN_SUFFIX || DEFAULT_DOMAIN_SUFFIX
+  ).trim().toLowerCase();
+
+  // 优先从 SQLite 库读取 Web 控制台设置的 headless 开关，默认 true
+  let headless = true;
+  if (existsSync(dbPath)) {
+    try {
+      const db = new DatabaseSync(dbPath, { readOnly: true });
+      try {
+        const row = db
+          .prepare("SELECT value FROM app_settings WHERE key = 'headless'")
+          .get();
+        if (row && row.value !== undefined) {
+          headless = JSON.parse(row.value);
+        }
+      } finally {
+        db.close();
+      }
+    } catch {}
+  }
+  return {
+    dataDir,
+    dbPath,
+    screenshotsDir: join(dataDir, "screenshots"),
+    webPidFile: join(dataDir, "web.pid"),
+    webLogFile: join(dataDir, "web.log"),
+    domainSuffix,
+    domainRegex: buildDomainRegex(domainSuffix),
+    headless,
+    storageStateFile: env.BROWSER_MCP_STORAGE_STATE?.trim() || null,
+  };
+}
+
+/**
+ * 由域名后缀构造子域名匹配正则（等价原 TUWAN_DOMAIN_RE 的泛化版）。
+ * @param {string} suffix 如 "tuwan.com"
+ */
+export function buildDomainRegex(suffix) {
+  const label = "[a-z0-9](?:[a-z0-9-]*[a-z0-9])?";
+  const escaped = suffix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`^(?:${label}\\.)*${escaped}$`, "i");
+}