add viewport to config

Author: Kylejeong2

browserbase/config.d.ts

@@ -32,6 +32,19 @@ export type Config = {
          */
         persist?: boolean;
     };
+    /**
+     * 
+     */
+    viewPort?: {
+        /**
+         * The width of the browser
+         */
+        browserWidth?: number;
+        /**
+         * The height of the browser
+         */
+        browserHeight?: number;
+    };
     /**
      * Cookies to inject into the Browserbase context
      * Format: Array of cookie objects with name, value, domain, and optional path, expires, httpOnly, secure, sameSite

browserbase/src/config.ts

@@ -18,6 +18,10 @@ export interface Config {
     contextId?: string;
     persist?: boolean;
   };
+  viewPort?: {
+    browserWidth?: number;
+    browserHeight?: number;
+  };
   cookies?: Cookie[]; 
 }
 
@@ -31,6 +35,10 @@ export type CLIOptions = {
   port?: number;
   host?: string;
   cookies?: Cookie[];
+  viewPort?: {
+    browserWidth?: number;
+    browserHeight?: number;
+  };
 };
 
 // Default Configuration Values
@@ -46,6 +54,10 @@ const defaultConfig: Config = {
     port: undefined,
     host: undefined,
   },
+  viewPort: {
+    browserWidth: 1024,
+    browserHeight: 768,
+  },
   cookies: undefined,
 };
 
@@ -90,6 +102,10 @@ export async function configFromCLIOptions(cliOptions: CLIOptions): Promise<Conf
       contextId: cliOptions.contextId,
       persist: cliOptions.persist,
     },
+    viewPort: {
+      browserWidth: cliOptions.viewPort?.browserWidth,
+      browserHeight: cliOptions.viewPort?.browserHeight,
+    },
     cookies: cliOptions.cookies,
   };
 }

browserbase/src/program.ts

@@ -20,6 +20,7 @@ program
     .option('--port <port>', 'Port to listen on for SSE transport.')
     .option('--host <host>', 'Host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.')
     .option('--cookies [json]', 'JSON array of cookies to inject into the browser. Format: [{"name":"cookie1","value":"val1","domain":"example.com"}, ...]')
+    .option('--viewPort [json]', 'ViewPort to use for the browser. Format: {"browserWidth":1024,"browserHeight":768}')
     .action(async options => {
       const config = await resolveConfig(options);
       const serverList = new ServerList(async() => createServer(config));

browserbase/src/sessionManager.ts

@@ -93,8 +93,8 @@ export async function createNewBrowserSession(
     proxies: config.proxies, 
     browserSettings: {
       viewport: { // better for snapshots
-        width: 1024,
-        height: 768,
+        width: config.viewPort?.browserWidth,
+        height: config.viewPort?.browserHeight,
       },
     },
   };