feat(web-automation): implement milestone M2 mirror and docs

skills/web-automation/opencode/scripts/browse.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env npx tsx
 
 /**
- * Browser launcher using Camoufox with persistent profile
+ * Browser launcher using CloakBrowser with persistent profile
  *
  * Usage:
  *   npx tsx browse.ts --url "https://example.com"
@@ -9,14 +9,13 @@
  *   npx tsx browse.ts --url "https://example.com" --headless false --wait 5000
  */
 
-import { Camoufox } from 'camoufox-js';
+import { launchPersistentContext } from 'cloakbrowser';
 import { homedir } from 'os';
 import { join } from 'path';
 import { existsSync, mkdirSync } from 'fs';
 import parseArgs from 'minimist';
 import type { Page, BrowserContext } from 'playwright-core';
 
-// Types
 interface BrowseOptions {
   url: string;
   headless?: boolean;
@@ -33,55 +32,54 @@ interface BrowseResult {
   screenshotPath?: string;
 }
 
-// Get profile directory
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 const getProfilePath = (): string => {
-  const customPath = process.env.CAMOUFOX_PROFILE_PATH;
+  const customPath = process.env.CLOAKBROWSER_PROFILE_PATH;
   if (customPath) return customPath;
 
-  const profileDir = join(homedir(), '.camoufox-profile');
+  const profileDir = join(homedir(), '.cloakbrowser-profile');
   if (!existsSync(profileDir)) {
     mkdirSync(profileDir, { recursive: true });
   }
   return profileDir;
 };
 
-// Launch browser with persistent profile
 export async function launchBrowser(options: {
   headless?: boolean;
 }): Promise<BrowserContext> {
   const profilePath = getProfilePath();
-  const headless =
-    options.headless ??
-    (process.env.CAMOUFOX_HEADLESS ? process.env.CAMOUFOX_HEADLESS === 'true' : true);
+  const envHeadless = process.env.CLOAKBROWSER_HEADLESS;
+  const headless = options.headless ?? (envHeadless ? envHeadless === 'true' : true);
 
   console.log(`Using profile: ${profilePath}`);
   console.log(`Headless mode: ${headless}`);
 
-  const browser = await Camoufox({
-    user_data_dir: profilePath,
+  const context = await launchPersistentContext({
+    userDataDir: profilePath,
     headless,
+    humanize: true,
   });
 
-  return browser;
+  return context;
 }
 
-// Browse to URL and optionally take screenshot
 export async function browse(options: BrowseOptions): Promise<BrowseResult> {
   const browser = await launchBrowser({ headless: options.headless });
-  const page = await browser.newPage();
+  const page = browser.pages()[0] || await browser.newPage();
 
   try {
-    // Navigate to URL
     console.log(`Navigating to: ${options.url}`);
     await page.goto(options.url, {
       timeout: options.timeout ?? 60000,
       waitUntil: 'domcontentloaded',
     });
 
-    // Wait if specified
     if (options.wait) {
       console.log(`Waiting ${options.wait}ms...`);
-      await page.waitForTimeout(options.wait);
+      await sleep(options.wait);
     }
 
     const result: BrowseResult = {
@@ -92,7 +90,6 @@ export async function browse(options: BrowseOptions): Promise<BrowseResult> {
     console.log(`Page title: ${result.title}`);
     console.log(`Final URL: ${result.url}`);
 
-    // Take screenshot if requested
     if (options.screenshot) {
       const outputPath = options.output ?? 'screenshot.png';
       await page.screenshot({ path: outputPath, fullPage: true });
@@ -100,11 +97,10 @@ export async function browse(options: BrowseOptions): Promise<BrowseResult> {
       console.log(`Screenshot saved: ${outputPath}`);
     }
 
-    // If interactive mode, keep browser open
     if (options.interactive) {
       console.log('\nInteractive mode - browser will stay open.');
       console.log('Press Ctrl+C to close.');
-      await new Promise(() => {}); // Keep running
+      await new Promise(() => {});
     }
 
     return result;
@@ -115,16 +111,14 @@ export async function browse(options: BrowseOptions): Promise<BrowseResult> {
   }
 }
 
-// Export page for use in other scripts
 export async function getPage(options?: {
   headless?: boolean;
 }): Promise<{ page: Page; browser: BrowserContext }> {
   const browser = await launchBrowser({ headless: options?.headless });
-  const page = await browser.newPage();
+  const page = browser.pages()[0] || await browser.newPage();
   return { page, browser };
 }
 
-// CLI entry point
 async function main() {
   const args = parseArgs(process.argv.slice(2), {
     string: ['url', 'output'],
@@ -145,7 +139,7 @@ async function main() {
 
   if (args.help || !args.url) {
     console.log(`
-Web Browser with Camoufox
+Web Browser with CloakBrowser
 
 Usage:
   npx tsx browse.ts --url <url> [options]
@@ -166,8 +160,8 @@ Examples:
   npx tsx browse.ts --url "https://example.com" --headless false --interactive
 
 Environment Variables:
-  CAMOUFOX_PROFILE_PATH  Custom profile directory (default: ~/.camoufox-profile/)
-  CAMOUFOX_HEADLESS      Default headless mode (true/false)
+  CLOAKBROWSER_PROFILE_PATH  Custom profile directory (default: ~/.cloakbrowser-profile/)
+  CLOAKBROWSER_HEADLESS      Default headless mode (true/false)
 `);
     process.exit(args.help ? 0 : 1);
   }
@@ -188,7 +182,6 @@ Environment Variables:
   }
 }
 
-// Run if executed directly
 const isMainModule = process.argv[1]?.includes('browse.ts');
 if (isMainModule) {
   main();