openclaw.workspace/code-generate/download-agent-browser-v2.mjs

#!/usr/bin/env node
/**
 * 使用 Playwright 从 clawhub.com 下载 agent-browser skill - v2
 * 增加等待时间和 JavaScript 交互
 */

import { chromium } from 'playwright';
import fs from 'fs';
import path from 'path';

async function downloadAgentBrowser() {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
  });
  const page = await context.newPage();

  try {
    // 访问 clawhub.com 的 agent-browser 页面
    const url = 'https://clawhub.com/skill/agent-browser';
    console.log(`🌐 正在访问: ${url}`);
    
    // 先访问，然后等待更长时间
    await page.goto(url, { waitUntil: 'networkidle', timeout: 60000 });
    
    // 额外等待 5 秒让 JavaScript 加载
    console.log('⏳ 等待页面加载...');
    await page.waitForTimeout(5000);

    // 获取页面标题
    const title = await page.title();
    console.log(`📄 页面标题: ${title}`);

    // 截图保存
    const screenshotPath = path.join(process.cwd(), 'clawhub-page-v2.png');
    await page.screenshot({ path: screenshotPath, fullPage: true });
    console.log(`📸 页面截图已保存: ${screenshotPath}`);

    // 获取完整页面内容
    const content = await page.content();
    const htmlPath = path.join(process.cwd(), 'clawhub-page-v2.html');
    fs.writeFileSync(htmlPath, content);
    console.log(`📄 页面HTML已保存: ${htmlPath}`);

    // 尝试查找页面上的所有文本
    const pageData = await page.evaluate(() => {
      // 查找所有链接
      const links = Array.from(document.querySelectorAll('a[href]')).map(a => ({
        text: a.textContent?.trim() || '',
        href: a.href
      }));
      
      // 查找所有按钮
      const buttons = Array.from(document.querySelectorAll('button')).map(b => ({
        text: b.textContent?.trim() || '',
        onclick: b.getAttribute('onclick')
      }));
      
      // 查找所有代码元素
      const codeElements = Array.from(document.querySelectorAll('code, pre')).map(el => ({
        text: el.textContent?.trim() || '',
        className: el.className,
        tagName: el.tagName
      }));
      
      // 获取所有文本
      const allText = document.body.innerText;
      
      // 查找可能的 API 端点或数据
      const scripts = Array.from(document.querySelectorAll('script')).map(s => ({
        src: s.src,
        content: s.textContent?.substring(0, 500) || ''
      }));
      
      return { links, buttons, codeElements, allText, scripts };
    });

    // 保存页面数据
    const dataPath = path.join(process.cwd(), 'clawhub-data-v2.json');
    fs.writeFileSync(dataPath, JSON.stringify(pageData, null, 2));
    console.log(`📊 页面数据已保存: ${dataPath}`);

    // 输出发现的信息
    console.log('\n🔗 发现的链接:');
    pageData.links.slice(0, 20).forEach(link => {
      if (link.href && link.href.length > 0) {
        console.log(`  - ${link.text || '(无文本)'}: ${link.href}`);
      }
    });

    console.log('\n🔘 发现的按钮:');
    pageData.buttons.forEach(btn => {
      if (btn.text) {
        console.log(`  - ${btn.text}`);
      }
    });

    console.log('\n💻 发现的代码块:');
    pageData.codeElements.slice(0, 5).forEach(code => {
      if (code.text && code.text.length > 0) {
        console.log(`  [${code.tagName}] ${code.text.substring(0, 100)}...`);
      }
    });

    console.log('\n📜 页面文本预览:');
    console.log(pageData.allText.substring(0, 500));

    // 尝试查找并点击"Install"或"Download"按钮
    console.log('\n🖱️  尝试查找安装按钮...');
    const installButton = await page.$('button:has-text("Install"), button:has-text("Download"), a:has-text("Install"), a:has-text("Download")');
    
    if (installButton) {
      console.log('✅ 找到安装按钮！');
      const buttonText = await installButton.textContent();
      console.log(`按钮文本: ${buttonText}`);
      
      // 获取按钮的 href 或 onclick
      const href = await installButton.getAttribute('href');
      const onclick = await installButton.getAttribute('onclick');
      
      if (href) {
        console.log(`链接: ${href}`);
      }
      if (onclick) {
        console.log(`点击事件: ${onclick}`);
      }
    } else {
      console.log('❌ 未找到明显的安装按钮');
    }

    // 尝试查看网络请求，看是否有 API 调用
    console.log('\n🌐 监听网络请求...');
    
    // 记录所有 API 请求
    const apiRequests = [];
    page.on('request', request => {
      if (request.url().includes('/api/') || request.url().includes('skill')) {
        apiRequests.push({
          url: request.url(),
          method: request.method()
        });
      }
    });

    // 刷新页面触发请求
    console.log('🔄 刷新页面以捕获 API 请求...');
    await page.reload({ waitUntil: 'networkidle', timeout: 30000 });
    await page.waitForTimeout(3000);

    console.log('\n📡 捕获的 API 请求:');
    apiRequests.forEach(req => {
      console.log(`  ${req.method} ${req.url}`);
    });

    console.log('\n✅ 任务完成！');
    console.log(`📸 截图: ${screenshotPath}`);
    console.log(`📄 HTML: ${htmlPath}`);
    console.log(`📊 数据: ${dataPath}`);
    
    return {
      success: true,
      title,
      screenshotPath,
      htmlPath,
      dataPath
    };

  } catch (error) {
    console.error(`❌ 访问失败: ${error.message}`);
    return {
      success: false,
      error: error.message
    };
  } finally {
    await browser.close();
  }
}

// 运行
downloadAgentBrowser().then(result => {
  if (result.success) {
    console.log('\n🎉 任务完成！');
    process.exit(0);
  } else {
    console.log('\n❌ 任务失败');
    process.exit(1);
  }
}).catch(error => {
  console.error('Error:', error);
  process.exit(1);
});