♻️ improve browser extension e2e tests (#3823)

Co-authored-by: beltran.bulbarella <[email protected]>

Author: thomas-lebeau

scripts/build/build-test-apps.ts

@@ -5,14 +5,9 @@ import { printLog, runMain } from '../lib/executionUtils.ts'
 import { command } from '../lib/command.ts'
 import { modifyFile } from '../lib/filesUtils.ts'
 
-interface ExtensionConfig {
-  name: string
-  initParameter: string
-}
-
-const EXTRA_EXTENSIONS: ExtensionConfig[] = [
-  { name: 'allowed-tracking-origin', initParameter: 'allowedTrackingOrigins: [/^chrome-extension:\\/\\//],' },
-  { name: 'invalid-tracking-origin', initParameter: "allowedTrackingOrigins: ['https://app.example.com']," },
+const OTHER_EXTENSIONS: Array<{ name: string; options?: { runAt?: string } }> = [
+  { name: 'cdn' },
+  { name: 'appendChild', options: { runAt: 'document_start' } },
 ]
 
 runMain(async () => {
@@ -66,17 +61,20 @@ async function buildExtensions(): Promise<void> {
 
   buildApp(baseExtDir)
 
-  for (const { name, initParameter } of EXTRA_EXTENSIONS) {
-    const targetDir = path.join('test/apps', name)
+  for (const { name, options } of OTHER_EXTENSIONS) {
+    const targetDir = path.join('test/apps', `${name}-extension`)
 
     fs.rmSync(targetDir, { recursive: true, force: true })
     fs.cpSync(baseExtDir, targetDir, { recursive: true })
 
-    const contentScriptPath = path.join(targetDir, 'src/contentScript.ts')
-    await modifyFile(contentScriptPath, (content: string) =>
-      content.replace(/\/\* EXTENSION_INIT_PARAMETER \*\//g, initParameter)
-    )
+    const manifestPath = path.join(targetDir, 'manifest.json')
+    await modifyFile(manifestPath, (originalContent: string) => {
+      let content = originalContent.replace('dist/base.js', `dist/${name}.js`)
 
-    buildApp(targetDir)
+      if (options?.runAt) {
+        content = content.replace('document_end', options.runAt)
+      }
+      return content
+    })
   }
 }

test/apps/.gitignore

@@ -1,3 +1,5 @@
 allowed-tracking-origin/
 invalid-tracking-origin/
 react-router-v7-app/
+cdn-extension/
+appendChild-extension/

test/apps/base-extension/manifest.json

@@ -5,19 +5,12 @@
   "description": "Injects Datadog RUM into every page to inspect data being sent.",
   "permissions": ["scripting", "activeTab"],
   "host_permissions": ["<all_urls>"],
-  "background": {
-    "service_worker": "dist/background.js",
-    "type": "module"
-  },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["dist/content-script.js"],
-      "run_at": "document_start"
+      "js": ["dist/base.js"],
+      "run_at": "document_end",
+      "world": "MAIN"
     }
-  ],
-  "action": {
-    "default_title": "Datadog RUM Testing Extension",
-    "default_popup": "src/popup.html"
-  }
+  ]
 }

test/apps/base-extension/src/appendChild.ts

@@ -0,0 +1,5 @@
+const originalAppendChild = Node.prototype.appendChild // eslint-disable-line @typescript-eslint/unbound-method
+
+Node.prototype.appendChild = function <T extends Node>(node: T): T {
+  return originalAppendChild.call(this, node) as T
+}

test/apps/base-extension/src/background.ts

@@ -0,0 +1,30 @@
+import { datadogRum } from '@datadog/browser-rum'
+import { datadogLogs } from '@datadog/browser-logs'
+import type { RumInitConfiguration } from '@datadog/browser-rum-core'
+import type { LogsInitConfiguration } from '@datadog/browser-logs'
+import type { Context } from '@datadog/browser-core'
+
+declare global {
+  interface Window {
+    EXT_RUM_CONFIGURATION?: RumInitConfiguration
+    RUM_CONTEXT?: Context
+    EXT_LOGS_CONFIGURATION?: LogsInitConfiguration
+    LOGS_CONTEXT?: Context
+  }
+}
+
+if (window.EXT_RUM_CONFIGURATION) {
+  datadogRum.init(window.EXT_RUM_CONFIGURATION)
+
+  if (window.RUM_CONTEXT) {
+    datadogRum.setGlobalContext(window.RUM_CONTEXT)
+  }
+}
+
+if (window.EXT_LOGS_CONFIGURATION) {
+  datadogLogs.init(window.EXT_LOGS_CONFIGURATION)
+
+  if (window.LOGS_CONTEXT) {
+    datadogLogs.setGlobalContext(window.LOGS_CONTEXT)
+  }
+}

test/apps/base-extension/src/base.ts

@@ -0,0 +1,47 @@
+import type { RumInitConfiguration, RumPublicApi } from '@datadog/browser-rum-core'
+import type { LogsInitConfiguration, LogsGlobal } from '@datadog/browser-logs'
+import type { Context } from '@datadog/browser-core'
+
+declare global {
+  interface Window {
+    RUM_BUNDLE_URL?: string
+    LOGS_BUNDLE_URL?: string
+    EXT_RUM_CONFIGURATION?: RumInitConfiguration
+    RUM_CONTEXT?: Context
+    EXT_LOGS_CONFIGURATION?: LogsInitConfiguration
+    LOGS_CONTEXT?: Context
+    DD_RUM?: RumPublicApi
+    DD_LOGS?: LogsGlobal
+  }
+}
+
+function load<T extends 'DD_RUM' | 'DD_LOGS'>(
+  sdk: T,
+  url: string,
+  initConfig: T extends 'DD_RUM' ? RumInitConfiguration : LogsInitConfiguration,
+  globalContext?: Context
+) {
+  const script = document.createElement('script')
+  script.src = url
+  script.onload = () => {
+    if (!window[sdk]) {
+      console.error(`${sdk} is not loaded`)
+      return
+    }
+
+    window[sdk].init(initConfig as any)
+    if (globalContext) {
+      window[sdk].setGlobalContext(globalContext)
+    }
+  }
+
+  document.documentElement.appendChild(script)
+}
+
+if (window.RUM_BUNDLE_URL && window.EXT_RUM_CONFIGURATION) {
+  load('DD_RUM', window.RUM_BUNDLE_URL, window.EXT_RUM_CONFIGURATION, window.RUM_CONTEXT)
+}
+
+if (window.LOGS_BUNDLE_URL && window.EXT_LOGS_CONFIGURATION) {
+  load('DD_LOGS', window.LOGS_BUNDLE_URL, window.EXT_LOGS_CONFIGURATION, window.LOGS_CONTEXT)
+}