👷 Update build process in developer-extension

.gitignore

@@ -11,7 +11,7 @@ browserstack.err
 package.tgz
 docs/
 *.tsbuildinfo
-/developer-extension/.output
+/developer-extension/dist
 /developer-extension/.wxt
 
 # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored

developer-extension/README.md

@@ -2,31 +2,9 @@
 
 Browser extension to investigate your Browser SDK integration.
 
-## Getting started
+## Installation
 
-### From the Chrome Web Store
-
-The extension is available to **Datadog employees** on the [Chrome Web Store](https://chrome.google.com/webstore/detail/datadog-browser-sdk-devel/boceobohkgenpcpogecpjlnmnfbdigda).
-
-### By loading the extension unpacked
-
-The packed extension is not (yet?) published publicly. You will need to clone this repository and
-build the extension manually.
-
-```
-$ git clone https://github.com/DataDog/browser-sdk
-$ cd browser-sdk
-$ yarn
-$ yarn build
-```
-
-Then, in Google Chrome:
-
-- Open the _Extension Management_ page by navigating to [chrome://extensions](chrome://extensions).
-- Enable _Developer Mode_ by clicking the toggle switch next to _Developer mode_.
-- Click the _LOAD UNPACKED_ button and select the `browser-sdk/developer-extension/dist`
-  directory.
-- Open devtools and the extension features are located on the `Browser SDK` panel.
+The extension is available on the [Chrome Web Store](https://chrome.google.com/webstore/detail/datadog-browser-sdk-devel/boceobohkgenpcpogecpjlnmnfbdigda).
 
 ## Features
 
@@ -85,18 +63,26 @@ Info tab contains information about Session and RUM SDK configurations
 
 - **Debug Mode**: This option enables debug mode from the developer extension to display errors happening in RUM and LOGS in the developer console.
 
-## Contribution tips
+## Contribution
+
+To get up to speed with WebExtensions for devtools, read the [Extend the developer tools](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools) MDN guide. Pay special attention to the various entrypoints (`panel.html`, `devtools.html`) and the content script communication, as it's not straightforward.
+
+### Development setup
+
+From the `developer-extension` folder, run `yarn build` then `yarn dev`.
+
+There are two ways to work with the extension:
+
+#### Option A: Use the auto-launched browser (recommended)
 
-Read the [Extend the developers
-tools](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools)
-MDN guide to get up to speed with WebExtensions for devtools. In particular, look for the
-various entrypoints (panel.html, devtools.html) and the content script communication, as it'
-s not straightforward.
+A Chrome window opens automatically with the extension loaded, DevTools open, and the [Browser SDK test playground](https://datadoghq.dev/browser-sdk-test-playground/) ready to use.
 
-To work on the developer extension and debug it easily:
+#### Option B: Load the extension into your own Chrome profile
 
-1. In a terminal, cd into the `developer-extension` folder.
+1. In Chrome, navigate to [chrome://extensions](chrome://extensions) and enable _Developer Mode_.
+2. Click _Load unpacked_ and select the `dist/chrome-mv3/` folder.
+3. Open DevTools — the extension is available in the **Browser SDK** panel.
 
-2. Run `yarn dev`.
+> **Tip:** You can also load the `dist/chrome-mv3-dev/` folder for a development build with hot reload.
 
-3. A Chrome browser window with the developer extension loaded opens.
+After making a change, right-click the extension UI and select **Reload frame** to see your updates.

developer-extension/wxt.config.ts

@@ -3,6 +3,7 @@ import { getBuildEnvValue } from '../scripts/lib/buildEnv'
 
 // eslint-disable-next-line import/no-default-export
 export default defineConfig({
+  outDir: 'dist',
   modules: ['@wxt-dev/module-react'],
   entrypointsDir: 'src/entrypoints',
   manifest: {

eslint.config.mjs

@@ -34,7 +34,7 @@ export default tseslint.config(
       '**/playwright-report',
       'docs',
       'developer-extension/.wxt',
-      'developer-extension/.output',
+      'developer-extension/dist',
     ],
   },
 

scripts/deploy/publish-developer-extension.ts

@@ -17,7 +17,7 @@ runMain(async () => {
 
   printLog('Zipping extension files')
   const zipPath = path.resolve(ZIP_FILE_NAME)
-  command`zip -r ${zipPath} .`.withCurrentWorkingDirectory('developer-extension/.output/chrome-mv3').run()
+  command`zip -r ${zipPath} .`.withCurrentWorkingDirectory('developer-extension/dist/chrome-mv3').run()
 
   printLog('Publish Developer extension')
   await uploadAndPublish()

test/e2e/scenario/developer-extension/developerExtension.scenario.ts

@@ -2,7 +2,7 @@ import path from 'path'
 import { expect, test } from '@playwright/test'
 import { createExtension, createTest } from '../../lib/framework'
 
-const developerExtensionPath = path.join(process.cwd(), 'developer-extension/.output/chrome-mv3')
+const developerExtensionPath = path.join(process.cwd(), 'developer-extension/dist/chrome-mv3')
 
 test.describe('developer extension', () => {
   createTest('should switch between tabs')