[{"_1":2,"_179":-5,"_180":-5},"loaderData",{"_3":4,"_95":96},"root",{"_5":6,"_36":37,"_68":69},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isBusinessOrgMember","ENV",{"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","0cc4e234bbf6f8e65a0eea123bbd1ea70d97ca74","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","API_URL","https://api.val.town","clerkState",{"_70":71},"__internal_clerk_state",{"_72":73,"_74":47,"_75":76,"_77":76,"_78":20,"_79":76,"_80":76,"_81":76,"_82":76,"_83":84,"_93":20,"_94":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_85":20,"_19":20,"_86":76,"_87":88,"_89":76,"_90":47,"_91":20,"_92":76},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_97":98,"_99":100,"_101":102,"_103":104,"_157":158,"_176":177,"_178":-5},"handle","minhnguyen00","name","bb_agent","path","browser.ts","project",{"_105":106,"_99":100,"_107":108,"_109":-5,"_110":20,"_111":112,"_113":76,"_114":76,"_12":115,"_116":-5,"_117":20,"_118":-5,"_119":-5,"_120":33,"_14":121,"_122":123,"_124":125,"_126":-5,"_127":128,"_129":128,"_130":131,"_132":131,"_133":131,"_134":128,"_135":128,"_23":136,"_138":139,"_143":144,"_156":20},"id","083c206c-2b7f-11f1-8d7a-42dde27851f2","createdAt",["D",1774796002418],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","019d37cd-8417-71f5-bf2f-af87e0391787","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019d37ce-8610-7097-8dec-2ecab63c9d61","tursoName","083c206c2b7f11f18d7a42dde27851f2","tursoHostname","083c206c2b7f11f18d7a42dde27851f2-val-town.aws-us-east-2.turso.io","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_97":98,"_137":76},"profileImageUrl","org",{"_97":98,"_140":76,"_12":-5,"_141":142},"avatar","tier","free","branch",{"_145":146,"_99":45,"_105":147,"_148":106,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":100,"_155":98},"version",24,"083dcce6-2b7f-11f1-8d7a-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_105":159,"_99":102,"_160":161,"_162":-5,"_163":147,"_164":165,"_166":167,"_107":168,"_145":33,"_169":170,"_171":172,"_173":20,"_174":-5,"_101":175},"5b89026a-2b81-11f1-bfd3-42dde27851f2","fileId","5b890364-2b81-11f1-bfd3-42dde27851f2","parentId","branchId","branchVersion",9,"latest",true,["D",1774797001158],"fileType","script","content","/**\n * browser.ts\n * BrowserManager — kết nối Browserbase qua CDP + playwright-core\n *\n * Cách dùng:\n * const bm = new BrowserManager();\n * const page = await bm.start(); // tạo session Browserbase mới\n * await page.goto(\"https://...\");\n * const ss = await bm.screenshot();\n * await bm.close();\n *\n * Hoặc dùng withBrowser() helper:\n * const result = await withBrowser(async (page, sessionId) => {\n * await page.goto(\"https://example.com\");\n * return await page.title();\n * });\n */\nimport { chromium } from \"npm:playwright-core@1.52.0\";\nimport type { Browser, BrowserContext, Page } from \"npm:playwright-core@1.52.0\";\n\n// ─── CONFIG ───────────────────────────────────────────────────────────────────\n\nfunction getBBConfig(): { apiKey: string; projectId: string } {\n const apiKey = Deno.env.get(\"BROWSERBASE_API_KEY\");\n const projectId = Deno.env.get(\"BROWSERBASE_PROJECT_ID\");\n if (!apiKey) throw new Error(\"BROWSERBASE_API_KEY chưa set\");\n if (!projectId) throw new Error(\"BROWSERBASE_PROJECT_ID chưa set\");\n return { apiKey, projectId };\n}\n\n// ─── BROWSERBASE SESSION API (gọi trực tiếp qua fetch, không dùng SDK) ────────\n// SDK @browserbasehq/sdk có import shim issue với Deno trên Val Town\n// Dùng REST API trực tiếp theo docs: https://docs.browserbase.com/\n\ninterface BBSession {\n id: string;\n connectUrl: string; // wss://... CDP endpoint\n status: string;\n}\n\nasync function createBBSession(options?: {\n keepAlive?: boolean;\n proxies?: boolean;\n}): Promise {\n const { apiKey, projectId } = getBBConfig();\n const body: Record = { projectId };\n if (options?.keepAlive) body.keepAlive = true;\n if (options?.proxies) body.proxies = true;\n\n const res = await fetch(\"https://api.browserbase.com/v1/sessions\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-BB-API-Key\": apiKey,\n },\n body: JSON.stringify(body),\n });\n if (!res.ok) {\n const err = await res.text();\n throw new Error(`Tạo Browserbase session thất bại: ${res.status} — ${err}`);\n }\n const data = await res.json() as { id: string; connectUrl: string; status: string };\n return data;\n}\n\nasync function getBBSessionDebugUrl(sessionId: string): Promise {\n const { apiKey } = getBBConfig();\n const res = await fetch(`https://api.browserbase.com/v1/sessions/${sessionId}/debug`, {\n headers: { \"X-BB-API-Key\": apiKey },\n });\n if (!res.ok) return \"\";\n const data = await res.json() as { debuggerUrl?: string };\n return data.debuggerUrl ?? \"\";\n}\n\n// ─── BROWSER MANAGER ──────────────────────────────────────────────────────────\n\nexport class BrowserManager {\n private browser: Browser | null = null;\n private context: BrowserContext | null = null;\n private page: Page | null = null;\n public sessionId: string | null = null;\n public replayUrl: string | null = null;\n\n /**\n * Khởi tạo session Browserbase và trả về Page\n */\n async start(options?: {\n keepAlive?: boolean;\n proxies?: boolean;\n viewport?: { width: number; height: number };\n }): Promise {\n const session = await createBBSession({\n keepAlive: options?.keepAlive,\n proxies: options?.proxies,\n });\n this.sessionId = session.id;\n this.replayUrl = `https://browserbase.com/sessions/${session.id}`;\n\n // Kết nối qua CDP (WebSocket)\n this.browser = await chromium.connectOverCDP(session.connectUrl);\n this.context = this.browser.contexts()[0];\n this.page = this.context.pages()[0] ?? await this.context.newPage();\n\n if (options?.viewport) {\n await this.page.setViewportSize(options.viewport);\n }\n\n return this.page;\n }\n\n /** Lấy Page hiện tại (phải gọi start() trước) */\n getPage(): Page {\n if (!this.page) throw new Error(\"BrowserManager chưa start(). Gọi start() trước.\");\n return this.page;\n }\n\n /** Chụp ảnh màn hình, trả về base64 string */\n async screenshot(): Promise {\n const p = this.getPage();\n const buf = await p.screenshot({ fullPage: false, type: \"png\" });\n return btoa(String.fromCharCode(...new Uint8Array(buf)));\n }\n\n /** Lấy debug URL (live view) của session */\n async getDebugUrl(): Promise {\n if (!this.sessionId) return \"\";\n return getBBSessionDebugUrl(this.sessionId);\n }\n\n /** Đóng browser và session */\n async close(): Promise {\n try {\n if (this.page) await this.page.close().catch(() => {});\n if (this.browser) await this.browser.close().catch(() => {});\n } finally {\n this.browser = null;\n this.context = null;\n this.page = null;\n }\n }\n\n /** Lưu/khôi phục cookies (để nuôi tài khoản) */\n async getCookies(): Promise {\n if (!this.context) throw new Error(\"Context chưa sẵn sàng\");\n const cookies = await this.context.cookies();\n return JSON.stringify(cookies);\n }\n\n async setCookies(cookiesJson: string): Promise {\n if (!this.context) throw new Error(\"Context chưa sẵn sàng\");\n const cookies = JSON.parse(cookiesJson);\n await this.context.addCookies(cookies);\n }\n}\n\n// ─── HELPER: withBrowser ──────────────────────────────────────────────────────\n\n/**\n * Chạy automation trong một session tạm thời, tự động đóng khi xong\n *\n * @example\n * const title = await withBrowser(async (page, sessionId) => {\n * await page.goto(\"https://example.com\");\n * return page.title();\n * });\n */\nexport async function withBrowser(\n fn: (page: Page, sessionId: string, replayUrl: string) => Promise,\n options?: { keepAlive?: boolean; proxies?: boolean },\n): Promise {\n const bm = new BrowserManager();\n const page = await bm.start(options);\n try {\n return await fn(page, bm.sessionId!, bm.replayUrl!);\n } finally {\n await bm.close();\n }\n}\n","deleted","label",[102],"permalink","https://www.val.town/x/minhnguyen00/bb_agent/code/browser.ts","extension","actionData","errors"]