internal: Improved tools for developing the browser extension (#766)

Author: allansson

extension/src/background/index.ts

@@ -1,4 +1,4 @@
-import { tabs } from 'webextension-polyfill'
+import { runtime, tabs } from 'webextension-polyfill'
 
 import { BrowserEvent } from '@/schemas/recording'
 
@@ -49,6 +49,12 @@ client.on('load-events', () => {
   })
 })
 
+client.on('reload-extension', () => {
+  console.log('reloading extension...')
+
+  runtime.reload()
+})
+
 const logEvent = (event: BrowserExtensionEvent) => {
   console.log(`[background] ${event.data.type}:`, event.data)
 }

extension/src/background/routing.ts

@@ -21,6 +21,7 @@ background.forward('events-loaded', [frontend])
 studio.forward('navigate', [background])
 studio.forward('highlight-elements', [frontend])
 
+frontend.forward('reload-extension', [background])
 frontend.forward('record-events', [background])
 frontend.forward('navigate', [background])
 frontend.forward('load-events', [background])

extension/src/frontend/routing.ts

@@ -12,6 +12,7 @@ frontend.forward('record-events', [background])
 frontend.forward('navigate', [background])
 frontend.forward('load-events', [background])
 frontend.forward('stop-recording', [background])
+frontend.forward('reload-extension', [background])
 
 background.forward('events-recorded', [frontend])
 background.forward('events-loaded', [frontend])

extension/src/frontend/view/ToolBox/index.tsx

@@ -10,15 +10,18 @@ import {
   restrictToHorizontalAxis,
   restrictToWindowEdges,
 } from '@dnd-kit/modifiers'
+import { css } from '@emotion/react'
 import {
   PanelRight,
+  RotateCcwIcon,
   SquareDashedMousePointerIcon,
   SquareIcon,
   TextCursorIcon,
 } from 'lucide-react'
 
 import { Toolbar } from '@/components/primitives/Toolbar'
 
+import { client } from '../../routing'
 import { useToolboxSettings } from '../settings'
 import { Tool } from '../types'
 
@@ -138,6 +141,34 @@ export function ToolBox({
             </Toolbar.ToggleItem>
           </ToolBoxTooltip>
         </Toolbar.ToggleGroup>
+        {
+          // @ts-expect-error we have commonjs set as module option
+          import.meta.env.DEV && (
+            <>
+              <Toolbar.Separator />
+              <ToolBoxTooltip content="Reload extension (dev only)">
+                <Toolbar.Button
+                  onClick={() => {
+                    client.send({
+                      type: 'reload-extension',
+                    })
+
+                    setTimeout(() => {
+                      window.location.reload()
+                    }, 500)
+                  }}
+                >
+                  <RotateCcwIcon
+                    css={css`
+                      stroke-width: 2px !important;
+                      color: var(--red-10);
+                    `}
+                  />
+                </Toolbar.Button>
+              </ToolBoxTooltip>
+            </>
+          )
+        }
       </ToolBoxRoot>
     </DndContext>
   )

extension/src/messaging/types.ts

@@ -44,6 +44,10 @@ export const StopRecordingSchema = z.object({
   type: z.literal('stop-recording'),
 })
 
+export const ReloadExtensionSchema = z.object({
+  type: z.literal('reload-extension'),
+})
+
 export const BrowserExtensionMessageSchema = z.discriminatedUnion('type', [
   LoadEventsSchema,
 
@@ -53,6 +57,8 @@ export const BrowserExtensionMessageSchema = z.discriminatedUnion('type', [
   HighlightElementsSchema,
   NavigateSchema,
   StopRecordingSchema,
+
+  ReloadExtensionSchema,
 ])
 
 export type RecordEvents = z.infer<typeof RecordEventsSchema>

src/handlers/browser/launch.ts

@@ -6,7 +6,7 @@ import {
 import { exec, spawn } from 'child_process'
 import { app, BrowserWindow } from 'electron'
 import log from 'electron-log/main'
-import { mkdtemp } from 'fs/promises'
+import { mkdir, mkdtemp, writeFile } from 'fs/promises'
 import os from 'os'
 import path from 'path'
 import { promisify } from 'util'
@@ -19,8 +19,42 @@ import { getPlatform } from '../../utils/electron'
 
 import { BrowserHandler, LaunchBrowserOptions } from './types'
 
+const CHROME_DEV_PREFERENCES = JSON.stringify({
+  devtools: {
+    preferences: {
+      currentDockState: '"undocked"',
+      'navigator-view-selected-tab': '"navigator-content-scripts"',
+      'panel-selected-tab': '"sources"',
+    },
+    synced_preferences_sync_disabled: {
+      // This allows content scripts to be debugged via DevTools without
+      // having to whitelist them yourself.
+      'skip-content-scripts': 'false',
+    },
+  },
+})
+
 const createUserDataDir = async () => {
-  return mkdtemp(path.join(os.tmpdir(), 'k6-studio-'))
+  const userDataDir = await mkdtemp(path.join(os.tmpdir(), 'k6-studio-'))
+
+  // If we're in development mode, we create a default Chrome profile
+  // with some preferences that make developing the extension easier
+  // (e.g. whitelisting content scripts in the debugger).
+  //
+  // @ts-expect-error - Electron apps are built as CJS.
+  if (import.meta.env.DEV) {
+    try {
+      const defaultProfilePath = path.join(userDataDir, 'Default')
+      const preferencesPath = path.join(defaultProfilePath, 'Preferences')
+
+      await mkdir(defaultProfilePath, { recursive: true })
+      await writeFile(preferencesPath, CHROME_DEV_PREFERENCES, 'utf8')
+    } catch (error) {
+      console.error('Error creating Chrome profile:', error)
+    }
+  }
+
+  return userDataDir
 }
 
 export async function getBrowserPath() {