📦 Functions — 部署无头浏览器函数
v1.0.0通过官方 bb CLI，引导 Claude 在 Browserbase 平台快速构建、本地调试并一键部署无服务器浏览器自动化函数，实现远程网页抓取、登录与数据提取。
by 详细分析 ▾
运行时依赖
版本
“functions”技能的初始版本发布： - 提供使用官方 bb CLI 部署无服务器浏览器自动化的完整指南。 - 包含入门说明、凭据设置、项目初始化和 .env 配置。 - 详述开发工作流，包括本地开发服务器、测试、自动重载与调试。 - 解释部署、调用（通过 curl 和代码）以及轮询结果。 - 提供常见模式示例：参数化抓取、认证工作流与错误处理。 - 附带 CLI 参考与常见设置和运行时问题的故障排除技巧。
安装命令
点击复制技能文档
# Browserbase Functions 技能 指导 Claude 使用官方 bb CLI 部署无服务器浏览器自动化。 ## 何时使用 在以下场景使用本技能： - 用户希望按调度部署自动化任务 - 用户需要浏览器自动化的 webhook 端点 - 用户想在云端（非本地）运行自动化 - 用户询问 Browserbase Functions ## 前置条件 ### 1. 获取凭据 从 https://browserbase.com/settings 获取 API key 和 Project ID ### 2. 设置环境变量 直接设置： ``bash export BROWSERBASE_API_KEY="your_api_key" export BROWSERBASE_PROJECT_ID="your_project_id" ` ## 创建 Function 项目 ### 1. 使用官方 CLI 初始化 `bash pnpm dlx @browserbasehq/sdk-functions init my-function cd my-function ` 这会创建： ` my-function/ ├── package.json ├── index.ts # 你的函数代码 └── .env # 在此添加凭据 ` ### 2. 将凭据添加到 .env `bash # 从已保存的凭据复制 echo "BROWSERBASE_API_KEY=$BROWSERBASE_API_KEY" >> .env echo "BROWSERBASE_PROJECT_ID=$BROWSERBASE_PROJECT_ID" >> .env ` 或手动编辑 .env： ` BROWSERBASE_API_KEY=your_api_key BROWSERBASE_PROJECT_ID=your_project_id ` ### 3. 安装依赖 `bash pnpm install ` ## 函数结构 `typescript import { defineFn } from "@browserbasehq/sdk-functions"; import { chromium } from "playwright-core"; defineFn("my-function", async (context) => { const { session, params } = context; // 连接到浏览器 const browser = await chromium.connectOverCDP(session.connectUrl); const page = browser.contexts()[0]!.pages()[0]!; // 你的自动化逻辑 await page.goto(params.url || "https://example.com"); const title = await page.title(); // 返回可 JSON 序列化的结果 return { success: true, title }; }); ` 关键对象： - context.session.connectUrl - 用于连接 Playwright 的 CDP 端点 - context.params - 调用时传入的参数 ## 开发工作流 ### 1. 启动开发服务器 `bash pnpm bb dev index.ts ` 服务器运行在 http://127.0.0.1:14113 ### 2. 本地测试 `bash curl -X POST http://127.0.0.1:14113/v1/functions/my-function/invoke \ -H "Content-Type: application/json" \ -d '{"params": {"url": "https://news.ycombinator.com"}}' ` ### 3. 迭代 开发服务器会在文件变更时自动重载。使用 console.log() 调试——输出会出现在终端。 ## 部署 ### 发布到 Browserbase `bash pnpm bb publish index.ts ` 输出： ` Function published successfully Build ID: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Function ID: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx ` 保存 Function ID——调用时需要。 ## 调用已部署的函数 ### 使用 curl `bash # 启动调用 curl -X POST "https://api.browserbase.com/v1/functions/FUNCTION_ID/invoke" \ -H "Content-Type: application/json" \ -H "x-bb-api-key: $BROWSERBASE_API_KEY" \ -d '{"params": {"url": "https://example.com"}}' # 响应：{"id": "INVOCATION_ID"} # 轮询结果 curl "https://api.browserbase.com/v1/functions/invocations/INVOCATION_ID" \ -H "x-bb-api-key: $BROWSERBASE_API_KEY" ` ### 使用代码 `typescript async function invokeFunction(functionId: string, params: object) { // 启动调用 const invokeRes = await fetch( https://api.browserbase.com/v1/functions/${functionId}/invoke, { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-bb-api-key': process.env.BROWSERBASE_API_KEY!, }, body: JSON.stringify({ params }), } ); const { id: invocationId } = await invokeRes.json(); // 轮询直到完成 while (true) { await new Promise(r => setTimeout(r, 5000)); const statusRes = await fetch( https://api.browserbase.com/v1/functions/invocations/${invocationId}, { headers: { 'x-bb-api-key': process.env.BROWSERBASE_API_KEY! } } ); const result = await statusRes.json(); if (result.status === 'COMPLETED') return result.results; if (result.status === 'FAILED') throw new Error(result.error); } } ` ## 常见模式 ### 带参数抓取 `typescript defineFn("scrape", async ({ session, params }) => { const browser = await chromium.connectOverCDP(session.connectUrl); const page = browser.contexts()[0]!.pages()[0]!; await page.goto(params.url); await page.waitForSelector(params.selector); const items = await page.$$eval(params.selector, els => els.map(el => el.textContent?.trim()) ); return { url: params.url, items }; }); ` ### 带认证 `typescript defineFn("authenticated-action", async ({ session, params }) => { const browser = await chromium.connectOverCDP(session.connectUrl); const page = browser.contexts()[0]!.pages()[0]!; // 登录 await page.goto("https://example.com/login"); await page.fill('[name="email"]', params.email); await page.fill('[name="password"]', params.password); await page.click('button[type="submit"]'); await page.waitForURL('**/dashboard'); // 执行已认证操作 const data = await page.textContent('.user-data'); return { data }; }); ` ### 错误处理 `typescript defineFn("safe-scrape", async ({ session, params }) => { const browser = await chromium.connectOverCDP(session.connectUrl); const page = browser.contexts()[0]!.pages()[0]!; try { await page.goto(params.url, { timeout: 30000 }); await page.waitForSelector(params.selector, { timeout: 10000 }); const data = await page.textContent(params.selector); return { success: true, data }; } catch (error) { return { success: false, error: error instanceof Error ? error.message : 'Unknown error' }; } }); ` ## CLI 参考 | 命令 | 描述 | |---------|-------------| | pnpm dlx @browserbasehq/sdk-functions init | 创建新项目 | | pnpm bb dev | 启动本地开发服务器 | | pnpm bb publish | 部署到 Browserbase | ## 故障排查 ### “缺少 API key” `bash # 检查 .env 文件是否包含凭据 cat .env # 或仅为当前 shell 设置 export BROWSERBASE_API_KEY="your_key" export BROWSERBASE_PROJECT_ID="your_project" ` ### 开发服务器无法启动 `bash # 确保 SDK 已安装 pnpm add @browserbasehq/sdk-functions # 或使用 npx npx @browserbasehq/sdk-functions dev index.ts ` ### 函数超时 - 最大执行时间为 15 分钟 - 为页面操作增加具体超时 - 使用 waitForSelector 而非 sleep ### 无法连接到浏览器 - 检查是否正确使用 session.connectUrl - 确保使用 chromium.connectOverCDP() 而非 chromium.launch()`