refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime #27215

hoxyq · 2023-08-11T14:50:07Z

Fixes #27119, #27185.

Fixed:

React DevTools now works as expected when user performs in-tab navigation, previously it was just stuck.

Screen.Recording.2023-08-11.at.15.45.12.mov

When user closes browser DevTools panel, we now do some cleanup to disconnect ports and emit shutdown event for bridge. This should fix the issue with registering duplicated fibers with the same id in Store.

Changed:

We reconnect proxy port once in 25 seconds, in order to keep service worker alive.
Instead of unregistering dynamically injected content scripts, wen now get list of already registered scripts and filter them out from scripts that we want to inject again, see dynamicallyInjectContentScripts.js.
Split main.js and background.js into multiple files.

Tested on Chromium and Firefox browsers.

…rts management and service worker lifetime

List of changes: * refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime ([hoxyq](https:/hoxyq) in [#27215](#27215)) * refactor[devtools/extension]: minify production builds to strip comments ([hoxyq](https:/hoxyq) in [#27304](#27304)) * fix[devtools]: allow element updates polling only if bridge is alive ([hoxyq](https:/hoxyq) in [#27067](#27067)) * refactor: resolve browser via env variables based on build rather than user agent ([hoxyq](https:/hoxyq) in [#27179](#27179)) * fix[devtools/updateFiberRecursively]: mount suspense fallback set in timed out case ([hoxyq](https:/hoxyq) in [#27147](#27147)) * Feat:-Added open in editor to appear by default ([Biki-das](https:/Biki-das) in [#26949](#26949)) * fix[devtools/inspect]: null check memoized props before trying to call hasOwnProperty ([hoxyq](https:/hoxyq) in [#27057](#27057)) * rename SuspenseList export to unstable_SuspenseList ([noahlemen](https:/noahlemen) in [#27061](#27061))

… loaded (#27316) This is mostly hotfix for #27215. Contains 3 fixes: - Handle cases when `react` is not loaded yet and user performs in-tab navigation. Previously, because of the uncleared interval we would try to mount DevTools twice, resulting into multiple errors. - Handle case when extension port disconnected (probably by the browser or just due to its lifetime) - Removed duplicate `render()` call on line 327

…pts instead of filtering (#27369) Same as #26765. Related bug report - https://bugs.chromium.org/p/chromium/issues/detail?id=1393762. This was changed in #27215, when I have refactored background logic in the extension. I've missed this case, because the extension was working in incognito mode. Turns out, it stops working after the first reload, and it stops only in incognito mode, so I am rolling out back the previous workaround. Tested on Chrome that it fixes the extension in incognito mode and that it doesn't affect default mode.

…rt management and service worker lifetime (facebook#27215) Fixes facebook#27119, facebook#27185. Fixed: - React DevTools now works as expected when user performs in-tab navigation, previously it was just stuck. https:/facebook/react/assets/28902667/b11c5f84-7155-47a5-8b5a-7e90baca5347 - When user closes browser DevTools panel, we now do some cleanup to disconnect ports and emit shutdown event for bridge. This should fix the issue with registering duplicated fibers with the same id in Store. Changed: - We reconnect proxy port once in 25 seconds, in order to [keep service worker alive](https://developer.chrome.com/docs/extensions/whatsnew/#m110-sw-idle). - Instead of unregistering dynamically injected content scripts, wen now get list of already registered scripts and filter them out from scripts that we want to inject again, see dynamicallyInjectContentScripts.js. - Split `main.js` and `background.js` into multiple files. Tested on Chromium and Firefox browsers.

List of changes: * refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime ([hoxyq](https:/hoxyq) in [facebook#27215](facebook#27215)) * refactor[devtools/extension]: minify production builds to strip comments ([hoxyq](https:/hoxyq) in [facebook#27304](facebook#27304)) * fix[devtools]: allow element updates polling only if bridge is alive ([hoxyq](https:/hoxyq) in [facebook#27067](facebook#27067)) * refactor: resolve browser via env variables based on build rather than user agent ([hoxyq](https:/hoxyq) in [facebook#27179](facebook#27179)) * fix[devtools/updateFiberRecursively]: mount suspense fallback set in timed out case ([hoxyq](https:/hoxyq) in [facebook#27147](facebook#27147)) * Feat:-Added open in editor to appear by default ([Biki-das](https:/Biki-das) in [facebook#26949](facebook#26949)) * fix[devtools/inspect]: null check memoized props before trying to call hasOwnProperty ([hoxyq](https:/hoxyq) in [facebook#27057](facebook#27057)) * rename SuspenseList export to unstable_SuspenseList ([noahlemen](https:/noahlemen) in [facebook#27061](facebook#27061))

… loaded (facebook#27316) This is mostly hotfix for facebook#27215. Contains 3 fixes: - Handle cases when `react` is not loaded yet and user performs in-tab navigation. Previously, because of the uncleared interval we would try to mount DevTools twice, resulting into multiple errors. - Handle case when extension port disconnected (probably by the browser or just due to its lifetime) - Removed duplicate `render()` call on line 327

…pts instead of filtering (facebook#27369) Same as facebook#26765. Related bug report - https://bugs.chromium.org/p/chromium/issues/detail?id=1393762. This was changed in facebook#27215, when I have refactored background logic in the extension. I've missed this case, because the extension was working in incognito mode. Turns out, it stops working after the first reload, and it stops only in incognito mode, so I am rolling out back the previous workaround. Tested on Chrome that it fixes the extension in incognito mode and that it doesn't affect default mode.

…rt management and service worker lifetime (#27215) Fixes #27119, #27185. Fixed: - React DevTools now works as expected when user performs in-tab navigation, previously it was just stuck. https:/facebook/react/assets/28902667/b11c5f84-7155-47a5-8b5a-7e90baca5347 - When user closes browser DevTools panel, we now do some cleanup to disconnect ports and emit shutdown event for bridge. This should fix the issue with registering duplicated fibers with the same id in Store. Changed: - We reconnect proxy port once in 25 seconds, in order to [keep service worker alive](https://developer.chrome.com/docs/extensions/whatsnew/#m110-sw-idle). - Instead of unregistering dynamically injected content scripts, wen now get list of already registered scripts and filter them out from scripts that we want to inject again, see dynamicallyInjectContentScripts.js. - Split `main.js` and `background.js` into multiple files. Tested on Chromium and Firefox browsers. DiffTrain build for commit 8fbd307.

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Aug 11, 2023

hoxyq force-pushed the devtools/refactor-extension-scripts branch from 4b051b4 to eca432c Compare August 11, 2023 18:10

hoxyq marked this pull request as ready for review August 11, 2023 18:23

refactor: refactored devtools browser extension scripts to improve po…

10836bc

…rts management and service worker lifetime

hoxyq force-pushed the devtools/refactor-extension-scripts branch from eca432c to 10836bc Compare August 29, 2023 10:11

hoxyq merged commit 8fbd307 into facebook:main Aug 29, 2023
2 checks passed

hoxyq deleted the devtools/refactor-extension-scripts branch August 29, 2023 11:09

hoxyq mentioned this pull request Aug 29, 2023

React DevTools 4.28.0 -> 4.28.1 #27305

Merged

hoxyq mentioned this pull request Aug 30, 2023

fix[devtools/extension]: handle tab navigation events before react is loaded #27316

Merged

hoxyq mentioned this pull request Sep 13, 2023

fix[devtools/extension]: unregister dynamically injected content scripts instead of filtering #27369

Merged

acdlite mentioned this pull request Sep 14, 2023

Update React from dd480ef92 to d6dcad6a8. vercel/next.js#55399

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime #27215

refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime #27215

hoxyq commented Aug 11, 2023

refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime #27215

refactor: refactored devtools browser extension scripts to improve port management and service worker lifetime #27215

Conversation

hoxyq commented Aug 11, 2023