From 670bf5453d2c7edd6d4c6d8c3b49856ee63a6e75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beno=C3=AEt=20Zugmeyer?= Date: Thu, 17 Nov 2022 14:19:40 +0100 Subject: [PATCH 1/5] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20[RUMF-1396]=20update?= =?UTF-8?q?=20webpack-extension-plugin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This package has been updated with various fixes to support Manifest V3 --- LICENSE-3rdparty.csv | 2 +- developer-extension/package.json | 4 +- developer-extension/webpack.config.js | 2 +- yarn.lock | 97 ++++++++++----------------- 4 files changed, 38 insertions(+), 67 deletions(-) diff --git a/LICENSE-3rdparty.csv b/LICENSE-3rdparty.csv index 0876fd0a54..487d45cc84 100644 --- a/LICENSE-3rdparty.csv +++ b/LICENSE-3rdparty.csv @@ -30,6 +30,7 @@ dev,@wdio/junit-reporter,MIT,Copyright (c) OpenJS Foundation and other contribut dev,@wdio/local-runner,MIT,Copyright JS Foundation and other contributors dev,@wdio/selenium-standalone-service,MIT,Copyright JS Foundation and other contributors dev,@wdio/spec-reporter,MIT,Copyright JS Foundation and other contributors +dev,@webextension-toolbox/webpack-webextension-plugin,MIT,Copyright 2018 Henrik Wenz (handtrix@gmail.com) dev,ajv,MIT,Copyright 2015-2017 Evgeny Poberezkin dev,browserstack-local,MIT,Copyright 2016 BrowserStack dev,connect-busboy,MIT,Copyright Brian White @@ -77,5 +78,4 @@ dev,webdriverio,MIT,Copyright JS Foundation and other contributors dev,webpack,MIT,Copyright JS Foundation and other contributors dev,webpack-cli,MIT,Copyright JS Foundation and other contributors dev,webpack-dev-middleware,MIT,Copyright JS Foundation and other contributors -dev,webpack-webextension-plugin,MIT,Copyright 2018 Henrik Wenz (handtrix@gmail.com) dev,node-fetch,MIT,Copyright 2016-2020 Node Fetch Team diff --git a/developer-extension/package.json b/developer-extension/package.json index 2d325aaf71..926bfa4d91 100644 --- a/developer-extension/package.json +++ b/developer-extension/package.json @@ -10,10 +10,10 @@ "@types/chrome": "0.0.180", "@types/react": "18.0.1", "@types/react-dom": "18.0.0", + "@webextension-toolbox/webpack-webextension-plugin": "2.1.3", "copy-webpack-plugin": "8.1.0", "html-webpack-plugin": "5.3.1", - "webpack": "5.28.0", - "webpack-webextension-plugin": "0.4.1" + "webpack": "5.28.0" }, "dependencies": { "@emotion/react": "11.10.0", diff --git a/developer-extension/webpack.config.js b/developer-extension/webpack.config.js index 07b4125f5c..a500f9e309 100644 --- a/developer-extension/webpack.config.js +++ b/developer-extension/webpack.config.js @@ -1,5 +1,5 @@ const HtmlWebpackPlugin = require('html-webpack-plugin') -const WebextensionPlugin = require('webpack-webextension-plugin') +const { default: WebextensionPlugin } = require('@webextension-toolbox/webpack-webextension-plugin') const CopyPlugin = require('copy-webpack-plugin') const { DefinePlugin } = require('webpack') diff --git a/yarn.lock b/yarn.lock index 7e828060c8..86adee3e30 100644 --- a/yarn.lock +++ b/yarn.lock @@ -451,18 +451,6 @@ resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6" integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw== -"@hapi/hoek@^9.0.0": - version "9.1.1" - resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.1.tgz#9daf5745156fd84b8e9889a2dc721f0c58e894aa" - integrity sha512-CAEbWH7OIur6jEOzaai83jq3FmKmv4PmX1JYfs9IrYcGEVI/lyL1EXJGCj7eFVJ0bg5QR8LMxBlEtA+xKiLpFw== - -"@hapi/topo@^5.0.0": - version "5.0.0" - resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-5.0.0.tgz#c19af8577fa393a06e9c77b60995af959be721e7" - integrity sha512-tFJlT47db0kMqVm3H4nQYgn6Pwg10GTZHb1pwmSiv1K4ks6drQOtfEF5ZnPjkvC+y4/bUPHK+bc87QvLcL+WMw== - dependencies: - "@hapi/hoek" "^9.0.0" - "@humanwhocodes/config-array@^0.9.2": version "0.9.5" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7" @@ -1701,23 +1689,6 @@ dependencies: "@babel/runtime" "^7.13.10" -"@sideway/address@^4.1.0": - version "4.1.0" - resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.0.tgz#0b301ada10ac4e0e3fa525c90615e0b61a72b78d" - integrity sha512-wAH/JYRXeIFQRsxerIuLjgUu2Xszam+O5xKeatJ4oudShOOirfmsQ1D6LL54XOU2tizpCYku+s1wmU0SYdpoSA== - dependencies: - "@hapi/hoek" "^9.0.0" - -"@sideway/formula@^3.0.0": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.0.tgz#fe158aee32e6bd5de85044be615bc08478a0a13c" - integrity sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg== - -"@sideway/pinpoint@^2.0.0": - version "2.0.0" - resolved "https://registry.yarnpkg.com/@sideway/pinpoint/-/pinpoint-2.0.0.tgz#cff8ffadc372ad29fd3f78277aeb29e632cc70df" - integrity sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ== - "@sindresorhus/is@^4.0.0": version "4.6.0" resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-4.6.0.tgz#3c7c9c46e678feefe7a2e5bb609d3dbd665ffb3f" @@ -1831,6 +1802,14 @@ "@types/filesystem" "*" "@types/har-format" "*" +"@types/chrome@^0.0.188": + version "0.0.188" + resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.188.tgz#ed73feca28a6d84f796ec50a2dbe7e41510175b3" + integrity sha512-fVxbcnSrQqCaaTFfaP9QooRr0Lf47Ni+QVGpd4SQafe6x8RlLrlp+AAgc4QKNUVK7W6xEoOePMAu5sBXrc2qhA== + dependencies: + "@types/filesystem" "*" + "@types/har-format" "*" + "@types/color-name@^1.1.1": version "1.1.1" resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" @@ -2732,6 +2711,17 @@ "@webassemblyjs/ast" "1.11.0" "@xtuc/long" "4.2.2" +"@webextension-toolbox/webpack-webextension-plugin@2.1.3": + version "2.1.3" + resolved "https://registry.yarnpkg.com/@webextension-toolbox/webpack-webextension-plugin/-/webpack-webextension-plugin-2.1.3.tgz#c4c0dad248af98646c11ef1f8f9ad5163a7e7c66" + integrity sha512-c4XwXsmypxMq2kmer5dDVRUr3HgdFz/vytu6bv6po83KSxdzr9dpRTsQDS/mVvlBoSIzmGcPcVVCVdugDTmdKg== + dependencies: + "@types/chrome" "^0.0.188" + ajv "^6.12.6" + mustache "^4.2.0" + webpack-sources "^3.2.3" + ws "8.7.0" + "@webpack-cli/configtest@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.0.1.tgz#241aecfbdc715eee96bed447ed402e12ec171935" @@ -2882,7 +2872,7 @@ ajv-keywords@^3.5.2: resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d" integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ== -ajv@6.12.6, ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5: +ajv@6.12.6, ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5, ajv@^6.12.6: version "6.12.6" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4" integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g== @@ -3475,14 +3465,6 @@ chalk@4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@4.1.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad" - integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg== - dependencies: - ansi-styles "^4.1.0" - supports-color "^7.1.0" - chalk@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" @@ -6530,17 +6512,6 @@ jest-worker@^26.6.2: merge-stream "^2.0.0" supports-color "^7.0.0" -joi@17.4.0: - version "17.4.0" - resolved "https://registry.yarnpkg.com/joi/-/joi-17.4.0.tgz#b5c2277c8519e016316e49ababd41a1908d9ef20" - integrity sha512-F4WiW2xaV6wc1jxete70Rw4V/VuMd6IN+a5ilZsxG4uYtUXWu2kq9W5P2dz30e7Gmw8RCbY/u/uk+dMPma9tAg== - dependencies: - "@hapi/hoek" "^9.0.0" - "@hapi/topo" "^5.0.0" - "@sideway/address" "^4.1.0" - "@sideway/formula" "^3.0.0" - "@sideway/pinpoint" "^2.0.0" - js-polyfills@0.1.43: version "0.1.43" resolved "https://registry.yarnpkg.com/js-polyfills/-/js-polyfills-0.1.43.tgz#6ec32030b05dc71a4257a950d1c4eaf301bb8035" @@ -7594,6 +7565,11 @@ multimatch@^5.0.0: arrify "^2.0.1" minimatch "^3.0.4" +mustache@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.2.0.tgz#e5892324d60a12ec9c2a73359edca52972bf6f64" + integrity sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ== + mute-stream@0.0.8, mute-stream@~0.0.4: version "0.0.8" resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" @@ -10466,15 +10442,10 @@ webpack-sources@^2.1.1: source-list-map "^2.0.1" source-map "^0.6.1" -webpack-webextension-plugin@0.4.1: - version "0.4.1" - resolved "https://registry.yarnpkg.com/webpack-webextension-plugin/-/webpack-webextension-plugin-0.4.1.tgz#cf55123286d2a1557575f95462a67459d904fb68" - integrity sha512-2w79Cj/qfjZwLOylaoraTVKCwoKvkThLZKqdJaDWyU0k5nGHNCb7IVtvxXJ1q9JycjBKYtV2jvGoWtfD334HnQ== - dependencies: - chalk "4.1.1" - joi "17.4.0" - strip-ansi "^6.0.0" - ws "7.5.1" +webpack-sources@^3.2.3: + version "3.2.3" + resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde" + integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w== webpack@5.28.0: version "5.28.0" @@ -10634,16 +10605,16 @@ write-pkg@^4.0.0: type-fest "^0.4.1" write-json-file "^3.2.0" -ws@7.5.1: - version "7.5.1" - resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.1.tgz#44fc000d87edb1d9c53e51fbc69a0ac1f6871d66" - integrity sha512-2c6faOUH/nhoQN6abwMloF7Iyl0ZS2E9HGtsiLrWn0zOOMWlhtDmdf/uihDt6jnuCxgtwGBNy6Onsoy2s2O2Ow== - ws@8.5.0: version "8.5.0" resolved "https://registry.yarnpkg.com/ws/-/ws-8.5.0.tgz#bfb4be96600757fe5382de12c670dab984a1ed4f" integrity sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg== +ws@8.7.0: + version "8.7.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.7.0.tgz#eaf9d874b433aa00c0e0d8752532444875db3957" + integrity sha512-c2gsP0PRwcLFzUiA8Mkr37/MI7ilIlHQxaEAtd0uNMbVMoy8puJyafRlm0bV9MbGSabUPeLrRRaqIBcFcA2Pqg== + ws@^7.2.3: version "7.4.6" resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c" From 6bd09cfbe1d319eb1ef4c1f577c0e63192966d65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beno=C3=AEt=20Zugmeyer?= Date: Thu, 17 Nov 2022 18:37:25 +0100 Subject: [PATCH 2/5] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20[RUMF-1396]=20update?= =?UTF-8?q?=20chrome=20types=20to=20have=20proper=20manifest=20V3=20types?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- developer-extension/package.json | 2 +- yarn.lock | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/developer-extension/package.json b/developer-extension/package.json index 926bfa4d91..4e966fa5b8 100644 --- a/developer-extension/package.json +++ b/developer-extension/package.json @@ -7,7 +7,7 @@ "dev": "webpack --mode development --watch" }, "devDependencies": { - "@types/chrome": "0.0.180", + "@types/chrome": "0.0.202", "@types/react": "18.0.1", "@types/react-dom": "18.0.0", "@webextension-toolbox/webpack-webextension-plugin": "2.1.3", diff --git a/yarn.lock b/yarn.lock index 86adee3e30..5e937526be 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1802,6 +1802,14 @@ "@types/filesystem" "*" "@types/har-format" "*" +"@types/chrome@0.0.202": + version "0.0.202" + resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.202.tgz#ecc6747cc797b6b8427cbb5d9723c91dfc8bd3f4" + integrity sha512-Oc4daL9sFS+9MToVZPLMBxR7PxsEdod0b8wOY11lRr06GJp43MORvHeDyMD8QzeRGT6HI13oaYAe2PBgvALc4w== + dependencies: + "@types/filesystem" "*" + "@types/har-format" "*" + "@types/chrome@^0.0.188": version "0.0.188" resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.188.tgz#ed73feca28a6d84f796ec50a2dbe7e41510175b3" From ef59bd29a83e5b01d574c5471d56d628d6923137 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beno=C3=AEt=20Zugmeyer?= Date: Thu, 17 Nov 2022 16:17:12 +0100 Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=94=A5=20[RUMF-1396]=20remove=20unuse?= =?UTF-8?q?d=20tabs=20permission=20and=20util=20module?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Removed some dead code that won't work anymore with Manifest V3 --- developer-extension/manifest.json | 2 +- developer-extension/src/background/utils.ts | 21 --------------------- 2 files changed, 1 insertion(+), 22 deletions(-) delete mode 100644 developer-extension/src/background/utils.ts diff --git a/developer-extension/manifest.json b/developer-extension/manifest.json index 6ed9668fbb..7e245d2ce1 100644 --- a/developer-extension/manifest.json +++ b/developer-extension/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "Datadog Browser SDK developer extension", - "permissions": ["", "tabs", "webRequest", "webRequestBlocking", "storage", "browsingData"], + "permissions": ["", "webRequest", "webRequestBlocking", "storage", "browsingData"], "icons": { "256": "icon.png" }, diff --git a/developer-extension/src/background/utils.ts b/developer-extension/src/background/utils.ts deleted file mode 100644 index 14d4bc1bec..0000000000 --- a/developer-extension/src/background/utils.ts +++ /dev/null @@ -1,21 +0,0 @@ -export function evaluateCodeInActiveTab(code: (arg?: string) => void, arg?: string) { - chrome.tabs.query({ currentWindow: true, active: true }, (tabs) => { - for (const tab of tabs) { - if (tab.id) { - evaluateCodeInline(tab.id, code, arg) - } - } - }) -} - -function evaluateCodeInline(tabId: number, code: (arg?: string) => void, arg?: string) { - void chrome.tabs.executeScript(tabId, { - code: `{ - const script = document.createElement('script') - script.setAttribute("type", "module") - script.textContent = ${JSON.stringify(`(${String(code)})(${JSON.stringify(arg)})`)} - document.body.appendChild(script) - script.remove() - }`, - }) -} From c866c1b20f225099a6f688e726645b1d246e0190 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beno=C3=AEt=20Zugmeyer?= Date: Thu, 17 Nov 2022 11:52:40 +0100 Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20[RUMF-1396]=20migrate=20to=20ma?= =?UTF-8?q?nifest=20v3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- developer-extension/manifest.json | 9 +-- .../src/background/constants.ts | 13 ++++ .../background/domain/blockIntakeRequests.ts | 15 ---- .../domain/refreshDevServerStatus.ts | 23 ++++++ .../src/background/domain/replaceBundles.ts | 69 ------------------ .../src/background/domain/syncRules.ts | 72 +++++++++++++++++++ developer-extension/src/background/index.ts | 4 +- .../src/background/intakeUrlPatterns.ts | 18 ----- 8 files changed, 115 insertions(+), 108 deletions(-) delete mode 100644 developer-extension/src/background/domain/blockIntakeRequests.ts create mode 100644 developer-extension/src/background/domain/refreshDevServerStatus.ts delete mode 100644 developer-extension/src/background/domain/replaceBundles.ts create mode 100644 developer-extension/src/background/domain/syncRules.ts delete mode 100644 developer-extension/src/background/intakeUrlPatterns.ts diff --git a/developer-extension/manifest.json b/developer-extension/manifest.json index 7e245d2ce1..2f03196371 100644 --- a/developer-extension/manifest.json +++ b/developer-extension/manifest.json @@ -1,13 +1,14 @@ { - "manifest_version": 2, + "manifest_version": 3, "name": "Datadog Browser SDK developer extension", - "permissions": ["", "webRequest", "webRequestBlocking", "storage", "browsingData"], + "permissions": ["webRequest", "storage", "browsingData", "declarativeNetRequest"], + "host_permissions": [""], "icons": { "256": "icon.png" }, "background": { - "scripts": ["background.js"], - "persistent": true + "service_worker": "background.js", + "type": "module" }, "devtools_page": "devtools.html" } diff --git a/developer-extension/src/background/constants.ts b/developer-extension/src/background/constants.ts index 35cdb36eb7..0b5af3c20a 100644 --- a/developer-extension/src/background/constants.ts +++ b/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}`, + ]), +] diff --git a/developer-extension/src/background/domain/blockIntakeRequests.ts b/developer-extension/src/background/domain/blockIntakeRequests.ts deleted file mode 100644 index bafd574b44..0000000000 --- a/developer-extension/src/background/domain/blockIntakeRequests.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { intakeUrlPatterns } from '../intakeUrlPatterns' -import { store } from '../store' - -chrome.webRequest.onBeforeRequest.addListener( - () => { - if (!store.blockIntakeRequests) { - return - } - return { cancel: true } - }, - { - urls: intakeUrlPatterns, - }, - ['blocking'] -) diff --git a/developer-extension/src/background/domain/refreshDevServerStatus.ts b/developer-extension/src/background/domain/refreshDevServerStatus.ts new file mode 100644 index 0000000000..26f22d4226 --- /dev/null +++ b/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('refreshDevServerStatus: 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' }) +} diff --git a/developer-extension/src/background/domain/replaceBundles.ts b/developer-extension/src/background/domain/replaceBundles.ts deleted file mode 100644 index 52509dd151..0000000000 --- a/developer-extension/src/background/domain/replaceBundles.ts +++ /dev/null @@ -1,69 +0,0 @@ -import { listenAction } from '../actions' -import { DEV_LOGS_URL, DEV_RUM_SLIM_URL, DEV_RUM_URL } from '../constants' -import { setStore, store } from '../store' - -chrome.webRequest.onBeforeRequest.addListener( - (info) => { - if (store.useDevBundles) { - const url = new URL(info.url) - if (url.pathname.includes('logs')) { - return { redirectUrl: DEV_LOGS_URL } - } - if (url.pathname.includes('rum')) { - return { - redirectUrl: store.useRumSlim ? DEV_RUM_SLIM_URL : DEV_RUM_URL, - } - } - } else if (store.useRumSlim && /\/datadog-rum(?!-slim)/.test(info.url)) { - return { - redirectUrl: info.url.replace(/datadog-rum/, 'datadog-rum-slim'), - } - } - return - }, - { - types: ['script'], - urls: [ - ...getBundleUrlPatterns('logs'), - ...getBundleUrlPatterns('rum'), - ...getBundleUrlPatterns('rum-slim'), - 'https://localhost:8443/static/datadog-rum-hotdog.js', - ], - }, - ['blocking'] -) - -listenAction('getStore', () => { - refreshDevServerStatus().catch((error) => - console.error('Unexpected error while refreshing dev server status:', error) - ) -}) - -listenAction('setStore', (newStore) => { - if ('useDevBundles' in newStore || 'useRumSlim' in newStore) { - void chrome.browsingData.removeCache({}) - } -}) - -function getBundleUrlPatterns(bundleName: string) { - return [ - `https://*/datadog-${bundleName}.js`, - `https://*/datadog-${bundleName}-v4.js`, - `https://*/datadog-${bundleName}-canary.js`, - `https://*/datadog-${bundleName}-staging.js`, - ] -} - -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' }) -} diff --git a/developer-extension/src/background/domain/syncRules.ts b/developer-extension/src/background/domain/syncRules.ts new file mode 100644 index 0000000000..b1bde9e92a --- /dev/null +++ b/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 }, + } +} diff --git a/developer-extension/src/background/index.ts b/developer-extension/src/background/index.ts index 0fbf50b063..79ee8ec98f 100644 --- a/developer-extension/src/background/index.ts +++ b/developer-extension/src/background/index.ts @@ -1,2 +1,2 @@ -import './domain/replaceBundles' -import './domain/blockIntakeRequests' +import './domain/refreshDevServerStatus' +import './domain/syncRules' diff --git a/developer-extension/src/background/intakeUrlPatterns.ts b/developer-extension/src/background/intakeUrlPatterns.ts deleted file mode 100644 index a1457f0f20..0000000000 --- a/developer-extension/src/background/intakeUrlPatterns.ts +++ /dev/null @@ -1,18 +0,0 @@ -export const intakeUrlPatterns = [ - // TODO: implement a configuration page to add more URLs in this list. - 'https://*.browser-intake-datadoghq.com/*', - 'https://*.browser-intake-datadoghq.eu/*', - 'https://*.browser-intake-ddog-gov.com/*', - 'https://*.browser-intake-us3-datadoghq.com/*', - 'https://*.browser-intake-us5-datadoghq.com/*', - ...classicIntakesUrlsForSite('datadoghq.com'), - ...classicIntakesUrlsForSite('datadoghq.eu'), -] - -function classicIntakesUrlsForSite(site: string) { - return [ - `https://public-trace-http-intake.logs.${site}/*`, - `https://rum-http-intake.logs.${site}/*`, - `https://browser-http-intake.logs.${site}/*`, - ] -} From 61f84fa2d26f62ee8716343b026e3af093fec4f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beno=C3=AEt=20Zugmeyer?= Date: Thu, 17 Nov 2022 18:30:19 +0100 Subject: [PATCH 5/5] =?UTF-8?q?=E2=9C=A8=20[RUMF-1396]=20add=20a=20Disconn?= =?UTF-8?q?ect=20alert?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit With Manifest V3, connection between the devtools panel and the background service worker can be lost when the service worker is refreshed. I experienced it very often while working on the extension (every time I changed the background script). To help UX/DX, this commit adds an alert to allow refreshing easily the devtools panel. --- developer-extension/src/background/actions.ts | 2 +- developer-extension/src/common/actions.ts | 39 +++++++++++++------ developer-extension/src/panel/actions.ts | 3 +- developer-extension/src/panel/app.tsx | 31 ++++++++++++--- 4 files changed, 56 insertions(+), 19 deletions(-) diff --git a/developer-extension/src/background/actions.ts b/developer-extension/src/background/actions.ts index e2bcd31584..5ef93453ac 100644 --- a/developer-extension/src/background/actions.ts +++ b/developer-extension/src/background/actions.ts @@ -2,4 +2,4 @@ import { createListenAction, createSendAction } from '../common/actions' import type { BackgroundActions, PopupActions } from '../common/types' export const listenAction = createListenAction() -export const sendAction = createSendAction() +export const sendAction = createSendAction().sendAction diff --git a/developer-extension/src/common/actions.ts b/developer-extension/src/common/actions.ts index ea0b57f73a..c7b716add4 100644 --- a/developer-extension/src/common/actions.ts +++ b/developer-extension/src/common/actions.ts @@ -7,7 +7,7 @@ type Message = ValueOf<{ } }> -export function createListenAction() { +export function createListenAction() { function listenAction( action: K, callback: (payload: Actions[K], tabId: number | undefined) => void @@ -27,18 +27,33 @@ export function createListenAction() { } export function createSendAction() { + let onDisconnect: (() => void) | undefined + function sendAction(action: K, payload: Actions[K]) { - return chrome.runtime.sendMessage({ action, payload }, () => { - const error = chrome.runtime.lastError - if ( - error && - error.message !== 'Could not establish connection. Receiving end does not exist.' && - error.message !== 'The message port closed before a response was received.' - ) { - console.error(`sendAction error: ${String(error.message)}`) - } - }) + try { + chrome.runtime.sendMessage({ action, payload }).catch(handleError) + } catch (error) { + handleError(error) + } + } + + function handleError(error: any) { + const message = typeof error === 'object' && error !== null ? String(error.message) : '(no message)' + + if (onDisconnect && message === 'Extension context invalidated.') { + onDisconnect() + } else if ( + message !== 'Could not establish connection. Receiving end does not exist.' && + message !== 'The message port closed before a response was received.' + ) { + console.error(`sendAction error: ${message}`) + } } - return sendAction + return { + sendAction, + setOnDisconnect: (newOnDisconnect: () => void) => { + onDisconnect = newOnDisconnect + }, + } } diff --git a/developer-extension/src/panel/actions.ts b/developer-extension/src/panel/actions.ts index ec40dc930e..39c5a4f2d6 100644 --- a/developer-extension/src/panel/actions.ts +++ b/developer-extension/src/panel/actions.ts @@ -1,5 +1,6 @@ import { createListenAction, createSendAction } from '../common/actions' import type { BackgroundActions, PopupActions } from '../common/types' -export const sendAction = createSendAction() +const { sendAction, setOnDisconnect } = createSendAction() +export { sendAction, setOnDisconnect } export const listenAction = createListenAction() diff --git a/developer-extension/src/panel/app.tsx b/developer-extension/src/panel/app.tsx index fe417a835d..ad9bd8e05c 100644 --- a/developer-extension/src/panel/app.tsx +++ b/developer-extension/src/panel/app.tsx @@ -1,11 +1,15 @@ -import { MantineProvider } from '@mantine/core' +import { Alert, Button, Center, Group, MantineProvider } from '@mantine/core' import { useColorScheme } from '@mantine/hooks' -import React, { Suspense } from 'react' +import React, { Suspense, useState } from 'react' +import { setOnDisconnect } from './actions' import { Panel } from './panel' export function App() { const colorScheme = useColorScheme() + const [isDisconnected, setIsDisconnected] = useState(false) + + setOnDisconnect(() => setIsDisconnected(true)) return ( - }> - - + }>{isDisconnected ? : } ) } + +function DisconnectAlert() { + return ( +
+ + The extension has been disconnected. This can happen after an update. + + + + +
+ ) +}