👷 Update README in developer-extension to reflect the new build process

.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

@@ -6,27 +6,7 @@ Browser extension to investigate your Browser SDK integration.
 
 ### 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
 
@@ -90,13 +70,33 @@ Info tab contains information about Session and RUM SDK configurations
 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.
+various entrypoints (panel.html, devtools.html) and the content script communication, as it's not straightforward.
+
+### By loading the extension unpacked
+
+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/chrome-mv3/` directory.
+- Open devtools and the extension features are located on the _Browser SDK_ panel.
+
+### Using the dev server
 
 To work on the developer extension and debug it easily:
 
 1. In a terminal, cd into the `developer-extension` folder.
-
 2. Run `yarn dev`.
+3. A Chrome browser window with the developer extension loaded opens automatically.
+4. After you make a change, right-click on the extension UI and select **"Reload frame"** to see your updates.
 
-3. A Chrome browser window with the developer extension loaded opens.
+> **Tip:** If you are running `yarn dev` and want to load the extension into your own Chrome profile, you can load the `dist/chrome-mv3-dev/` folder instead of `dist/chrome-mv3/`. This dev build includes hot reload support.

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')