🧪 add e2e test for false positive allowed extension

thomas-lebeau · thomas-lebeau · commit e2afc18d43b1 · 2025-09-09T17:23:10.000+02:00
diff --git a/scripts/build/build-test-apps.ts b/scripts/build/build-test-apps.ts
@@ -5,6 +5,11 @@ import { printLog, runMain } from '../lib/executionUtils.ts'
 import { command } from '../lib/command.ts'
 import { modifyFile } from '../lib/filesUtils.ts'
 
+const OTHER_EXTENSIONS: Array<{ name: string; options?: { runAt?: string } }> = [
+  { name: 'cdn' },
+  { name: 'appendChild', options: { runAt: 'document_start' } },
+]
+
 runMain(async () => {
   printLog('Packing packages...')
   command`yarn lerna run pack`.run()
@@ -56,14 +61,20 @@ async function buildExtensions(): Promise<void> {
 
   buildApp(baseExtDir)
 
-  const cdnExtDir = 'test/apps/cdn-extension'
-  fs.rmSync(cdnExtDir, { recursive: true, force: true })
-  fs.cpSync(baseExtDir, cdnExtDir, { recursive: true })
+  for (const { name, options } of OTHER_EXTENSIONS) {
+    const targetDir = path.join('test/apps', `${name}-extension`)
 
-  const manifestPath = path.join(cdnExtDir, 'manifest.json')
-  await modifyFile(manifestPath, (content: string) =>
-    content.replace('dist/npm-content-script.js', 'dist/cdn-content-script.js')
-  )
+    fs.rmSync(targetDir, { recursive: true, force: true })
+    fs.cpSync(baseExtDir, targetDir, { recursive: true })
+
+    const manifestPath = path.join(targetDir, 'manifest.json')
+    await modifyFile(manifestPath, (originalContent: string) => {
+      let content = originalContent.replace('dist/base.js', `dist/${name}.js`)
 
-  buildApp(cdnExtDir)
+      if (options?.runAt) {
+        content = content.replace('document_end', options.runAt)
+      }
+      return content
+    })
+  }
 }
diff --git a/test/apps/.gitignore b/test/apps/.gitignore
@@ -2,3 +2,4 @@ allowed-tracking-origin/
 invalid-tracking-origin/
 react-router-v7-app/
 cdn-extension/
+appendChild-extension/
diff --git a/test/apps/base-extension/manifest.json b/test/apps/base-extension/manifest.json
@@ -8,7 +8,7 @@
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["dist/npm-content-script.js"],
+      "js": ["dist/base.js"],
       "run_at": "document_end",
       "world": "MAIN"
     }
diff --git a/test/apps/base-extension/src/appendChild.ts b/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
+}
diff --git a/test/apps/base-extension/src/base.ts b/test/apps/base-extension/src/base.ts
@@ -6,23 +6,23 @@ import type { Context } from '@datadog/browser-core'
 
 declare global {
   interface Window {
-    RUM_CONFIGURATION?: RumInitConfiguration
+    EXT_RUM_CONFIGURATION?: RumInitConfiguration
     RUM_CONTEXT?: Context
-    LOGS_CONFIGURATION?: LogsInitConfiguration
+    EXT_LOGS_CONFIGURATION?: LogsInitConfiguration
     LOGS_CONTEXT?: Context
   }
 }
 
-if (window.RUM_CONFIGURATION) {
-  datadogRum.init(window.RUM_CONFIGURATION)
+if (window.EXT_RUM_CONFIGURATION) {
+  datadogRum.init(window.EXT_RUM_CONFIGURATION)
 
   if (window.RUM_CONTEXT) {
     datadogRum.setGlobalContext(window.RUM_CONTEXT)
   }
 }
 
-if (window.LOGS_CONFIGURATION) {
-  datadogLogs.init(window.LOGS_CONFIGURATION)
+if (window.EXT_LOGS_CONFIGURATION) {
+  datadogLogs.init(window.EXT_LOGS_CONFIGURATION)
 
   if (window.LOGS_CONTEXT) {
     datadogLogs.setGlobalContext(window.LOGS_CONTEXT)
diff --git a/test/apps/base-extension/src/cdn.ts b/test/apps/base-extension/src/cdn.ts
@@ -6,9 +6,9 @@ declare global {
   interface Window {
     RUM_BUNDLE_URL?: string
     LOGS_BUNDLE_URL?: string
-    RUM_CONFIGURATION?: RumInitConfiguration
+    EXT_RUM_CONFIGURATION?: RumInitConfiguration
     RUM_CONTEXT?: Context
-    LOGS_CONFIGURATION?: LogsInitConfiguration
+    EXT_LOGS_CONFIGURATION?: LogsInitConfiguration
     LOGS_CONTEXT?: Context
     DD_RUM?: RumPublicApi
     DD_LOGS?: LogsGlobal
@@ -38,10 +38,10 @@ function load<T extends 'DD_RUM' | 'DD_LOGS'>(
   document.documentElement.appendChild(script)
 }
 
-if (window.RUM_BUNDLE_URL && window.RUM_CONFIGURATION) {
-  load('DD_RUM', window.RUM_BUNDLE_URL, window.RUM_CONFIGURATION, window.RUM_CONTEXT)
+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.LOGS_CONFIGURATION) {
-  load('DD_LOGS', window.LOGS_BUNDLE_URL, window.LOGS_CONFIGURATION, window.LOGS_CONTEXT)
+if (window.LOGS_BUNDLE_URL && window.EXT_LOGS_CONFIGURATION) {
+  load('DD_LOGS', window.LOGS_BUNDLE_URL, window.EXT_LOGS_CONFIGURATION, window.LOGS_CONTEXT)
 }
diff --git a/test/apps/base-extension/webpack.config.js b/test/apps/base-extension/webpack.config.js
@@ -4,8 +4,9 @@ module.exports = {
   mode: 'production',
   target: ['web', 'es2018'],
   entry: {
-    'npm-content-script': './src/npmContentScript.ts',
-    'cdn-content-script': './src/cdnContentScript.ts',
+    base: './src/base.ts',
+    cdn: './src/cdn.ts',
+    appendChild: './src/appendChild.ts',
   },
   module: {
     rules: [
diff --git a/test/e2e/lib/framework/createExtension.ts b/test/e2e/lib/framework/createExtension.ts
@@ -0,0 +1,45 @@
+import path from 'path'
+import type { RumInitConfiguration } from '@datadog/browser-rum-core'
+import type test from '@playwright/test'
+import type { LogsInitConfiguration } from '@datadog/browser-logs'
+import { createExtensionTest } from '../helpers/extensionFixture'
+import { DEFAULT_LOGS_CONFIGURATION, DEFAULT_RUM_CONFIGURATION } from './createTest'
+
+export function createExtension(name: string) {
+  return new Extension(name)
+}
+
+// TODO: the recorder is lazy loaded and does not works in an browser extension content script
+const DISABLE_SESSION_REPLAY_CONFIGURATION = { sessionReplaySampleRate: 0 }
+
+export class Extension {
+  public fixture: typeof test
+  public rumConfiguration: RumInitConfiguration | undefined
+  public logsConfiguration: LogsInitConfiguration | undefined
+
+  constructor(name: string) {
+    this.fixture = createExtensionTest(path.join(__dirname, '../../../../test/apps/', `${name}-extension`))
+
+    return this
+  }
+
+  withRum(rumInitConfiguration: Partial<RumInitConfiguration> = {}) {
+    this.rumConfiguration = {
+      ...DEFAULT_RUM_CONFIGURATION,
+      ...DISABLE_SESSION_REPLAY_CONFIGURATION,
+      ...rumInitConfiguration,
+    }
+
+    return this
+  }
+
+  withLogs(logsInitConfiguration: Partial<LogsInitConfiguration> = {}) {
+    this.logsConfiguration = {
+      ...DEFAULT_LOGS_CONFIGURATION,
+      ...DISABLE_SESSION_REPLAY_CONFIGURATION,
+      ...logsInitConfiguration,
+    }
+
+    return this
+  }
+}
diff --git a/test/e2e/lib/framework/createTest.ts b/test/e2e/lib/framework/createTest.ts
@@ -3,7 +3,6 @@ import type { RumInitConfiguration, RemoteConfiguration } from '@datadog/browser
 import { DefaultPrivacyLevel } from '@datadog/browser-rum'
 import type { BrowserContext, Page } from '@playwright/test'
 import { test, expect } from '@playwright/test'
-import { createExtensionTest } from '../helpers/extensionFixture'
 import { addTag, addTestOptimizationTags } from '../helpers/tags'
 import { getRunId } from '../../../envUtils'
 import type { BrowserLog } from '../helpers/browser'
@@ -16,9 +15,10 @@ import { flushEvents } from './flushEvents'
 import type { Servers } from './httpServers'
 import { getTestServers, waitForServersIdle } from './httpServers'
 import type { SetupFactory, SetupOptions } from './pageSetups'
-import { DEFAULT_SETUPS, extensionSetup, npmSetup, reactSetup } from './pageSetups'
+import { asyncSetup, DEFAULT_SETUPS, npmSetup, reactSetup } from './pageSetups'
 import { createIntakeServerApp } from './serverApps/intake'
 import { createMockServerApp } from './serverApps/mock'
+import type { Extension } from './createExtension'
 
 export const DEFAULT_RUM_CONFIGURATION = {
   applicationId: APPLICATION_ID,
@@ -76,6 +76,10 @@ class TestBuilder {
   private eventBridge = false
   private setups: Array<{ factory: SetupFactory; name?: string }> = DEFAULT_SETUPS
   private testFixture: typeof test = test
+  private extension: {
+    rumConfiguration?: RumInitConfiguration
+    logsConfiguration?: LogsInitConfiguration
+  } = {}
 
   constructor(private title: string) {}
 
@@ -129,9 +133,17 @@ class TestBuilder {
     return this
   }
 
-  withExtension(extensionPath: string) {
-    this.testFixture = createExtensionTest(extensionPath)
-    this.setups = [{ factory: (options, servers) => extensionSetup(options, servers) }]
+  withSetup(setup: SetupFactory) {
+    this.setups = [{ factory: setup }]
+    return this
+  }
+
+  withExtension(extension: Extension) {
+    this.testFixture = extension.fixture
+    this.setups = [{ factory: asyncSetup, name: 'async' }]
+    this.extension.rumConfiguration = extension.rumConfiguration
+    this.extension.logsConfiguration = extension.logsConfiguration
+
     return this
   }
 
@@ -157,6 +169,7 @@ class TestBuilder {
         test_name: '<PLACEHOLDER>',
       },
       testFixture: this.testFixture,
+      extension: this.extension,
     }
 
     if (this.alsoRunWithRumSlim) {
@@ -203,7 +216,7 @@ function declareTestsForSetups(
 }
 
 function declareTest(title: string, setupOptions: SetupOptions, factory: SetupFactory, runner: TestRunner) {
-  const testFixture = setupOptions.testFixture
+  const testFixture = setupOptions.testFixture ?? test
   testFixture(title, async ({ page, context }) => {
     const browserName = getBrowserName(test.info().project.name)
     addTag('test.browserName', browserName)
diff --git a/test/e2e/lib/framework/index.ts b/test/e2e/lib/framework/index.ts
@@ -1,5 +1,6 @@
 export { createTest, DEFAULT_RUM_CONFIGURATION, DEFAULT_LOGS_CONFIGURATION } from './createTest'
-export { bundleSetup, html, npmSetup, reactSetup } from './pageSetups'
+export { createExtension } from './createExtension'
+export { bundleSetup, html, npmSetup, reactSetup, formatConfiguration, createCrossOriginScriptUrls } from './pageSetups'
 export { IntakeRegistry } from './intakeRegistry'
 export { getTestServers, waitForServersIdle } from './httpServers'
 export { flushEvents } from './flushEvents'
diff --git a/test/e2e/lib/framework/pageSetups.ts b/test/e2e/lib/framework/pageSetups.ts
@@ -20,6 +20,10 @@ export interface SetupOptions {
     test_name: string
   }
   testFixture: typeof test
+  extension?: {
+    rumConfiguration?: RumInitConfiguration
+    logsConfiguration?: LogsInitConfiguration
+  }
 }
 
 export type SetupFactory = (options: SetupOptions, servers: Servers) => string
@@ -46,6 +50,10 @@ export function asyncSetup(options: SetupOptions, servers: Servers) {
     header += setupEventBridge(servers)
   }
 
+  if (options.extension) {
+    header += setupExtension(options, servers)
+  }
+
   function formatSnippet(url: string, globalName: string) {
     return `(function(h,o,u,n,d) {
 h=h[d]=h[d]||{q:[],onReady:function(c){h.q.push(c)}}
@@ -93,6 +101,10 @@ export function bundleSetup(options: SetupOptions, servers: Servers) {
     header += setupEventBridge(servers)
   }
 
+  if (options.extension) {
+    header += setupExtension(options, servers)
+  }
+
   const { logsScriptUrl, rumScriptUrl } = createCrossOriginScriptUrls(servers, options)
 
   if (options.logs) {
@@ -129,6 +141,10 @@ export function npmSetup(options: SetupOptions, servers: Servers) {
     header += setupEventBridge(servers)
   }
 
+  if (options.extension) {
+    header += setupExtension(options, servers)
+  }
+
   if (options.logs) {
     header += html`
       <script type="text/javascript">
@@ -167,52 +183,20 @@ export function reactSetup(options: SetupOptions, servers: Servers, appName: str
     header += setupEventBridge(servers)
   }
 
-  if (options.rum) {
-    header += html`
-      <script type="text/javascript">
-        window.RUM_CONFIGURATION = ${formatConfiguration(options.rum, servers)}
-        window.RUM_CONTEXT = ${JSON.stringify(options.context)}
-      </script>
-    `
-  }
-
-  body += html` <script type="text/javascript" src="./${appName}.js"></script> `
-
-  return basePage({
-    header,
-    body,
-  })
-}
-
-export function extensionSetup(options: SetupOptions, servers: Servers) {
-  let header = options.head || ''
-  const body = options.body || ''
-
-  if (options.eventBridge) {
-    header += setupEventBridge(servers)
+  if (options.extension) {
+    header += setupExtension(options, servers)
   }
 
-  const { rumScriptUrl, logsScriptUrl } = createCrossOriginScriptUrls(servers, options)
-
   if (options.rum) {
     header += html`
       <script type="text/javascript">
-        window.RUM_BUNDLE_URL = '${rumScriptUrl}'
         window.RUM_CONFIGURATION = ${formatConfiguration(options.rum, servers)}
         window.RUM_CONTEXT = ${JSON.stringify(options.context)}
       </script>
     `
   }
 
-  if (options.logs) {
-    header += html`
-      <script type="text/javascript">
-        window.LOGS_BUNDLE_URL = ${logsScriptUrl}
-        window.LOGS_CONFIGURATION = ${formatConfiguration(options.logs, servers)}
-        window.LOGS_CONTEXT = ${JSON.stringify(options.context)}
-      </script>
-    `
-  }
+  body += html` <script type="text/javascript" src="./${appName}.js"></script> `
 
   return basePage({
     header,
@@ -273,7 +257,35 @@ function setupEventBridge(servers: Servers) {
   `
 }
 
-function formatConfiguration(initConfiguration: LogsInitConfiguration | RumInitConfiguration, servers: Servers) {
+function setupExtension(options: SetupOptions, servers: Servers) {
+  let header = ''
+
+  const { rumScriptUrl, logsScriptUrl } = createCrossOriginScriptUrls(servers, { ...options, useRumSlim: false })
+
+  if (options.extension?.rumConfiguration) {
+    header += html`
+      <script type="text/javascript">
+        window.RUM_BUNDLE_URL = '${rumScriptUrl}'
+        window.RUM_CONTEXT = ${JSON.stringify(options.context)}
+        window.EXT_RUM_CONFIGURATION = ${formatConfiguration(options.extension.rumConfiguration, servers)}
+      </script>
+    `
+  }
+
+  if (options.extension?.logsConfiguration) {
+    header += html`
+      <script type="text/javascript">
+        window.LOGS_BUNDLE_URL = ${logsScriptUrl}
+        window.LOGS_CONTEXT = ${JSON.stringify(options.context)}
+        window.EXT_LOGS_CONFIGURATION = ${formatConfiguration(options.extension.logsConfiguration, servers)}
+      </script>
+    `
+  }
+
+  return header
+}
+
+export function formatConfiguration(initConfiguration: LogsInitConfiguration | RumInitConfiguration, servers: Servers) {
   const fns = new Map<string, () => void>()
 
   let result = JSON.stringify(
@@ -304,7 +316,7 @@ function formatConfiguration(initConfiguration: LogsInitConfiguration | RumInitC
   return result
 }
 
-function createCrossOriginScriptUrls(servers: Servers, options: SetupOptions) {
+export function createCrossOriginScriptUrls(servers: Servers, options: SetupOptions) {
   return {
     logsScriptUrl: `${servers.crossOrigin.url}/datadog-logs.js`,
     rumScriptUrl: `${servers.crossOrigin.url}/${options.useRumSlim ? 'datadog-rum-slim.js' : 'datadog-rum.js'}`,
diff --git a/test/e2e/scenario/browser-extensions/browserExtensions.scenario.ts b/test/e2e/scenario/browser-extensions/browserExtensions.scenario.ts

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`"content_scripts": [`
`9`	`9`	`{`
`10`	`10`	`"matches": ["<all_urls>"],`
`11`		`- "js": ["dist/npm-content-script.js"],`
	`11`	`+ "js": ["dist/base.js"],`
`12`	`12`	`"run_at": "document_end",`
`13`	`13`	`"world": "MAIN"`
`14`	`14`	`}`