✨ [RUMF-1396] migrate to manifest v3

developer-extension/manifest.json

@@ -1,13 +1,14 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Datadog Browser SDK developer extension",
-  "permissions": ["<all_urls>", "webRequest", "webRequestBlocking", "storage", "browsingData"],
+  "permissions": ["webRequest", "storage", "browsingData", "declarativeNetRequest"],
+  "host_permissions": ["<all_urls>"],
   "icons": {
     "256": "icon.png"
   },
   "background": {
-    "scripts": ["background.js"],
-    "persistent": true
+    "service_worker": "background.js",
+    "type": "module"
   },
   "devtools_page": "devtools.html"
 }

developer-extension/src/background/constants.ts

@@ -1,3 +1,16 @@
 export const DEV_LOGS_URL = 'http://localhost:8080/datadog-logs.js'
 export const DEV_RUM_URL = 'http://localhost:8080/datadog-rum.js'
 export const DEV_RUM_SLIM_URL = 'http://localhost:8080/datadog-rum-slim.js'
+
+export const INTAKE_DOMAINS = [
+  'browser-intake-datadoghq.com',
+  'browser-intake-datadoghq.eu',
+  'browser-intake-ddog-gov.com',
+  'browser-intake-us3-datadoghq.com',
+  'browser-intake-us5-datadoghq.com',
+  ...['com', 'eu'].flatMap((tld) => [
+    `public-trace-http-intake.logs.datadoghq.${tld}`,
+    `rum-http-intake.logs.datadoghq.${tld}`,
+    `browser-http-intake.logs.datadoghq.${tld}`,
+  ]),
+]

developer-extension/src/background/domain/refreshDevServerStatus.ts

@@ -0,0 +1,23 @@
+import { listenAction } from '../actions'
+import { DEV_LOGS_URL } from '../constants'
+import { setStore } from '../store'
+
+listenAction('getStore', () => {
+  refreshDevServerStatus().catch((error) =>
+    console.error('syncRules: Unexpected error while refreshing dev server status:', error)
+  )
+})
+
+async function refreshDevServerStatus() {
+  const timeoutId = setTimeout(() => setStore({ devServerStatus: 'checking' }), 500)
+  let isAvailable = false
+  try {
+    const response = await fetch(DEV_LOGS_URL, { method: 'HEAD' })
+    isAvailable = response.status === 200
+  } catch {
+    // The request can fail if nothing is listening on the URL port. In this case, consider the dev
+    // server 'unavailable'.
+  }
+  clearTimeout(timeoutId)
+  setStore({ devServerStatus: isAvailable ? 'available' : 'unavailable' })
+}

developer-extension/src/background/domain/syncRules.ts

@@ -0,0 +1,72 @@
+import { listenAction } from '../actions'
+import { DEV_LOGS_URL, DEV_RUM_SLIM_URL, DEV_RUM_URL, INTAKE_DOMAINS } from '../constants'
+import { store } from '../store'
+
+listenAction('setStore', (newStore) => {
+  if ('useDevBundles' in newStore || 'useRumSlim' in newStore || 'blockIntakeRequests' in newStore) {
+    void chrome.browsingData.removeCache({})
+    syncRules()
+  }
+})
+
+function syncRules() {
+  console.log('syncRules: Syncing rules')
+  chrome.declarativeNetRequest
+    .getSessionRules()
+    .then((existingRules) =>
+      chrome.declarativeNetRequest.updateSessionRules({
+        removeRuleIds: existingRules.map((rule) => rule.id),
+        addRules: getRules(),
+      })
+    )
+    .catch((error) => console.error('syncRules: Error while syncing rules:', error))
+}
+
+function getRules() {
+  const rules: chrome.declarativeNetRequest.Rule[] = []
+  let id = 1
+
+  if (store.useDevBundles) {
+    const devRumUrl = store.useRumSlim ? DEV_RUM_SLIM_URL : DEV_RUM_URL
+    console.log('syncRules: add redirect to dev bundles rules')
+    rules.push(
+      createRedirectRule(id++, /^https:\/\/.*\/datadog-rum(-v\d|canary|staging)?\.js$/, { url: devRumUrl }),
+      createRedirectRule(id++, /^https:\/\/.*\/datadog-rum-slim(-v\d|canary|staging)?\.js$/, { url: DEV_RUM_SLIM_URL }),
+      createRedirectRule(id++, /^https:\/\/.*\/datadog-logs(-v\d|canary|staging)?\.js$/, { url: DEV_LOGS_URL }),
+      createRedirectRule(id++, 'https://localhost:8443/static/datadog-rum-hotdog.js', { url: devRumUrl })
+    )
+  } else if (store.useRumSlim) {
+    console.log('syncRules: add redirect to rum slim rule')
+    rules.push(createRedirectRule(id++, /^(https:\/\/.*\/datadog-rum)(-slim)?/, { regexSubstitution: '\\1-slim' }))
+  }
+
+  if (store.blockIntakeRequests) {
+    console.log('syncRules: add block intake rules')
+    for (const intakeDomain of INTAKE_DOMAINS) {
+      rules.push({
+        id: id++,
+        condition: { urlFilter: `||${intakeDomain}` },
+        action: {
+          type: chrome.declarativeNetRequest.RuleActionType.BLOCK,
+        },
+      })
+    }
+  }
+
+  return rules
+}
+
+function createRedirectRule(
+  id: number,
+  filter: RegExp | string,
+  redirect: chrome.declarativeNetRequest.Redirect
+): chrome.declarativeNetRequest.Rule {
+  return {
+    id,
+    action: {
+      type: chrome.declarativeNetRequest.RuleActionType.REDIRECT,
+      redirect,
+    },
+    condition: typeof filter === 'string' ? { urlFilter: `|${filter}|` } : { regexFilter: filter.source },
+  }
+}

developer-extension/src/background/index.ts

@@ -1,2 +1,2 @@
-import './domain/replaceBundles'
-import './domain/blockIntakeRequests'
+import './domain/refreshDevServerStatus'
+import './domain/syncRules'