@browserless.io/browserless 2.2.0-beta-6 → 2.2.0

package/CHANGELOG.md

@@ -1,9 +1,28 @@
-# [Latest](https://github.com/browserless/chrome/compare/v2.1.0...main)
+# [Latest](https://github.com/browserless/chrome/compare/v2.2.0...main)
 - Dependency updates.
+
+# [v2.2.0](https://github.com/browserless/chrome/compare/v2.1.0...v2.2.0)
+**Potentially Breaking**
+- `ghcr.io/browserless/chrome` now runs actual Chrome and not Chromium! If you were using this tag please update to use `ghcr.io/browserless/chromium`!
+  - This Chrome tag uses the new routing convention below. If you get random 404's, please add `/chrome` to the start of the route. EG, `/pdf` becomes `/chrome/pdf`.
+  - Websocket connections follow a similar breakage in that the URL will go from something like `ws://localhost:3000` to `ws://localhost:3000/chrome`.
+- Adds a new `ghcr.io/browserless/chromium`, and updates `ghcr.io/browserless/chrome` to use actual Chrome.
+- New and current APIs now follow a routing convention of `/$BROWSER/$ACTION`. In our Chrome image, you'll see `/chrome/pdf` for the PDF route as opposed to `/pdf`.
+  - To keep things backwards compatible, all our prior REST APIs still have the same path as well as the new semantic, but only in the `multi` and `chromium` tags.
+  - These backwards compatible routes are ONLY available in `ghcr.io/browserless/chromium` and `ghcr.io/browserless/multi`.
+- Refer to the embedded documentation site for any and all updates on API differences.
+
+**Other Changes**
+- HTTPRoutes and WebSocket routes can now have multiple paths to listen on.
 - Add `clean` command to `@browserless.io/browserless` CLI.
-- Adds support for `/json/list`, `/json/new` and `json/protocol` APIs (Chrome only).
+- Adds support for `/json/list`, `/json/new`, `/json/version` and `json/protocol` APIs (Chrome and Chromium only).
+  - When both Chrome and Chromium are present (in the case of the multi image), browserless opts for Chromium for these requests.
 - Removes legacy `browser.json` files since browserless now generates those and caches when requested.
+- Stable docker images are coming! Please be sure to see our packages page for stable tags.
 - Only verify that internally managed browsers are installed when starting.
+- Preliminary support for `--headless=shell`.
+- More unit-tests for the Chrome /json APIs.
+- Dependency updates.
 
 # [v2.1.0](https://github.com/browserless/browserless/compare/v2.0.0-beta-1...v2.1.0)
 - Dependency updates.

package/bin/browserless.js

@@ -501,7 +501,7 @@ const help = () => {
         Options:
           --from        The Browserless docker image to extend from (ghcr.io/browserless/multi:latest).
           --action      One of "push" or "load" to load or push to a registry.
-          --tag         The full tag, including version, to name the image (IE: my-bless/chrome:latest).
+          --tag         The full tag, including version, to name the image (IE: my-bless/chromium:latest).
           --platform    A comma-separated list of platforms to build for.
           --proceed     Proceed with building the image without prompting.
       `);

package/bin/scaffold/README.md

@@ -157,7 +157,7 @@ export default class HelloWorldRoute extends HTTPRoute {
   method = Methods.get;
 
   // The path that this route will listen on requests for.
-  path = '/hello';
+  path = ['/hello'];
 
   // A list of arbitrary tags to group similar APIs with in the documentation site.
   tags = [APITags.management];
@@ -177,7 +177,7 @@ export default class HelloWorldRoute extends HTTPRoute {
 import {
   APITags,
   BrowserWebsocketRoute,
-  CDPChromium,
+  ChromiumCDP,
   CDPLaunchOptions,
   Request,
   SystemQueryParameters,
@@ -195,8 +195,8 @@ export default class ChromiumWebSocketRoute extends BrowserWebsocketRoute {
   // This route requires a valid authorization token.
   auth = true;
 
-  // This route uses the built-in CDPChromium class (Chromium)
-  browser = CDPChromium;
+  // This route uses the built-in ChromiumCDP class (Chromium)
+  browser = ChromiumCDP;
 
   // This route is limited by the global concurrency limiter
   concurrency = true;
@@ -205,7 +205,7 @@ export default class ChromiumWebSocketRoute extends BrowserWebsocketRoute {
   description = `Launch and connect to Chromium with a library like puppeteer or others that work over chrome-devtools-protocol.`;
 
   // This route is available on the '/' route
-  path = WebsocketRoutes['/'];
+  path = [WebsocketRoutes['/']];
 
   // This is a browser-based WebSocket route so we tag it as such
   tags = [APITags.browserWS];
@@ -305,7 +305,7 @@ export default class PDFToS3Route extends BrowserHTTPRoute {
   auth = true;
 
   // This route uses Chromium to process the PDF.
-  browser = CDPChromium;
+  browser = ChromiumCDP;
 
   // Generally, we recommend limiting concurrency when using
   // browser routing
@@ -322,7 +322,8 @@ export default class PDFToS3Route extends BrowserHTTPRoute {
   method = Methods.post;
 
   // This route exists on the '/pdf-to-s3' route
-  path = '/pdf-to-s3';
+  // routes can have several paths, or just one.
+  path = ['/pdf-to-s3'];
 
   // This a browser-based API so we tag it as such for documentation handling
   tags = [APITags.browserAPI];

package/build/browserless.js

@@ -1,5 +1,5 @@
 import * as path from 'path';
-import { BrowserManager, CDPChromium, Config, FileSystem, HTTPServer, Limiter, Metrics, Monitoring, PlaywrightChromium, PlaywrightFirefox, PlaywrightWebkit, Router, Token, WebHooks, availableBrowsers, createLogger, getRouteFiles, makeExternalURL, printLogo, safeParse, } from '@browserless.io/browserless';
+import { BrowserManager, ChromeCDP, ChromiumCDP, ChromiumPlaywright, Config, FileSystem, FirefoxPlaywright, HTTPServer, Limiter, Metrics, Monitoring, Router, Token, WebHooks, WebkitPlaywright, availableBrowsers, createLogger, getRouteFiles, makeExternalURL, printLogo, safeParse, } from '@browserless.io/browserless';
 import { readFile } from 'fs/promises';
 import { userInfo } from 'os';
 const routeSchemas = ['body', 'query'];
@@ -89,10 +89,11 @@ export class Browserless {
         const httpRoutes = [];
         const wsRoutes = [];
         const internalBrowsers = [
-            CDPChromium,
-            PlaywrightFirefox,
-            PlaywrightChromium,
-            PlaywrightWebkit,
+            ChromiumCDP,
+            ChromeCDP,
+            FirefoxPlaywright,
+            ChromiumPlaywright,
+            WebkitPlaywright,
         ];
         const [[httpRouteFiles, wsRouteFiles], installedBrowsers] = await Promise.all([getRouteFiles(this.config), availableBrowsers]);
         const docsLink = makeExternalURL(this.config.getExternalAddress(), '/docs');
@@ -149,7 +150,7 @@ export class Browserless {
                 route.browser &&
                 internalBrowsers.includes(route.browser) &&
                 !installedBrowsers.some((b) => b.name === route.browser?.name)) {
-                throw new Error(`Couldn't load route "${route.path}" due to missing browser of "${route.browser?.name}"`);
+                throw new Error(`Couldn't load route "${route.path}" due to missing browser binary for "${route.browser?.name}"`);
             }
         });
         httpRoutes.forEach((r) => this.router.registerHTTPRoute(r));

package/build/browsers/chrome.cdp.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="debug" />
+import { ChromiumCDP } from './chromium.cdp.js';
+export declare class ChromeCDP extends ChromiumCDP {
+    protected executablePath: string;
+    protected debug: import("debug").Debugger;
+}

package/build/browsers/chrome.cdp.js

@@ -0,0 +1,6 @@
+import { chromeExecutablePath, createLogger, } from '@browserless.io/browserless';
+import { ChromiumCDP } from './chromium.cdp.js';
+export class ChromeCDP extends ChromiumCDP {
+    executablePath = chromeExecutablePath;
+    debug = createLogger('browsers:chrome:cdp');
+}

package/build/browsers/chrome.playwright.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="debug" />
+import { ChromiumPlaywright } from './chromium.playwright.js';
+export declare class ChromePlaywright extends ChromiumPlaywright {
+    protected executablePath: string;
+    protected debug: import("debug").Debugger;
+}

package/build/browsers/chrome.playwright.js

@@ -0,0 +1,6 @@
+import { chromeExecutablePath, createLogger, } from '@browserless.io/browserless';
+import { ChromiumPlaywright } from './chromium.playwright.js';
+export class ChromePlaywright extends ChromiumPlaywright {
+    executablePath = chromeExecutablePath;
+    debug = createLogger('browsers:chrome:playwright');
+}

package/build/browsers/{cdp-chromium.d.ts → chromium.cdp.d.ts}

@@ -9,7 +9,7 @@ import { Browser, Page, Target } from 'puppeteer-core';
 import { Duplex } from 'stream';
 import { EventEmitter } from 'events';
 import httpProxy from 'http-proxy';
-export declare class CDPChromium extends EventEmitter {
+export declare class ChromiumCDP extends EventEmitter {
     protected config: Config;
     protected userDataDir: string | null;
     protected record: boolean;
@@ -20,11 +20,12 @@ export declare class CDPChromium extends EventEmitter {
     protected port?: number;
     protected debug: import("debug").Debugger;
     protected proxy: httpProxy<import("http").IncomingMessage, import("http").ServerResponse<import("http").IncomingMessage>>;
+    protected executablePath: string;
     constructor({ userDataDir, config, record, blockAds, }: {
         blockAds: boolean;
         config: Config;
         record: boolean;
-        userDataDir: CDPChromium['userDataDir'];
+        userDataDir: ChromiumCDP['userDataDir'];
     });
     protected cleanListeners(): void;
     protected setUpEmbeddedAPI: (page: Page, id: string, record: boolean) => Promise<void>;

package/build/browsers/{cdp-chromium.js → chromium.cdp.js}

@@ -1,4 +1,4 @@
-import { ServerError, createLogger, encrypt, liveURLSep, makeExternalURL, noop, once, } from '@browserless.io/browserless';
+import { BLESS_PAGE_IDENTIFIER, ServerError, createLogger, encrypt, liveURLSep, makeExternalURL, noop, once, } from '@browserless.io/browserless';
 import puppeteer from 'puppeteer-core';
 import { EventEmitter } from 'events';
 import StealthPlugin from 'puppeteer-extra-plugin-stealth';
@@ -9,7 +9,7 @@ import path from 'path';
 import playwright from 'playwright-core';
 import puppeteerStealth from 'puppeteer-extra';
 puppeteerStealth.use(StealthPlugin());
-export class CDPChromium extends EventEmitter {
+export class ChromiumCDP extends EventEmitter {
     config;
     userDataDir;
     record;
@@ -18,8 +18,9 @@ export class CDPChromium extends EventEmitter {
     browser = null;
     browserWSEndpoint = null;
     port;
-    debug = createLogger('browsers:cdp:chromium');
+    debug = createLogger('browsers:chromium:cdp');
     proxy = httpProxy.createProxyServer();
+    executablePath = playwright.chromium.executablePath();
     constructor({ userDataDir, config, record, blockAds, }) {
         super();
         this.userDataDir = userDataDir;
@@ -193,7 +194,7 @@ export class CDPChromium extends EventEmitter {
                 ...(options.args || []),
                 this.userDataDir ? `--user-data-dir=${this.userDataDir}` : '',
             ].filter((_) => !!_),
-            executablePath: playwright.chromium.executablePath(),
+            executablePath: this.executablePath,
         };
         if (this.record || this.blockAds) {
             const requiredExtensionArgs = [];
@@ -216,7 +217,7 @@ export class CDPChromium extends EventEmitter {
         const launch = options.stealth
             ? puppeteerStealth.launch.bind(puppeteerStealth)
             : puppeteer.launch.bind(puppeteer);
-        this.debug(finalOptions, `Launching CDP Chrome Handler`);
+        this.debug(finalOptions, `Launching CDP Handler`);
         // @ts-ignore mis-matched types from stealth...
         this.browser = (await launch(finalOptions));
         this.browser.on('targetcreated', this.onTargetCreated);
@@ -232,7 +233,7 @@ export class CDPChromium extends EventEmitter {
         }
         const serverURL = new URL(this.config.getExternalWebSocketAddress());
         const wsURL = new URL(this.browserWSEndpoint);
-        wsURL.hostname = serverURL.hostname;
+        wsURL.host = serverURL.host;
         wsURL.port = serverURL.port;
         if (token) {
             wsURL.searchParams.set('token', token);
@@ -244,11 +245,16 @@ export class CDPChromium extends EventEmitter {
             throw new ServerError(`No browserWSEndpoint found, did you launch first?`);
         }
         socket.once('close', resolve);
-        const [page] = await this.browser.pages();
-        const pageLocation = `/devtools/page/${this.getPageId(page)}`;
-        this.debug(`Proxying ${req.parsed.href} to page "${pageLocation}"`);
-        const target = new URL(pageLocation, this.browserWSEndpoint).href;
+        this.debug(`Proxying ${req.parsed.href}`);
+        const shouldMakePage = req.parsed.pathname.includes(BLESS_PAGE_IDENTIFIER);
+        const page = shouldMakePage ? await this.browser.newPage() : null;
+        const pathname = page
+            ? path.join('/devtools', '/page', this.getPageId(page))
+            : req.parsed.pathname;
+        const target = new URL(pathname, this.browserWSEndpoint).href;
         req.url = '';
+        // Delete headers known to cause issues
+        delete req.headers.origin;
         this.proxy.ws(req, socket, head, {
             changeOrigin: true,
             target,

package/build/browsers/{playwright-chromium.d.ts → chromium.playwright.d.ts}

@@ -8,7 +8,7 @@ import playwright, { Page } from 'playwright-core';
 import { Duplex } from 'stream';
 import { EventEmitter } from 'events';
 import httpProxy from 'http-proxy';
-export declare class PlaywrightChromium extends EventEmitter {
+export declare class ChromiumPlaywright extends EventEmitter {
     protected config: Config;
     protected userDataDir: string | null;
     protected record: boolean;
@@ -17,10 +17,11 @@ export declare class PlaywrightChromium extends EventEmitter {
     protected browser: playwright.BrowserServer | null;
     protected browserWSEndpoint: string | null;
     protected debug: import("debug").Debugger;
+    protected executablePath: string;
     constructor({ config, userDataDir, record, }: {
         config: Config;
         record: boolean;
-        userDataDir: PlaywrightChromium['userDataDir'];
+        userDataDir: ChromiumPlaywright['userDataDir'];
     });
     protected cleanListeners(): void;
     isRunning: () => boolean;

package/build/browsers/{playwright-chromium.js → chromium.playwright.js}

@@ -2,7 +2,7 @@ import { ServerError, createLogger, } from '@browserless.io/browserless';
 import playwright from 'playwright-core';
 import { EventEmitter } from 'events';
 import httpProxy from 'http-proxy';
-export class PlaywrightChromium extends EventEmitter {
+export class ChromiumPlaywright extends EventEmitter {
     config;
     userDataDir;
     record;
@@ -10,7 +10,8 @@ export class PlaywrightChromium extends EventEmitter {
     proxy = httpProxy.createProxyServer();
     browser = null;
     browserWSEndpoint = null;
-    debug = createLogger('browsers:playwright:chromium');
+    debug = createLogger('browsers:chromium:playwright');
+    executablePath = playwright.chromium.executablePath();
     constructor({ config, userDataDir, record, }) {
         super();
         this.userDataDir = userDataDir;
@@ -48,7 +49,7 @@ export class PlaywrightChromium extends EventEmitter {
         return await browser.newPage();
     };
     launch = async (options = {}) => {
-        this.debug(`Launching Chrome Handler`);
+        this.debug(`Launching Playwright Handler`);
         if (this.record) {
             throw new ServerError(`Recording is not yet available with this browser`);
         }
@@ -59,7 +60,7 @@ export class PlaywrightChromium extends EventEmitter {
                 ...(options.args || []),
                 this.userDataDir ? `--user-data-dir=${this.userDataDir}` : '',
             ],
-            executablePath: playwright.chromium.executablePath(),
+            executablePath: this.executablePath,
         });
         const browserWSEndpoint = this.browser.wsEndpoint();
         this.debug(`Browser is running on ${browserWSEndpoint}`);
@@ -74,7 +75,7 @@ export class PlaywrightChromium extends EventEmitter {
         }
         const serverURL = new URL(this.config.getExternalWebSocketAddress());
         const wsURL = new URL(this.browserWSEndpoint);
-        wsURL.hostname = serverURL.hostname;
+        wsURL.host = serverURL.host;
         wsURL.port = serverURL.port;
         if (token) {
             wsURL.searchParams.set('token', token);

package/build/browsers/{playwright-firefox.d.ts → firefox.playwright.d.ts}

@@ -8,7 +8,7 @@ import playwright, { Page } from 'playwright-core';
 import { Duplex } from 'stream';
 import { EventEmitter } from 'events';
 import httpProxy from 'http-proxy';
-export declare class PlaywrightFirefox extends EventEmitter {
+export declare class FirefoxPlaywright extends EventEmitter {
     protected config: Config;
     protected userDataDir: string | null;
     protected record: boolean;
@@ -20,7 +20,7 @@ export declare class PlaywrightFirefox extends EventEmitter {
     constructor({ config, userDataDir, record, }: {
         config: Config;
         record: boolean;
-        userDataDir: PlaywrightFirefox['userDataDir'];
+        userDataDir: FirefoxPlaywright['userDataDir'];
     });
     protected cleanListeners(): void;
     isRunning: () => boolean;

package/build/browsers/{playwright-firefox.js → firefox.playwright.js}

@@ -2,7 +2,7 @@ import { ServerError, createLogger, } from '@browserless.io/browserless';
 import playwright from 'playwright-core';
 import { EventEmitter } from 'events';
 import httpProxy from 'http-proxy';
-export class PlaywrightFirefox extends EventEmitter {
+export class FirefoxPlaywright extends EventEmitter {
     config;
     userDataDir;
     record;
@@ -10,7 +10,7 @@ export class PlaywrightFirefox extends EventEmitter {
     proxy = httpProxy.createProxyServer();
     browser = null;
     browserWSEndpoint = null;
-    debug = createLogger('browsers:playwright:firefox');
+    debug = createLogger('browsers:firefox:playwright');
     constructor({ config, userDataDir, record, }) {
         super();
         this.userDataDir = userDataDir;
@@ -47,7 +47,7 @@ export class PlaywrightFirefox extends EventEmitter {
         if (this.record) {
             throw new ServerError(`Recording is not yet available with this browser`);
         }
-        this.debug(`Launching Firefox Handler`);
+        this.debug(`Launching Playwright Handler`);
         this.browser = await playwright.firefox.launchServer({
             ...options,
             args: [
@@ -69,7 +69,7 @@ export class PlaywrightFirefox extends EventEmitter {
         }
         const serverURL = new URL(this.config.getExternalWebSocketAddress());
         const wsURL = new URL(this.browserWSEndpoint);
-        wsURL.hostname = serverURL.hostname;
+        wsURL.host = serverURL.host;
         wsURL.port = serverURL.port;
         if (token) {
             wsURL.searchParams.set('token', token);

package/build/browsers/index.d.ts

@@ -1,24 +1,34 @@
 /// <reference types="debug" />
-import { BrowserHTTPRoute, BrowserInstance, BrowserWebsocketRoute, BrowserlessSession, BrowserlessSessionJSON, Config, Request } from '@browserless.io/browserless';
+import { BrowserHTTPRoute, BrowserInstance, BrowserWebsocketRoute, BrowserlessSession, BrowserlessSessionJSON, CDPJSONPayload, ChromiumCDP, Config, Request } from '@browserless.io/browserless';
 export declare class BrowserManager {
     protected config: Config;
     protected browsers: Map<BrowserInstance, BrowserlessSession>;
     protected launching: Map<string, Promise<unknown>>;
     protected timers: Map<string, number>;
     protected debug: import("debug").Debugger;
+    protected chromeBrowsers: (typeof ChromiumCDP)[];
     protected playwrightBrowserNames: string[];
     constructor(config: Config);
+    private browserIsChrome;
     protected removeUserDataDir: (userDataDir: string | null) => Promise<void>;
+    /**
+     * Returns the /json/protocol API contents from Chromium or Chrome, whichever is installed,
+     * and modifies URLs to set them to the appropriate addresses configured.
+     * When both Chrome and Chromium are installed, defaults to Chromium.
+     */
     getProtocolJSON: () => Promise<object>;
-    getVersionJSON: () => Promise<{
-        Browser: string;
-        'Debugger-Version': string;
-        'Protocol-Version': string;
-        'User-Agent': string;
-        'V8-Version': string;
-        'WebKit-Version': string;
-        webSocketDebuggerUrl: string;
-    }>;
+    /**
+     * Returns the /json/version API from Chromium or Chrome, whichever is installed,
+     * and modifies URLs to set them to the appropriate addresses configured.
+     * When both Chrome and Chromium are installed, defaults to Chromium.
+     */
+    getVersionJSON: () => Promise<CDPJSONPayload>;
+    /**
+     * Returns a list of all Chrome-like browsers (both Chromium and Chrome) with
+     * their respective /json/list contents. URLs are modified so that subsequent
+     * calls can be forwarded to the appropriate destination
+     */
+    getJSONList: () => Promise<Array<CDPJSONPayload>>;
     private generateSessionJson;
     close: (browser: BrowserInstance, session: BrowserlessSession) => Promise<void>;
     getAllSessions: () => Promise<BrowserlessSessionJSON[]>;

package/build/browsers/index.js

@@ -1,4 +1,4 @@
-import { BadRequest, CDPChromium, HTTPManagementRoutes, NotFound, PlaywrightChromium, PlaywrightFirefox, PlaywrightWebkit, browserHook, convertIfBase64, createLogger, exists, generateDataDir, makeExternalURL, noop, pageHook, parseBooleanParam, } from '@browserless.io/browserless';
+import { BLESS_PAGE_IDENTIFIER, BadRequest, ChromeCDP, ChromePlaywright, ChromiumCDP, ChromiumPlaywright, FirefoxPlaywright, HTTPManagementRoutes, NotFound, ServerError, WebkitPlaywright, availableBrowsers, browserHook, convertIfBase64, createLogger, exists, generateDataDir, makeExternalURL, noop, pageHook, parseBooleanParam, } from '@browserless.io/browserless';
 import { deleteAsync } from 'del';
 import path from 'path';
 export class BrowserManager {
@@ -7,14 +7,17 @@ export class BrowserManager {
     launching = new Map();
     timers = new Map();
     debug = createLogger('browser-manager');
+    chromeBrowsers = [ChromiumCDP, ChromeCDP];
     playwrightBrowserNames = [
-        PlaywrightChromium.name,
-        PlaywrightFirefox.name,
-        PlaywrightWebkit.name,
+        ChromiumPlaywright.name,
+        ChromePlaywright.name,
+        FirefoxPlaywright.name,
+        WebkitPlaywright.name,
     ];
     constructor(config) {
         this.config = config;
     }
+    browserIsChrome = (b) => this.chromeBrowsers.some((chromeBrowser) => b instanceof chromeBrowser);
     removeUserDataDir = async (userDataDir) => {
         if (userDataDir && (await exists(userDataDir))) {
             this.debug(`Deleting data directory "${userDataDir}"`);
@@ -23,9 +26,17 @@ export class BrowserManager {
             });
         }
     };
+    /**
+     * Returns the /json/protocol API contents from Chromium or Chrome, whichever is installed,
+     * and modifies URLs to set them to the appropriate addresses configured.
+     * When both Chrome and Chromium are installed, defaults to Chromium.
+     */
     getProtocolJSON = async () => {
-        this.debug(`Launching Chrome to generate /json/protocol results`);
-        const browser = new CDPChromium({
+        const Browser = (await availableBrowsers).find((InstalledBrowser) => this.chromeBrowsers.some((ChromeBrowser) => InstalledBrowser === ChromeBrowser));
+        if (!Browser) {
+            throw new Error(`No Chrome or Chromium browsers are installed!`);
+        }
+        const browser = new Browser({
             blockAds: false,
             config: this.config,
             record: false,
@@ -42,9 +53,18 @@ export class BrowserManager {
         browser.close();
         return protocolJSON;
     };
+    /**
+     * Returns the /json/version API from Chromium or Chrome, whichever is installed,
+     * and modifies URLs to set them to the appropriate addresses configured.
+     * When both Chrome and Chromium are installed, defaults to Chromium.
+     */
     getVersionJSON = async () => {
-        this.debug(`Launching Chrome to generate /json/version results`);
-        const browser = new CDPChromium({
+        this.debug(`Launching Chromium to generate /json/version results`);
+        const Browser = (await availableBrowsers).find((InstalledBrowser) => this.chromeBrowsers.some((ChromeBrowser) => InstalledBrowser === ChromeBrowser));
+        if (!Browser) {
+            throw new ServerError(`No Chrome or Chromium browsers are installed!`);
+        }
+        const browser = new Browser({
             blockAds: false,
             config: this.config,
             record: false,
@@ -53,7 +73,7 @@ export class BrowserManager {
         await browser.launch();
         const wsEndpoint = browser.wsEndpoint();
         if (!wsEndpoint) {
-            throw new Error('There was an error launching the browser');
+            throw new ServerError('There was an error launching the browser');
         }
         const { port } = new URL(wsEndpoint);
         const res = await fetch(`http://127.0.0.1:${port}/json/version`);
@@ -67,6 +87,54 @@ export class BrowserManager {
             webSocketDebuggerUrl: this.config.getExternalWebSocketAddress(),
         };
     };
+    /**
+     * Returns a list of all Chrome-like browsers (both Chromium and Chrome) with
+     * their respective /json/list contents. URLs are modified so that subsequent
+     * calls can be forwarded to the appropriate destination
+     */
+    getJSONList = async () => {
+        const externalAddress = this.config.getExternalWebSocketAddress();
+        const externalURL = new URL(externalAddress);
+        const sessions = Array.from(this.browsers);
+        const cdpResponse = await Promise.all(sessions.map(async ([browser]) => {
+            const isChromeLike = this.browserIsChrome(browser);
+            const wsEndpoint = browser.wsEndpoint();
+            if (isChromeLike && wsEndpoint) {
+                const port = new URL(wsEndpoint).port;
+                const response = await fetch(`http://127.0.0.1:${port}/json/list`, {
+                    headers: {
+                        Host: '127.0.0.1',
+                    },
+                });
+                if (response.ok) {
+                    const cdpJSON = await response.json();
+                    return cdpJSON.map((c) => {
+                        const webSocketDebuggerURL = new URL(c.webSocketDebuggerUrl);
+                        const devtoolsFrontendURL = new URL(c.devtoolsFrontendUrl, externalAddress);
+                        const wsQuery = devtoolsFrontendURL.searchParams.get('ws');
+                        if (wsQuery) {
+                            const paramName = externalURL.protocol.startsWith('wss')
+                                ? 'wss'
+                                : 'ws';
+                            devtoolsFrontendURL.searchParams.set(paramName, path.join(webSocketDebuggerURL.host, webSocketDebuggerURL.pathname));
+                        }
+                        webSocketDebuggerURL.host = externalURL.host;
+                        webSocketDebuggerURL.port = externalURL.port;
+                        webSocketDebuggerURL.protocol = externalURL.protocol;
+                        return {
+                            ...c,
+                            devtoolsFrontendUrl: devtoolsFrontendURL.href,
+                            webSocketDebuggerUrl: webSocketDebuggerURL.href,
+                        };
+                    });
+                }
+            }
+            return null;
+        }));
+        return cdpResponse
+            .flat()
+            .filter((_) => _ !== null);
+    };
     generateSessionJson = async (browser, session) => {
         const serverAddress = this.config.getExternalAddress();
         const sessions = [
@@ -85,7 +153,7 @@ export class BrowserManager {
             },
         ];
         const wsEndpoint = browser.wsEndpoint();
-        if (browser.constructor.name === 'CDPChromium' && wsEndpoint) {
+        if (this.browserIsChrome(browser) && wsEndpoint) {
             const port = new URL(wsEndpoint).port;
             const response = await fetch(`http://127.0.0.1:${port}/json/list`, {
                 headers: {
@@ -150,7 +218,7 @@ export class BrowserManager {
         const blockAds = parseBooleanParam(req.parsed.searchParams, 'blockAds', false);
         const decodedLaunchOptions = convertIfBase64(req.parsed.searchParams.get('launch') || '{}');
         let parsedLaunchOptions;
-        // Handle re-connects here:
+        // Handle browser re-connects here
         if (req.parsed.pathname.includes('/devtools/browser')) {
             const sessions = Array.from(this.browsers);
             const id = req.parsed.pathname.split('/').pop();
@@ -163,6 +231,37 @@ export class BrowserManager {
             }
             throw new NotFound(`Couldn't locate browser "${id}" for request "${req.parsed.pathname}"`);
         }
+        // Handle page connections here
+        if (req.parsed.pathname.includes('/devtools/page')) {
+            const id = req.parsed.pathname.split('/').pop();
+            if (!id.includes(BLESS_PAGE_IDENTIFIER)) {
+                const browsers = Array.from(this.browsers).map(([browser]) => browser);
+                const allPages = await Promise.all(browsers
+                    .filter((b) => !!b.wsEndpoint())
+                    .map(async (browser) => {
+                    const { port } = new URL(browser.wsEndpoint());
+                    const response = await fetch(`http://127.0.0.1:${port}/json/list`, {
+                        headers: {
+                            Host: '127.0.0.1',
+                        },
+                    }).catch(() => ({
+                        json: () => Promise.resolve([]),
+                        ok: false,
+                    }));
+                    if (response.ok) {
+                        const body = await response.json();
+                        // @ts-ignore
+                        return body.map((b) => ({ ...b, browser }));
+                    }
+                    return null;
+                }));
+                const found = allPages.flat().find((b) => b.id === id);
+                if (found) {
+                    return found.browser;
+                }
+                throw new NotFound(`Couldn't locate browser "${id}" for request "${req.parsed.pathname}"`);
+            }
+        }
         try {
             parsedLaunchOptions = JSON.parse(decodedLaunchOptions);
         }

package/build/browsers/{playwright-webkit.d.ts → webkit.playwright.d.ts}

@@ -8,7 +8,7 @@ import playwright, { Page } from 'playwright-core';
 import { Duplex } from 'stream';
 import { EventEmitter } from 'events';
 import httpProxy from 'http-proxy';
-export declare class PlaywrightWebkit extends EventEmitter {
+export declare class WebkitPlaywright extends EventEmitter {
     protected config: Config;
     protected userDataDir: string | null;
     protected record: boolean;
@@ -20,7 +20,7 @@ export declare class PlaywrightWebkit extends EventEmitter {
     constructor({ config, userDataDir, record, }: {
         config: Config;
         record: boolean;
-        userDataDir: PlaywrightWebkit['userDataDir'];
+        userDataDir: WebkitPlaywright['userDataDir'];
     });
     protected cleanListeners(): void;
     isRunning: () => boolean;