🔧 migrate the developer-extension to wxt

.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,14 +24,12 @@ 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,@webextension-toolbox/webpack-webextension-plugin,MIT,Copyright 2018 Henrik Wenz ([email protected])
+dev,@wxt-dev/module-react,MIT,Copyright (c) 2023 Aaron
 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
@@ -60,7 +58,6 @@ dev,pako,MIT,(C) 2014-2017 Vitaly Puzrin and Andrey Tupitsin
 dev,prettier,MIT,Copyright James Long and contributors
 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,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,ts-node,MIT,Copyright 2014 Blake Embrey
@@ -72,10 +69,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/README.md

@@ -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. It should open a Chrome browser window with the developer extension loaded.

developer-extension/package.json

@@ -3,26 +3,15 @@
   "version": "6.24.0",
   "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.24",
     "@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/src/background/domain/messageRelay.ts

@@ -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/src/content-scripts/isolated.ts

@@ -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)
+      }
     }
   }
 }

developer-extension/src/content-scripts/main.ts

@@ -15,7 +15,7 @@ interface SdkPublicApi {
   [key: string]: (...args: any[]) => unknown
 }
 
-function main() {
+export function main() {
   // Prevent multiple executions when the devetools are reconnecting
   if (window.__ddBrowserSdkExtensionCallback) {
     return
@@ -54,8 +54,6 @@ function main() {
   }
 }
 
-main()
-
 function sendEventsToExtension() {
   // This script is executed in the "main" execution world, the same world as the webpage. Thus, it
   // can define a global callback variable to listen to SDK events.

developer-extension/src/entrypoints/background.ts

@@ -0,0 +1,7 @@
+// eslint-disable-next-line import/no-unresolved
+import { defineBackground } from 'wxt/utils/define-background'
+
+// eslint-disable-next-line import/no-default-export
+export default defineBackground(() => {
+  void import('../background')
+})

developer-extension/src/entrypoints/contentScriptIsolated.ts

@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/no-unresolved
+import { defineContentScript } from 'wxt/utils/define-content-script'
+import { main } from '../content-scripts/isolated'
+
+// eslint-disable-next-line import/no-default-export
+export default defineContentScript({
+  matches: ['<all_urls>'],
+  world: 'ISOLATED',
+  main,
+})

developer-extension/src/entrypoints/contentScriptMain.ts

@@ -0,0 +1,10 @@
+// eslint-disable-next-line import/no-unresolved
+import { defineContentScript } from 'wxt/utils/define-content-script'
+import { main } from '../content-scripts/main'
+
+// eslint-disable-next-line import/no-default-export
+export default defineContentScript({
+  matches: ['<all_urls>'],
+  world: 'MAIN',
+  main,
+})

developer-extension/src/entrypoints/devtools.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script type="module" src="../devtools"></script>
+  </head>
+  <body></body>
+</html>

developer-extension/src/entrypoints/panel.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="../panel"></script>
+  </body>
+</html>

developer-extension/src/panel/components/tabs/eventsTab/facetList.tsx

@@ -1,8 +1,8 @@
 import { Box, Button, Card, Checkbox, Collapse, Flex, Text } from '@mantine/core'
 import React from 'react'
 import type { FacetValuesFilter, FacetRegistry } from '../../../hooks/useEvents'
-import type { Facet } from '../../../facets.constants'
-import { FACET_ROOT, FacetValue } from '../../../facets.constants'
+import type { Facet, FacetValue } from '../../../facets.constants'
+import { FACET_ROOT } from '../../../facets.constants'
 import * as classes from './facetList.module.css'
 import { computeSelectionState } from './computeFacetState'
 

developer-extension/src/panel/components/tabs/eventsTab/rowButton.tsx

@@ -1,6 +1,5 @@
-import type { ActionIconProps } from '@mantine/core'
+import type { ActionIconProps, PolymorphicComponentProps } from '@mantine/core'
 import { ActionIcon } from '@mantine/core'
-import type { PolymorphicComponentProps } from '@mantine/core/lib/core/factory/create-polymorphic-component'
 import { default as clsx } from 'clsx'
 import type { JSXElementConstructor } from 'react'
 import React, { forwardRef } from 'react'

developer-extension/src/panel/hooks/useDevServerStatus.ts

@@ -14,7 +14,7 @@ export function useDevServerStatus(url: string) {
 
   useEffect(() => {
     const abortController = new AbortController()
-    let checkingTimeoutId: number
+    let checkingTimeoutId: ReturnType<typeof setTimeout>
 
     void refreshDevServerStatus(url, abortController.signal, (status) => {
       // We don't want to show the CHECKING state to quickly to avoid UI flashing. Delay the actual

developer-extension/tsconfig.webpack.json → developer-extension/tsconfig.json

@@ -2,9 +2,9 @@
   "extends": "../tsconfig.base.json",
 
   "compilerOptions": {
-    "baseUrl": ".",
     "module": "preserve",
     "target": "esnext",
+    "moduleResolution": "bundler",
     "jsx": "react",
     "lib": ["ES2022", "DOM"],
     "types": ["chrome", "react", "react-dom", "jasmine"],
@@ -13,5 +13,5 @@
     "noEmit": true
   },
 
-  "include": ["src"]
+  "include": ["src", "wxt.config.ts"]
 }