[DevTools] Improve type coverage for extension runtime API

[everettbu]

Mirror of facebook/react#35957
Original author: eps1lon

---

Adds types for chrome.runtime.* and chrome.tabs.*. Types are based of off the version that's shared across browsers. We'll see if we need different versions for chrome and firefox.

devtools.panels, storage, permissions, and scripting are still typed as any. Main interest was runtime and tabs to investigate react/react#35954

[greptile-apps]

Greptile Summary

Replaces the untyped declare const chrome: any with a structured ExtensionAPI interface providing Flow types for chrome.runtime.* and chrome.tabs.*, based on cross-browser WebExtensions API documentation. The local ExtensionPort type in main/index.js is consolidated into the shared ExtensionRuntimePort global, and background/index.js gains Flow annotations throughout. Also includes an unrelated addition of the unwindTransition field to SuspenseTreeState for future Suspense tab functionality.

• New Flow interfaces: ExtensionAPI, ExtensionRuntime, ExtensionRuntimePort, ExtensionTabs, ExtensionEvent, etc. in scripts/flow/react-devtools.js
• background/index.js now has @flow annotation and typed function signatures with $FlowFixMe suppressions for the known number-to-string tab ID coercion
• main/index.js removes its local ExtensionPort/ExtensionEvent types in favor of the shared globals
• SuspenseTreeContext.js adds scaffolding for unwindTransition boolean state

Confidence Score: 4/5

• This PR is safe to merge — it's a type-only improvement with no runtime behavioral changes.
• The changes are purely additive type annotations and Flow interface definitions. No runtime logic is altered. The only concern is a minor type inconsistency in registerProxyPort parameter typing.
• packages/react-devtools-extensions/src/background/index.js has a minor type inconsistency worth reviewing (registerProxyPort tabId parameter type).

Important Files Changed

Filename	Overview
packages/react-devtools-extensions/src/background/index.js	Adds Flow types for port management using the new ExtensionRuntimePort type. Minor inconsistency: registerProxyPort takes tabId: string while its only call site passes a number.
packages/react-devtools-extensions/src/main/index.js	Replaces the local ExtensionPort type with the shared ExtensionRuntimePort global, simplifying the code. The cast (port: any) is also removed now that the type is compatible.
scripts/flow/react-devtools.js	Replaces declare const chrome: any with properly typed ExtensionAPI interface covering runtime, tabs, and other extension APIs. Well-documented with MDN references.
packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTreeContext.js	Adds unwindTransition: boolean field to SuspenseTreeState type and initializes it to false. Scaffolding for future Suspense tab functionality.

_{Last reviewed commit: 3c1d4f2}

[greptile-apps]

Inconsistent tabId parameter type
registerExtensionPort declares tabId: number (line 44), but registerProxyPort declares tabId: string. Both functions are called with a numeric tabId derived from port.sender.tab.id (a number), and the call on line 95-99 already requires a $FlowFixMe[incompatible-call] to suppress the mismatch. For consistency, this should also be tabId: number.

Suggested change

	function registerProxyPort(port: ExtensionRuntimePort, tabId: string) {
	function registerProxyPort(port: ExtensionRuntimePort, tabId: number) {

Prompt To Fix With AI

This is a comment left during a code review.
Path: packages/react-devtools-extensions/src/background/index.js
Line: 58

Comment:
**Inconsistent `tabId` parameter type**
`registerExtensionPort` declares `tabId: number` (line 44), but `registerProxyPort` declares `tabId: string`. Both functions are called with a numeric `tabId` derived from `port.sender.tab.id` (a `number`), and the call on line 95-99 already requires a `$FlowFixMe[incompatible-call]` to suppress the mismatch. For consistency, this should also be `tabId: number`.

```suggestion
function registerProxyPort(port: ExtensionRuntimePort, tabId: number) {
```

How can I resolve this? If you propose a fix, please make it concise.

[everettbu]

Upstream PR was closed or merged. Code is synced via branch mirror.