🔧 migrate the developer-extension to wxt

Author: BenoitZugmeyer

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/.gitignore

@@ -1 +1,2 @@
-/dist/
+/.output/
+/.wxt/

developer-extension/manifest.json

@@ -3,26 +3,18 @@
   "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",
+    "dev:firefox": "wxt -b firefox",
+    "zip": "wxt zip"
   },
   "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",
+    "@wxt-dev/module-react": "1.1.5",
     "typescript": "5.9.3",
-    "webpack": "5.102.1",
-    "webpack-cli": "^6.0.0",
-    "webpack-dev-server": "^5.0.4"
+    "wxt": "0.20.11"
   },
   "dependencies": {
     "@datadog/browser-core": "workspace:*",

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

developer-extension/public/icon.png

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

@@ -0,0 +1,3 @@
+export default defineBackground(() => {
+  import('../background')
+})

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

@@ -0,0 +1,8 @@
+import { main } from '../content-scripts/isolated'
+
+export default defineContentScript({
+  matches: ['<all_urls>'],
+  world: 'ISOLATED',
+  main,
+})
+

developer-extension/src/entrypoints/background.ts

@@ -0,0 +1,8 @@
+import { main } from '../content-scripts/main'
+
+export default defineContentScript({
+  matches: ['<all_urls>'],
+  world: 'MAIN',
+  main,
+})
+