Home / Function/ connectExtensionAndProxyPorts() — react Function Reference

connectExtensionAndProxyPorts() — react Function Reference

Architecture documentation for the connectExtensionAndProxyPorts() function in index.js from the react codebase.

Entity Profile

Dependency Diagram

graph TD
  d9aa905c_041e_b43d_e353_8d660f49f5a4["connectExtensionAndProxyPorts()"]
  406e0fbd_f3e8_fc3b_d05b_4922f1996e21["index.js"]
  d9aa905c_041e_b43d_e353_8d660f49f5a4 -->|defined in| 406e0fbd_f3e8_fc3b_d05b_4922f1996e21
  style d9aa905c_041e_b43d_e353_8d660f49f5a4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-extensions/src/background/index.js lines 117–177

function connectExtensionAndProxyPorts(extensionPort, proxyPort, tabId) {
  if (!extensionPort) {
    throw new Error(
      `Attempted to connect ports, when extension port is not present`,
    );
  }

  if (!proxyPort) {
    throw new Error(
      `Attempted to connect ports, when proxy port is not present`,
    );
  }

  if (ports[tabId].disconnectPipe) {
    throw new Error(
      `Attempted to connect already connected ports for tab with id ${tabId}`,
    );
  }

  function extensionPortMessageListener(message) {
    try {
      proxyPort.postMessage(message);
    } catch (e) {
      if (__DEV__) {
        console.log(`Broken pipe ${tabId}: `, e);
      }

      disconnectListener();
    }
  }

  function proxyPortMessageListener(message) {
    try {
      extensionPort.postMessage(message);
    } catch (e) {
      if (__DEV__) {
        console.log(`Broken pipe ${tabId}: `, e);
      }

      disconnectListener();
    }
  }

  function disconnectListener() {
    extensionPort.onMessage.removeListener(extensionPortMessageListener);
    proxyPort.onMessage.removeListener(proxyPortMessageListener);

    // We handle disconnect() calls manually, based on each specific case
    // No need to disconnect other port here

    delete ports[tabId].disconnectPipe;
  }

  ports[tabId].disconnectPipe = disconnectListener;

  extensionPort.onMessage.addListener(extensionPortMessageListener);
  proxyPort.onMessage.addListener(proxyPortMessageListener);

  extensionPort.onDisconnect.addListener(disconnectListener);
  proxyPort.onDisconnect.addListener(disconnectListener);
}

Domain

Subdomains

Frequently Asked Questions

What does connectExtensionAndProxyPorts() do?
connectExtensionAndProxyPorts() is a function in the react codebase, defined in packages/react-devtools-extensions/src/background/index.js.
Where is connectExtensionAndProxyPorts() defined?
connectExtensionAndProxyPorts() is defined in packages/react-devtools-extensions/src/background/index.js at line 117.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free