From c7c0b6bd2cf1cf169f73ed63309980cb7b5dd614 Mon Sep 17 00:00:00 2001 From: "beltran.bulbarella" Date: Mon, 9 Feb 2026 12:01:16 +0100 Subject: [PATCH 1/5] Update README in developer-extension to reflect the new build process --- developer-extension/README.md | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/developer-extension/README.md b/developer-extension/README.md index 839c161dbe..97546b043e 100644 --- a/developer-extension/README.md +++ b/developer-extension/README.md @@ -10,8 +10,7 @@ The extension is available to **Datadog employees** on the [Chrome Web Store](ht ### 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. +You will need to clone this repository and build the extension manually. ``` $ git clone https://github.com/DataDog/browser-sdk @@ -20,13 +19,25 @@ $ yarn $ yarn build ``` -Then, in Google Chrome: +There are two ways to use the extension: -- 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. +#### Option A: Use the auto-launched browser (recommended for development) + +1. 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. + +#### Option B: Load the unpacked extension manually + +If you prefer to load the extension into your own Chrome profile: + +1. Run `yarn build` from the `developer-extension` folder. +2. In Chrome, go to [chrome://extensions](chrome://extensions), enable **Developer Mode**, click **Load unpacked**. +3. Navigate to the `developer-extension` folder. +4. Press **⌘ + Shift + .** to reveal hidden files. +5. Open the `.output/chrome-mv3/` folder. +6. Open devtools — the extension features are located on the **Browser SDK** panel. ## Features @@ -100,3 +111,5 @@ To work on the developer extension and debug it easily: 2. Run `yarn dev`. 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 `.output/chrome-mv3-dev/` folder instead of `.output/chrome-mv3/`. This dev build includes hot reload support. From 14f822b90074ca3e2e51bde609c4a68f8381f89e Mon Sep 17 00:00:00 2001 From: "beltran.bulbarella" Date: Mon, 9 Feb 2026 13:14:01 +0100 Subject: [PATCH 2/5] Modify developer-extension to build into dist folder --- .gitignore | 2 +- developer-extension/README.md | 63 ++++++++----------- developer-extension/wxt.config.ts | 1 + eslint.config.mjs | 2 +- scripts/deploy/publish-developer-extension.ts | 2 +- .../developerExtension.scenario.ts | 2 +- 6 files changed, 30 insertions(+), 42 deletions(-) diff --git a/.gitignore b/.gitignore index 6ed4b5d272..d8f567b13a 100644 --- a/.gitignore +++ b/.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 diff --git a/developer-extension/README.md b/developer-extension/README.md index 97546b043e..e5cbeb8f79 100644 --- a/developer-extension/README.md +++ b/developer-extension/README.md @@ -6,38 +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 - -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 -``` - -There are two ways to use the extension: - -#### Option A: Use the auto-launched browser (recommended for development) - -1. 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. - -#### Option B: Load the unpacked extension manually - -If you prefer to load the extension into your own Chrome profile: - -1. Run `yarn build` from the `developer-extension` folder. -2. In Chrome, go to [chrome://extensions](chrome://extensions), enable **Developer Mode**, click **Load unpacked**. -3. Navigate to the `developer-extension` folder. -4. Press **⌘ + Shift + .** to reveal hidden files. -5. Open the `.output/chrome-mv3/` folder. -6. Open devtools — 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 @@ -101,15 +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 `.output/chrome-mv3-dev/` folder instead of `.output/chrome-mv3/`. This dev build includes hot reload support. +> **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. diff --git a/developer-extension/wxt.config.ts b/developer-extension/wxt.config.ts index 1e3a2fc0ef..8c66992afc 100644 --- a/developer-extension/wxt.config.ts +++ b/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: { diff --git a/eslint.config.mjs b/eslint.config.mjs index 0c04bbf93a..fe6928b3dd 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -34,7 +34,7 @@ export default tseslint.config( '**/playwright-report', 'docs', 'developer-extension/.wxt', - 'developer-extension/.output', + 'developer-extension/dist', ], }, diff --git a/scripts/deploy/publish-developer-extension.ts b/scripts/deploy/publish-developer-extension.ts index 70af788d36..c2c6fdbdac 100644 --- a/scripts/deploy/publish-developer-extension.ts +++ b/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() diff --git a/test/e2e/scenario/developer-extension/developerExtension.scenario.ts b/test/e2e/scenario/developer-extension/developerExtension.scenario.ts index 0d5903ab4c..57dedd0813 100644 --- a/test/e2e/scenario/developer-extension/developerExtension.scenario.ts +++ b/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') From 9e3098e25b93c042ba8e47a2e1de32feb0d8305f Mon Sep 17 00:00:00 2001 From: "beltran.bulbarella" Date: Tue, 10 Feb 2026 14:16:16 +0100 Subject: [PATCH 3/5] README changes for comments. --- developer-extension/README.md | 42 +++++++++++------------------------ 1 file changed, 13 insertions(+), 29 deletions(-) diff --git a/developer-extension/README.md b/developer-extension/README.md index e5cbeb8f79..47a5ef3745 100644 --- a/developer-extension/README.md +++ b/developer-extension/README.md @@ -2,9 +2,7 @@ Browser extension to investigate your Browser SDK integration. -## Getting started - -### From the Chrome Web Store +## Installation The extension is available on the [Chrome Web Store](https://chrome.google.com/webstore/detail/datadog-browser-sdk-devel/boceobohkgenpcpogecpjlnmnfbdigda). @@ -65,38 +63,24 @@ 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 - -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. +## Contribution -### By loading the extension unpacked +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. -You will need to clone this repository and build the extension manually. +### Development setup -``` -$ git clone https://github.com/DataDog/browser-sdk -$ cd browser-sdk -$ yarn -$ yarn build -``` +From the `developer-extension` folder, run `yarn build` then `yarn dev`. There are two ways to work with the extension: -Then, in Google Chrome: +#### Option A: Use the auto-launched browser (recommended) -- 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. +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. -### Using the dev server +#### Option B: Load the extension into your own Chrome profile -To work on the developer extension and debug it easily: +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. -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. +> **Tip:** You can also load the `dist/chrome-mv3-dev/` folder for a development build with hot reload. -> **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. +After making a change, right-click the extension UI and select **Reload frame** to see your updates. From 78f82af97b55e79da96048aff3ccaefeb6d9d6fc Mon Sep 17 00:00:00 2001 From: "beltran.bulbarella" Date: Tue, 10 Feb 2026 14:17:41 +0100 Subject: [PATCH 4/5] Fix inline --- developer-extension/README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/developer-extension/README.md b/developer-extension/README.md index 47a5ef3745..1c70cb4a0c 100644 --- a/developer-extension/README.md +++ b/developer-extension/README.md @@ -69,7 +69,9 @@ To get up to speed with WebExtensions for devtools, read the [Extend the develop ### Development setup -From the `developer-extension` folder, run `yarn build` then `yarn dev`. There are two ways to work with the extension: +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) From 24772d003a30ecc0ba8eaeba7902a2c57abad58c Mon Sep 17 00:00:00 2001 From: "beltran.bulbarella" Date: Tue, 10 Feb 2026 15:18:43 +0100 Subject: [PATCH 5/5] Fix format --- developer-extension/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/developer-extension/README.md b/developer-extension/README.md index 1c70cb4a0c..0d7899cfb1 100644 --- a/developer-extension/README.md +++ b/developer-extension/README.md @@ -69,7 +69,7 @@ To get up to speed with WebExtensions for devtools, read the [Extend the develop ### Development setup -From the `developer-extension` folder, run `yarn build` then `yarn dev`. +From the `developer-extension` folder, run `yarn build` then `yarn dev`. There are two ways to work with the extension: