[DevTools] Improve type coverage for extension runtime API

Author: eps1lon

packages/react-devtools-extensions/src/main/index.js

@@ -1,4 +1,4 @@
-/* global chrome */
+/* global chrome, ExtensionRuntimePort */
 /** @flow */
 
 import type {RootType} from 'react-dom/src/client/ReactDOMRoot';
@@ -61,7 +61,7 @@ function createBridge() {
     listen(fn) {
       const bridgeListener = (message: Message) => fn(message);
       // Store the reference so that we unsubscribe from the same object.
-      const portOnMessage = ((port: any): ExtensionPort).onMessage;
+      const portOnMessage = port.onMessage;
       portOnMessage.addListener(bridgeListener);
 
       lastSubscribedBridgeListener = bridgeListener;
@@ -621,22 +621,7 @@ let root: RootType = (null: $FlowFixMe);
 
 let currentSelectedSource: null | SourceSelection = null;
 
-type ExtensionEvent = {
-  addListener(callback: (message: Message, port: ExtensionPort) => void): void,
-  removeListener(
-    callback: (message: Message, port: ExtensionPort) => void,
-  ): void,
-};
-
-/** https://developer.chrome.com/docs/extensions/reference/api/runtime#type-Port */
-type ExtensionPort = {
-  onDisconnect: ExtensionEvent,
-  onMessage: ExtensionEvent,
-  postMessage(message: mixed, transferable?: Array<mixed>): void,
-  disconnect(): void,
-};
-
-let port: ExtensionPort = (null: $FlowFixMe);
+let port: ExtensionRuntimePort = (null: $FlowFixMe);
 
 // In case when multiple navigation events emitted in a short period of time
 // This debounced callback primarily used to avoid mounting React DevTools multiple times, which results

scripts/flow/react-devtools.js

@@ -17,4 +17,80 @@ declare const __IS_CHROME__: boolean;
 declare const __IS_EDGE__: boolean;
 declare const __IS_NATIVE__: boolean;
 
-declare const chrome: any;
+interface ExtensionDevtools {
+  /** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/inspectedWindow} */
+  inspectedWindow: $FlowFixMe;
+  /** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/network} */
+  network: $FlowFixMe;
+  /** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools/panels} */
+  panels: $FlowFixMe;
+}
+
+interface ExtensionEvent<Listener: Function> {
+  addListener(callback: Listener): void;
+  removeListener(callback: Listener): void;
+}
+
+/** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/Port} */
+interface ExtensionRuntimePort {
+  onMessage: ExtensionEvent<(message: any, port: ExtensionRuntimePort) => void>;
+  onDisconnect: ExtensionEvent<(port: ExtensionRuntimePort) => void>;
+  postMessage(message: mixed, transferable?: Array<mixed>): void;
+  disconnect(): void;
+}
+
+interface ExtensionMessageSender {
+  id?: string;
+  url?: string;
+  tab?: {
+    id: number,
+    url: string,
+  };
+}
+
+interface ExtensionRuntime {
+  /** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/connect} */
+  connect(connectInfo?: {
+    name?: string,
+    includeTlsChannelId?: boolean,
+  }): ExtensionRuntimePort;
+  connect(
+    extensionId: string,
+    connectInfo?: {name?: string, includeTlsChannelId?: boolean},
+  ): ExtensionRuntimePort;
+  /** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage} */
+  onMessage: ExtensionEvent<
+    (
+      message: any,
+      sender: ExtensionMessageSender,
+      sendResponse: (response: any) => void,
+    ) => any,
+  >;
+  /** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onConnect} */
+  onConnect: ExtensionEvent<(port: ExtensionRuntimePort) => void>;
+  /** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/sendMessage} */
+  sendMessage(
+    message: any,
+    options?: {includeTlsChannelId?: boolean},
+  ): Promise<any>;
+  sendMessage(
+    extensionId: string,
+    message: any,
+    // We're making this required so that we don't accidentally call the wrong overload.
+    options: {includeTlsChannelId?: boolean},
+  ): Promise<any>;
+}
+
+interface ExtensionAPI {
+  devtools: ExtensionDevtools;
+  /** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/permissions} */
+  permissions: $FlowFixMe;
+  /** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime} */
+  runtime: ExtensionRuntime;
+  /** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting} */
+  scripting: $FlowFixMe;
+  /** @see {@link https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage} */
+  storage: $FlowFixMe;
+}
+
+declare const chrome: ExtensionAPI;