handleDevToolsPageMessage() — react Function Reference

Architecture documentation for the handleDevToolsPageMessage() function in messageHandlers.js from the react codebase.

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ handleDevToolsPageMessage() — react Function Reference

Dependency Diagram

graph TD
  00586d16_bb96_cb3e_a14c_a4dfaccc0daf["handleDevToolsPageMessage()"]
  eda1c637_7f7a_9fee_baa9_c174b535138c["messageHandlers.js"]
  00586d16_bb96_cb3e_a14c_a4dfaccc0daf -->|defined in| eda1c637_7f7a_9fee_baa9_c174b535138c
  fac85306_0344_026b_6c66_d73fb4312f91["executeScriptInMainWorld()"]
  00586d16_bb96_cb3e_a14c_a4dfaccc0daf -->|calls| fac85306_0344_026b_6c66_d73fb4312f91
  style 00586d16_bb96_cb3e_a14c_a4dfaccc0daf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-extensions/src/background/messageHandlers.js lines 41–153

export function handleDevToolsPageMessage(message) {
  const {payload} = message;

  switch (payload?.type) {
    // Proxy this message from DevTools page to content script via chrome.tabs.sendMessage
    case 'fetch-file-with-cache': {
      const {
        payload: {tabId, url},
      } = message;

      if (!tabId || !url) {
        // Send a response straight away to get the Promise fulfilled.
        chrome.runtime.sendMessage({
          source: 'react-devtools-background',
          payload: {
            type: 'fetch-file-with-cache-error',
            url,
            value: null,
          },
        });
      } else {
        chrome.tabs.sendMessage(tabId, {
          source: 'devtools-page',
          payload: {
            type: 'fetch-file-with-cache',
            url,
          },
        });
      }

      break;
    }

    case 'inject-backend-manager': {
      const {
        payload: {tabId},
      } = message;

      if (!tabId) {
        throw new Error("Couldn't inject backend manager: tabId not specified");
      }

      executeScriptInMainWorld({
        injectImmediately: true,
        target: {tabId},
        files: ['/build/backendManager.js'],
      }).then(
        () => {
          if (__DEBUG__) {
            console.log('Successfully injected backend manager');
          }
        },
        reason => {
          console.error('Failed to inject backend manager:', reason);
        },
      );

      break;
    }

    case 'eval-in-inspected-window': {
      const {
        payload: {tabId, requestId, scriptId, args},
      } = message;

      chrome.tabs
        .sendMessage(tabId, {
          source: 'devtools-page-eval',
          payload: {
            scriptId,
            args,
          },
        })
        .then(response => {
          if (!response) {
            chrome.runtime.sendMessage({
              source: 'react-devtools-background',
              payload: {
                type: 'eval-in-inspected-window-response',
                requestId,
                result: null,