🔧 migrate the developer-extension to wxt (#3962)

🔧  migrate the developer-extension to wxt

✅ fix e2e test

edit readme

merge main branch

Apply suggestions from code review

Co-authored-by: Ursula Chen <[email protected]>

👌 remove build warning

Merge remote-tracking branch 'origin/main' into benoit/migrate-devext-to-wxt

Co-authored-by: benoit.zugmeyer <[email protected]>

Author: BenoitZugmeyer

.gitignore

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

.prettierignore

@@ -4,7 +4,8 @@ esm
 coverage
 rum-events-format
 .yarn
-developer-extension/dist
 test/**/dist
 yarn.lock
 /docs
+/developer-extension/.output
+/developer-extension/.wxt

LICENSE-3rdparty.csv

@@ -24,16 +24,14 @@ dev,@types/node-forge,MIT,Copyright Microsoft Corporation
 dev,@types/pako,MIT,Copyright Microsoft Corporation
 dev,@types/react,MIT,Copyright Microsoft Corporation
 dev,@types/react-dom,MIT,Copyright Microsoft Corporation
+dev,@wxt-dev/module-react,MIT,Copyright (c) 2023 Aaron
 dev,@types/react-window,MIT,Copyright Microsoft Corporation
 dev,@vitejs/plugin-react,MIT,Copyright (c) 2019-present Evan You & Vite Contributors
-dev,@webextension-toolbox/webpack-webextension-plugin,MIT,Copyright 2018 Henrik Wenz ([email protected])
 dev,ajv,MIT,Copyright 2015-2017 Evgeny Poberezkin
 dev,browserstack-local,MIT,Copyright 2016 BrowserStack
 dev,chrome-webstore-upload,MIT,Copyright Federico Brigante <[email protected]> (https://fregante.com), 2020 Andrew Levine
 dev,connect-busboy,MIT,Copyright Brian White
-dev,copy-webpack-plugin,MIT,Copyright JS Foundation and other contributors
 dev,cors,MIT,Copyright 2013 Troy Goode
-dev,css-loader,MIT,Copyright JS Foundation and other contributors
 dev,emoji-name-map,MIT,Copyright 2016-19 Ionică Bizău <[email protected]> (https://ionicabizau.net)
 dev,eslint,MIT,Copyright JS Foundation and other contributors
 dev,eslint-module-utils,MIT,Copyright (c) 2015 Ben Mosher
@@ -64,7 +62,6 @@ dev,puppeteer,Apache-2.0,Copyright 2017 Google Inc.
 dev,react-router-dom,MIT,Copyright (c) React Training LLC 2015-2019 Copyright (c) Remix Software Inc. 2020-2021 Copyright (c) Shopify Inc. 2022-2023
 dev,react-window,MIT,Copyright (c) 2018 Brian Vaughn
 dev,recharts,MIT,Copyright (c) 2015-present recharts
-dev,style-loader,MIT,Copyright JS Foundation and other contributors
 dev,terser-webpack-plugin,MIT,Copyright JS Foundation and other contributors
 dev,ts-loader,MIT,Copyright 2015 TypeStrong
 dev,tsconfig-paths-webpack-plugin,MIT,Copyright 2016 Jonas Kello
@@ -76,10 +73,6 @@ dev,webpack-cli,MIT,Copyright JS Foundation and other contributors
 dev,webpack-dev-middleware,MIT,Copyright JS Foundation and other contributors
 dev,@swc/core,Apache-2.0,Copyright (c) SWC Contributors
 dev,swc-loader,MIT,Copyright (c) SWC Contributors
-dev,@pmmmwh/react-refresh-webpack-plugin,MIT,Copyright (c) Michael Mok
-dev,@types/webpack-env,MIT,Copyright Microsoft Corporation
-dev,react-refresh,MIT,Copyright (c) Facebook, Inc. and its affiliates.
-dev,react-refresh-typescript,MIT,Copyright (c) Piotr Monwid-Olechnowicz
-dev,webpack-dev-server,MIT,Copyright JS Foundation and other contributors
 dev,http-server,MIT,Copyright http-party contributors
 dev,react-router,MIT,Copyright (c) React Training LLC 2015-2019 Copyright (c) Remix Software Inc. 2020-2021 Copyright (c) Shopify Inc. 2022-2023
+dev,wxt,MIT,Copyright (c) 2023 Aaron

developer-extension/.gitignore

@@ -87,12 +87,16 @@ Info tab contains information about Session and RUM SDK configurations
 
 ## 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.
+
 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. In Chrome, load the `developer-extension/dist` folder as an unpacked extension.
-
-4. After you make a change, right-click on the extension UI and “Reload frame”.
+3. A Chrome browser window with the developer extension loaded opens.

developer-extension/README.md

@@ -3,26 +3,15 @@
   "version": "6.24.1",
   "private": true,
   "scripts": {
-    "build": "rm -rf dist && webpack --disable-interpret --mode production",
-    "dev": "rm -rf dist && webpack --disable-interpret --mode development && webpack serve --disable-interpret --mode development --config-name=panel --hot"
+    "build": "wxt build",
+    "dev": "wxt"
   },
   "devDependencies": {
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0",
     "@types/chrome": "0.1.27",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
-    "@types/webpack-env": "^1.18.4",
-    "@webextension-toolbox/webpack-webextension-plugin": "3.3.1",
-    "copy-webpack-plugin": "13.0.1",
-    "css-loader": "7.1.2",
-    "html-webpack-plugin": "5.6.4",
-    "react-refresh": "^0.18.0",
-    "react-refresh-typescript": "^2.0.9",
-    "style-loader": "4.0.0",
-    "typescript": "5.9.3",
-    "webpack": "5.102.1",
-    "webpack-cli": "^6.0.0",
-    "webpack-dev-server": "^5.0.4"
+    "@wxt-dev/module-react": "1.1.5",
+    "typescript": "5.9.3"
   },
   "dependencies": {
     "@datadog/browser-core": "workspace:*",
@@ -33,7 +22,8 @@
     "@tabler/icons-react": "3.35.0",
     "clsx": "2.1.1",
     "react": "19.2.0",
-    "react-dom": "19.2.0"
+    "react-dom": "19.2.0",
+    "wxt": "0.20.11"
   },
   "volta": {
     "extends": "../package.json"

developer-extension/manifest.json

@@ -30,12 +30,12 @@ const CONTENT_SCRIPTS: Array<{
   {
     id: 'browser-sdk-content-script-main',
     world: chrome.scripting.ExecutionWorld.MAIN,
-    file: './content-script-main.js',
+    file: './contentScriptMain.js',
   },
   {
     id: 'browser-sdk-content-script-isolated',
     world: chrome.scripting.ExecutionWorld.ISOLATED,
-    file: './content-script-isolated.js',
+    file: './contentScriptIsolated.js',
   },
 ]
 

developer-extension/package.json

@@ -3,37 +3,39 @@
 import { isDisconnectError } from '../common/isDisconnectError'
 import { createLogger } from '../common/logger'
 
-const logger = createLogger('content-script-isolated')
+export function main() {
+  const logger = createLogger('content-script-isolated')
 
-interface IsolatedWindow {
-  unregisterIsolatedScript?(): void
-}
+  interface IsolatedWindow {
+    unregisterIsolatedScript?(): void
+  }
 
-const isolatedWindow = window as IsolatedWindow
+  const isolatedWindow = window as IsolatedWindow
 
-// Unregister any callback from a previously injected isolated content script
-if (isolatedWindow.unregisterIsolatedScript) {
-  isolatedWindow.unregisterIsolatedScript()
-}
-// Register the new callback
-window.addEventListener('__ddBrowserSdkMessage', browserSdkMessageListener)
+  // Unregister any callback from a previously injected isolated content script
+  if (isolatedWindow.unregisterIsolatedScript) {
+    isolatedWindow.unregisterIsolatedScript()
+  }
+  // Register the new callback
+  window.addEventListener('__ddBrowserSdkMessage', browserSdkMessageListener)
 
-isolatedWindow.unregisterIsolatedScript = () => {
-  window.removeEventListener('__ddBrowserSdkMessage', browserSdkMessageListener)
-}
+  isolatedWindow.unregisterIsolatedScript = () => {
+    window.removeEventListener('__ddBrowserSdkMessage', browserSdkMessageListener)
+  }
 
-// Listen to events from the "main" content script and relays them to the background script via the
-// webextension API.
-function browserSdkMessageListener(event: unknown) {
-  const detail = (event as CustomEvent).detail
+  // Listen to events from the "main" content script and relays them to the background script via the
+  // webextension API.
+  function browserSdkMessageListener(event: unknown) {
+    const detail = (event as CustomEvent).detail
 
-  try {
-    chrome.runtime.sendMessage(detail).catch((error) => logger.error('Failed to send message:', error))
-  } catch (error) {
-    // Ignore errors when the background script is unloaded, as this is expected to happen sometimes and we
-    // don't want to spam the console in this case.
-    if (!isDisconnectError(error)) {
-      logger.error('Failed to send message:', error)
+    try {
+      chrome.runtime.sendMessage(detail).catch((error) => logger.error('Failed to send message:', error))
+    } catch (error) {
+      // Ignore errors when the background script is unloaded, as this is expected to happen sometimes and we
+      // don't want to spam the console in this case.
+      if (!isDisconnectError(error)) {
+        logger.error('Failed to send message:', error)
+      }
     }
   }
 }