fix(browser): Extension doesn't load when starting a recording in Chrome (#742)

Author: allansson

package-lock.json

@@ -110,6 +110,7 @@
     "clsx": "^2.1.1",
     "constrained-editor-plugin": "^1.3.0",
     "country-flag-icons": "^1.5.18",
+    "devtools-protocol": "^0.0.1468520",
     "diff": "^7.0.0",
     "electron-log": "^5.2.0",
     "electron-squirrel-startup": "^1.0.1",

package.json

@@ -25,22 +25,11 @@ export function initialize(browserServer: BrowserServer) {
     }
   )
 
-  ipcMain.on(BrowserHandler.Stop, async () => {
+  ipcMain.on(BrowserHandler.Stop, () => {
     console.info(`${BrowserHandler.Stop} event received`)
 
-    const { currentBrowserProcess } = k6StudioState
-
-    if (currentBrowserProcess) {
-      // macOS & windows
-      if ('close' in currentBrowserProcess) {
-        await currentBrowserProcess.close()
-        // linux
-      } else {
-        currentBrowserProcess.kill()
-      }
-
-      k6StudioState.currentBrowserProcess = null
-    }
+    k6StudioState.currentBrowserProcess?.kill()
+    k6StudioState.currentBrowserProcess = null
   })
 
   ipcMain.handle(BrowserHandler.OpenExternalLink, (_, url: string) => {

src/handlers/browser/index.ts

@@ -2,7 +2,6 @@ import {
   computeSystemExecutablePath,
   Browser,
   ChromeReleaseChannel,
-  launch,
 } from '@puppeteer/browsers'
 import { exec, spawn } from 'child_process'
 import { app, BrowserWindow } from 'electron'
@@ -13,6 +12,7 @@ import path from 'path'
 import { promisify } from 'util'
 
 import { getCertificateSPKI } from '@/main/proxy'
+import { ChromeDevtoolsClient } from '@/utils/cdp/client'
 
 import { BrowserServer } from '../../services/browser/server'
 import { getPlatform } from '../../utils/electron'
@@ -52,6 +52,18 @@ function getExtensionPath() {
   return path.join(process.resourcesPath, 'extension')
 }
 
+const FEATURES_TO_DISABLE = [
+  'OptimizationGuideModelDownloading',
+  'OptimizationHintsFetching',
+  'OptimizationTargetPrediction',
+  'OptimizationHints',
+]
+
+const BROWSER_RECORDING_ARGS = [
+  '--remote-debugging-pipe',
+  '--enable-unsafe-extension-debugging',
+]
+
 export const launchBrowser = async (
   browserWindow: BrowserWindow,
   browserServer: BrowserServer,
@@ -64,21 +76,9 @@ export const launchBrowser = async (
   console.log(userDataDir)
   const certificateSPKI = await getCertificateSPKI()
 
-  const optimizationsToDisable = [
-    'OptimizationGuideModelDownloading',
-    'OptimizationHintsFetching',
-    'OptimizationTargetPrediction',
-    'OptimizationHints',
-  ]
-  const disableChromeOptimizations = `--disable-features=${optimizationsToDisable.join(',')}`
-
   const extensionPath = getExtensionPath()
   console.info(`extension path: ${extensionPath}`)
 
-  if (capture.browser) {
-    browserServer.start(browserWindow)
-  }
-
   const handleBrowserClose = (): Promise<void> => {
     browserServer.stop()
 
@@ -95,9 +95,7 @@ export const launchBrowser = async (
     browserWindow.webContents.send(BrowserHandler.Failed)
   }
 
-  const browserRecordingArgs = capture.browser
-    ? [`--load-extension=${extensionPath}`]
-    : []
+  const browserRecordingArgs = capture.browser ? BROWSER_RECORDING_ARGS : []
 
   const args = [
     '--new',
@@ -112,28 +110,36 @@ export const launchBrowser = async (
     '--disable-search-engine-choice-screen',
     `--proxy-server=http://localhost:${k6StudioState.appSettings.proxy.port}`,
     `--ignore-certificate-errors-spki-list=${certificateSPKI}`,
+    `--disable-features=${FEATURES_TO_DISABLE.join(',')}`,
     ...browserRecordingArgs,
-    disableChromeOptimizations,
     url?.trim() || 'about:blank',
   ]
 
-  // if we are on linux we spawn the browser directly and attach the on exit callback
-  if (getPlatform() === 'linux') {
-    const browserProc = spawn(path, args)
+  const process = spawn(path, args, {
+    stdio: ['ignore', 'ignore', 'ignore', 'pipe', 'pipe'],
+  })
 
-    browserProc.on('error', handleBrowserLaunchError)
-    browserProc.once('exit', handleBrowserClose)
-    return browserProc
+  if (capture.browser) {
+    browserServer.start(browserWindow)
+
+    const client = ChromeDevtoolsClient.fromChildProcess(process)
+
+    process.on('spawn', async () => {
+      const response = await client.call({
+        method: 'Extensions.loadUnpacked',
+        params: {
+          path: extensionPath,
+        },
+      })
+
+      console.log(`k6 Studio extension loaded`, response)
+    })
   }
 
-  // macOS & windows
-  const browserProc = launch({
-    executablePath: path,
-    args: args,
-    onExit: handleBrowserClose,
-  })
-  browserProc.nodeProcess.on('error', handleBrowserLaunchError)
-  return browserProc
+  process.on('error', handleBrowserLaunchError)
+  process.once('exit', handleBrowserClose)
+
+  return process
 }
 
 function getChromePath() {

src/handlers/browser/launch.ts

@@ -1,5 +1,4 @@
-import { Process } from '@puppeteer/browsers'
-import { ChildProcessWithoutNullStreams } from 'child_process'
+import { ChildProcess } from 'child_process'
 import { FSWatcher } from 'chokidar'
 import { BrowserWindow } from 'electron'
 import eventEmitter from 'events'
@@ -11,7 +10,7 @@ import { type ProxyProcess } from './proxy'
 import { defaultSettings } from './settings'
 
 export type k6StudioState = {
-  currentBrowserProcess: Process | ChildProcessWithoutNullStreams | null
+  currentBrowserProcess: ChildProcess | null
   proxyStatus: ProxyStatus
   proxyEmitter: eventEmitter
   appSettings: AppSettings

src/main/k6StudioState.ts

@@ -0,0 +1,104 @@
+import { ChildProcess } from 'child_process'
+import { Readable, Writable } from 'stream'
+
+import {
+  ChromeRequest,
+  ChromeRequestMap,
+  ChromeResponse,
+  ChromeResponseSchema,
+} from './types'
+
+export class ChromeDevtoolsClient {
+  static fromChildProcess(process: ChildProcess): ChromeDevtoolsClient {
+    const send = process.stdio[3]
+    const receive = process.stdio[4]
+
+    if (send instanceof Writable === false) {
+      throw new Error(
+        'File descriptor 3 must be writable to send commands over CDP to the browser.'
+      )
+    }
+
+    if (receive instanceof Readable === false) {
+      throw new Error(
+        'File descriptor 4 must be readable to receive responses from CDP in the browser.'
+      )
+    }
+
+    return new ChromeDevtoolsClient(send, receive)
+  }
+
+  #id: number = 0
+
+  #buffer: string = ''
+
+  #send: Writable
+  #receive: Readable
+
+  #pending = new Map<number, PromiseWithResolvers<unknown>>()
+
+  constructor(send: Writable, receive: Readable) {
+    this.#send = send
+    this.#receive = receive
+
+    this.#receive.on('data', (data) => {
+      const string = String(data)
+
+      const [first = '', rest] = string.split('\u0000')
+
+      this.#buffer += first
+
+      if (rest === undefined) {
+        return
+      }
+
+      const response = JSON.parse(this.#buffer) as unknown
+      const parsed = ChromeResponseSchema.safeParse(response)
+
+      this.#buffer = rest
+
+      if (!parsed.success) {
+        console.error(
+          'Failed to parse response from browser:',
+          response,
+          parsed.error
+        )
+
+        return
+      }
+
+      const resolver = this.#pending.get(parsed.data.id)
+
+      if (resolver === undefined) {
+        return
+      }
+
+      if ('error' in parsed.data) {
+        resolver.reject(parsed.data.error)
+
+        return
+      }
+
+      resolver.resolve(parsed.data.result)
+    })
+  }
+
+  call<K extends keyof ChromeRequestMap>(
+    command: ChromeRequest<K>
+  ): Promise<ChromeResponse<K>> {
+    const resolvers = Promise.withResolvers<ChromeResponse<K>>()
+
+    const id = ++this.#id
+
+    this.#pending.set(id, resolvers as PromiseWithResolvers<unknown>)
+
+    const data = JSON.stringify({
+      ...command,
+      id,
+    })
+
+    this.#send.write(data + '\u0000')
+
+    return resolvers.promise
+  }
+}

src/utils/cdp/client.ts

@@ -0,0 +1,32 @@
+import { Protocol as CDP } from 'devtools-protocol'
+import { z } from 'zod'
+
+const ChromeResultSchema = z.object({
+  id: z.number(),
+  result: z.record(z.unknown()),
+})
+
+const ChromeErrorSchema = z.object({
+  id: z.number(),
+  error: z.record(z.unknown()),
+})
+
+export const ChromeResponseSchema = z.union([
+  ChromeResultSchema,
+  ChromeErrorSchema,
+])
+
+export interface ChromeRequestMap {
+  'Extensions.loadUnpacked': {
+    request: CDP.Extensions.LoadUnpackedRequest
+    response: CDP.Extensions.LoadUnpackedResponse
+  }
+}
+
+export type ChromeRequest<K extends keyof ChromeRequestMap> = {
+  method: K
+  params: ChromeRequestMap[K]['request']
+}
+
+export type ChromeResponse<K extends keyof ChromeRequestMap> =
+  ChromeRequestMap[K]['response']