[DevTools Bug]: sayHelloToBackendManager continuously and pointlessly polls on every page

[sneakers-the-rat]

Website or app

(all sites)

Repro steps

From any page:

const printMessage = (event) => {console.log(event)};
window.addEventListener('message', printMessage);

Since there isn't a place to actually describe the bug, i'll put it here:
sayHelloToBackendManager is set to poll here until backendInitialized is true:

react/packages/react-devtools-extensions/src/contentScripts/proxy.js

Lines 17 to 23 in b300304

	const intervalID = setInterval(() => {
	if (backendInitialized) {
	clearInterval(intervalID);
	} else {
	sayHelloToBackendManager();
	}
	}, 500);

The polling message has a source react-devtools-content-script:

react/packages/react-devtools-extensions/src/contentScripts/proxy.js

Line 41 in b300304

source: 'react-devtools-content-script',

The switch to set backendInitialized = true checks for the message source react-devtools-bridge:

react/packages/react-devtools-extensions/src/contentScripts/proxy.js

Lines 65 to 66 in b300304

	case 'react-devtools-bridge': {
	backendInitialized = true;

the react-devtools-bridge sourced message is sent from the backend by whatever invokes this:

react/packages/react-devtools-extensions/src/contentScripts/backendManager.js

Line 127 in b300304

source: 'react-devtools-bridge',

but the handleMessageFromPage function returns if the event.source isn't the window object of the page. Presumably the backend does not have the same window object as the page, or else using postMessage() would be pointless:

react/packages/react-devtools-extensions/src/contentScripts/proxy.js

Line 59 in b300304

if (event.source !== window || !event.data) {

The 'react-devtools-bridge' message never flips backendInitialized = true, so the polling never terminates.

This is causing the bitwarden ppl to get a decent amount of heat, and it's actually devtools causing the problem - bitwarden/clients#7575

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[Nathan-Roberts123]

I don't think that the problem bitwarden/clients#7575 should be fix here in the react source code, because the problem is in the bitwarden source code.

[sneakers-the-rat]

the bug in bitwarden revealed a bug in devtools. they are both bugs.

[ctrble]

I think this is related to #28323. The site I'm testing on is private and I can't share a repro (sorry!), but this issue describes our situation exactly. It's not a React site and the only extension I have running is the React dev tools. When I disable the extension the message and memory leak both go away.

I'm on a Mac running Chrome Version 123.0.6312.87 (Official Build) (arm64).

[aescobaricc]

if you are using chrome

• go to:
  chrome://extensions/

• pick
  React Developer Tools

• set option:
  Site access
  Allow this extension to read and change all your data on websites you visit: On Click