Move source file fetching into content script for better cache utilization

Network requests made from an extension do not reuse the page's Network cache. To work around that, this commit adds a helper function to the content script (which runs in the page's context) that the extension can communicate with via postMessage. The content script can then fetch cached files for the extension.

Author: Brian Vaughn

packages/react-devtools-extensions/src/background.js

@@ -117,14 +117,27 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 });
 
 chrome.runtime.onMessage.addListener((request, sender) => {
-  if (sender.tab) {
+  const tab = sender.tab;
+  if (tab) {
+    const id = tab.id;
     // This is sent from the hook content script.
     // It tells us a renderer has attached.
     if (request.hasDetectedReact) {
       // We use browserAction instead of pageAction because this lets us
       // display a custom default popup when React is *not* detected.
       // It is specified in the manifest.
-      setIconAndPopup(request.reactBuildType, sender.tab.id);
+      setIconAndPopup(request.reactBuildType, id);
+    } else {
+      switch (request.payload?.type) {
+        case 'fetch-file-with-cache-complete':
+        case 'fetch-file-with-cache-error':
+          // Forward the result of fetch-in-page requests back to the extension.
+          const devtools = ports[id]?.devtools;
+          if (devtools) {
+            devtools.postMessage(request);
+          }
+          break;
+      }
     }
   }
 });

packages/react-devtools-extensions/src/injectGlobalHook.js

@@ -23,40 +23,85 @@ let lastDetectionResult;
 // (it will be injected directly into the page).
 // So instead, the hook will use postMessage() to pass message to us here.
 // And when this happens, we'll send a message to the "background page".
-window.addEventListener('message', function(evt) {
-  if (evt.source !== window || !evt.data) {
+window.addEventListener('message', function onMessage({data, source}) {
+  if (source !== window || !data) {
     return;
   }
-  if (evt.data.source === 'react-devtools-detector') {
-    lastDetectionResult = {
-      hasDetectedReact: true,
-      reactBuildType: evt.data.reactBuildType,
-    };
-    chrome.runtime.sendMessage(lastDetectionResult);
-  } else if (evt.data.source === 'react-devtools-inject-backend') {
-    const script = document.createElement('script');
-    script.src = chrome.runtime.getURL('build/react_devtools_backend.js');
-    document.documentElement.appendChild(script);
-    script.parentNode.removeChild(script);
+
+  switch (data.source) {
+    case 'react-devtools-detector':
+      lastDetectionResult = {
+        hasDetectedReact: true,
+        reactBuildType: data.reactBuildType,
+      };
+      chrome.runtime.sendMessage(lastDetectionResult);
+      break;
+    case 'react-devtools-extension':
+      if (data.payload?.type === 'fetch-file-with-cache') {
+        const url = data.payload.url;
+
+        const reject = value => {
+          chrome.runtime.sendMessage({
+            source: 'react-devtools-content-script',
+            payload: {
+              type: 'fetch-file-with-cache-error',
+              url,
+              value,
+            },
+          });
+        };
+
+        const resolve = value => {
+          chrome.runtime.sendMessage({
+            source: 'react-devtools-content-script',
+            payload: {
+              type: 'fetch-file-with-cache-complete',
+              url,
+              value,
+            },
+          });
+        };
+
+        fetch(url, {cache: 'force-cache'}).then(
+          response => {
+            if (response.ok) {
+              response
+                .text()
+                .then(text => resolve(text))
+                .catch(error => reject(null));
+            } else {
+              reject(null);
+            }
+          },
+          error => reject(null),
+        );
+      }
+      break;
+    case 'react-devtools-inject-backend':
+      const script = document.createElement('script');
+      script.src = chrome.runtime.getURL('build/react_devtools_backend.js');
+      document.documentElement.appendChild(script);
+      script.parentNode.removeChild(script);
+      break;
   }
 });
 
 // NOTE: Firefox WebExtensions content scripts are still alive and not re-injected
 // while navigating the history to a document that has not been destroyed yet,
 // replay the last detection result if the content script is active and the
 // document has been hidden and shown again.
-window.addEventListener('pageshow', function(evt) {
-  if (!lastDetectionResult || evt.target !== window.document) {
+window.addEventListener('pageshow', function({target}) {
+  if (!lastDetectionResult || target !== window.document) {
     return;
   }
   chrome.runtime.sendMessage(lastDetectionResult);
 });
 
 const detectReact = `
-window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function(evt) {
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function({reactBuildType}) {
   window.postMessage({
     source: 'react-devtools-detector',
-    reactBuildType: evt.reactBuildType,
+    reactBuildType,
   }, '*');
 });
 `;

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

@@ -212,6 +212,41 @@ function createPanelIfReactLoaded() {
           }
         };
 
+        // Fetching files from the extension won't make use of the network cache
+        // for resources that have already been loaded by the page.
+        // This helper function allows the extension to request files to be fetched
+        // by the content script (running in the page) to increase the likelihood of a cache hit.
+        const fetchFileWithCaching = url => {
+          return new Promise((resolve, reject) => {
+            function onPortMessage({payload, source}) {
+              if (source === 'react-devtools-content-script') {
+                switch (payload?.type) {
+                  case 'fetch-file-with-cache-complete':
+                    chrome.runtime.onMessage.removeListener(onPortMessage);
+                    resolve(payload.value);
+                    break;
+                  case 'fetch-file-with-cache-error':
+                    chrome.runtime.onMessage.removeListener(onPortMessage);
+                    reject(payload.value);
+                    break;
+                }
+              }
+            }
+
+            chrome.runtime.onMessage.addListener(onPortMessage);
+
+            chrome.devtools.inspectedWindow.eval(`
+              window.postMessage({
+                source: 'react-devtools-extension',
+                payload: {
+                  type: 'fetch-file-with-cache',
+                  url: "${url}",
+                },
+              });
+            `);
+          });
+        };
+
         root = createRoot(document.createElement('div'));
 
         render = (overrideTab = mostRecentOverrideTab) => {
@@ -224,6 +259,7 @@ function createPanelIfReactLoaded() {
                   browserTheme: getBrowserTheme(),
                   componentsPortalContainer,
                   enabledInspectedElementContextMenu: true,
+                  fetchFileWithCaching,
                   loadHookNames: parseHookNames,
                   overrideTab,
                   profilerPortalContainer,

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

@@ -10,6 +10,7 @@
 import type {HookSourceAndMetadata} from './loadSourceAndMetadata';
 import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
 import type {HookNames} from 'react-devtools-shared/src/types';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 import {withAsyncPerformanceMark} from 'react-devtools-shared/src/PerformanceMarks';
 import WorkerizedParseSourceAndMetadata from './parseSourceAndMetadata.worker';
@@ -32,13 +33,14 @@ export const purgeCachedMetadata = workerizedParseHookNames.purgeCachedMetadata;
 
 export async function parseHookNames(
   hooksTree: HooksTree,
+  fetchFileWithCaching: FetchFileWithCaching | null,
 ): Promise<HookNames | null> {
   return withAsyncPerformanceMark('parseHookNames', async () => {
     // Runs on the main/UI thread so it can reuse Network cache:
     const [
       hooksList,
       locationKeyToHookSourceAndMetadata,
-    ] = await loadSourceAndMetadata(hooksTree);
+    ] = await loadSourceAndMetadata(hooksTree, fetchFileWithCaching);
 
     // Runs in a Worker because it's CPU intensive:
     return parseSourceAndMetadata(

packages/react-devtools-extensions/src/parseHookNames/loadSourceAndMetadata.js

@@ -11,10 +11,12 @@
 // because parsing is CPU intensive and should not block the UI thread.
 //
 // Fetching source and source map files is intentionally done on the UI thread
-// so that loaded source files can always reuse the browser's Network cache.
-// Requests made from within a Worker might not reuse this cache (at least in Chrome 92).
+// so that loaded source files can reuse the browser's Network cache.
+// Requests made from within an extension do not share the page's Network cache,
+// but messages can be sent from the UI thread to the content script
+// which can make a request from the page's context (with caching).
 //
-// Some overhead may be incurred sharing the source data with the Worker,
+// Some overhead may be incurred sharing (serializing) the loaded data between contexts,
 // but less than fetching the file to begin with,
 // and in some cases we can avoid serializing the source code at all
 // (e.g. when we are in an environment that supports our custom metadata format).
@@ -55,6 +57,7 @@ import type {
   HooksTree,
 } from 'react-debug-tools/src/ReactDebugHooks';
 import type {MixedSourceMap} from 'react-devtools-extensions/src/SourceMapTypes';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 // Prefer a cached albeit stale response to reduce download time.
 // We wouldn't want to load/parse a newer version of the source (even if one existed).
@@ -90,6 +93,7 @@ export type HooksList = Array<HooksNode>;
 
 export default async function loadSourceAndMetadata(
   hooksTree: HooksTree,
+  fetchFileWithCaching: FetchFileWithCaching | null,
 ): Promise<[HooksList, LocationKeyToHookSourceAndMetadata]> {
   return withAsyncPerformanceMark('loadSourceAndMetadata()', async () => {
     const hooksList: HooksList = [];
@@ -107,7 +111,7 @@ export default async function loadSourceAndMetadata(
     );
 
     await withAsyncPerformanceMark('loadSourceFiles()', () =>
-      loadSourceFiles(locationKeyToHookSourceAndMetadata),
+      loadSourceFiles(locationKeyToHookSourceAndMetadata, fetchFileWithCaching),
     );
 
     await withAsyncPerformanceMark('extractAndLoadSourceMapJSON()', () =>
@@ -409,16 +413,32 @@ function isUnnamedBuiltInHook(hook: HooksNode) {
 
 function loadSourceFiles(
   locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
+  fetchFileWithCaching: FetchFileWithCaching | null,
 ): Promise<*> {
   // Deduplicate fetches, since there can be multiple location keys per file.
   const dedupedFetchPromises = new Map();
 
   const setterPromises = [];
   locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
     const {runtimeSourceURL} = hookSourceAndMetadata;
+
+    let fetchFileFunction = fetchFile;
+    if (fetchFileWithCaching != null) {
+      // If a helper function has been injected to fetch with caching,
+      // use it to fetch the (already loaded) source file.
+      fetchFileFunction = url => {
+        return withAsyncPerformanceMark(
+          `fetchFileWithCaching("${url}")`,
+          () => {
+            return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
+          },
+        );
+      };
+    }
+
     const fetchPromise =
       dedupedFetchPromises.get(runtimeSourceURL) ||
-      fetchFile(runtimeSourceURL).then(runtimeSourceCode => {
+      fetchFileFunction(runtimeSourceURL).then(runtimeSourceCode => {
         // TODO (named hooks) Re-think this; the main case where it matters is when there's no source-maps,
         // because then we need to parse the full source file as an AST.
         if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) {

packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js

@@ -2,16 +2,19 @@
 
 import {createContext} from 'react';
 import type {
+  FetchFileWithCaching,
   LoadHookNamesFunction,
   PurgeCachedHookNamesMetadata,
 } from '../DevTools';
 
 export type Context = {
+  fetchFileWithCaching: FetchFileWithCaching | null,
   loadHookNames: LoadHookNamesFunction | null,
   purgeCachedMetadata: PurgeCachedHookNamesMetadata | null,
 };
 
 const HookNamesContext = createContext<Context>({
+  fetchFileWithCaching: null,
   loadHookNames: null,
   purgeCachedMetadata: null,
 });

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js

@@ -64,6 +64,7 @@ export type Props = {|
 export function InspectedElementContextController({children}: Props) {
   const {selectedElementID} = useContext(TreeStateContext);
   const {
+    fetchFileWithCaching,
     loadHookNames: loadHookNamesFunction,
     purgeCachedMetadata,
   } = useContext(HookNamesContext);
@@ -126,6 +127,7 @@ export function InspectedElementContextController({children}: Props) {
           element,
           inspectedElement.hooks,
           loadHookNamesFunction,
+          fetchFileWithCaching,
         );
       }
     }

packages/react-devtools-shared/src/devtools/views/DevTools.js

@@ -51,6 +51,7 @@ import type {Thenable} from '../cache';
 export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler';
 
+export type FetchFileWithCaching = (url: string) => Promise<string>;
 export type ViewElementSource = (
   id: number,
   inspectedElement: InspectedElement,
@@ -101,6 +102,7 @@ export type Props = {|
   // Loads and parses source maps for function components
   // and extracts hook "names" based on the variables the hook return values get assigned to.
   // Not every DevTools build can load source maps, so this property is optional.
+  fetchFileWithCaching?: ?FetchFileWithCaching,
   loadHookNames?: ?LoadHookNamesFunction,
   purgeCachedHookNamesMetadata?: ?PurgeCachedHookNamesMetadata,
 |};
@@ -127,6 +129,7 @@ export default function DevTools({
   componentsPortalContainer,
   defaultTab = 'components',
   enabledInspectedElementContextMenu = false,
+  fetchFileWithCaching,
   loadHookNames,
   overrideTab,
   profilerPortalContainer,
@@ -192,10 +195,11 @@ export default function DevTools({
 
   const hookNamesContext = useMemo(
     () => ({
+      fetchFileWithCaching: fetchFileWithCaching || null,
       loadHookNames: loadHookNames || null,
       purgeCachedMetadata: purgeCachedHookNamesMetadata || null,
     }),
-    [loadHookNames, purgeCachedHookNamesMetadata],
+    [fetchFileWithCaching, loadHookNames, purgeCachedHookNamesMetadata],
   );
 
   const devToolsRef = useRef<HTMLElement | null>(null);

packages/react-devtools-shared/src/hookNamesCache.js

@@ -17,6 +17,7 @@ import type {
   HookSourceLocationKey,
 } from 'react-devtools-shared/src/types';
 import type {HookSource} from 'react-debug-tools/src/ReactDebugHooks';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 const TIMEOUT = 30000;
 
@@ -53,6 +54,11 @@ function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
   }
 }
 
+type LoadHookNamesFunction = (
+  hookLog: HooksTree,
+  fetchFileWithCaching: FetchFileWithCaching | null,
+) => Thenable<HookNames>;
+
 // This is intentionally a module-level Map, rather than a React-managed one.
 // Otherwise, refreshing the inspected element cache would also clear this cache.
 // TODO Rethink this if the React API constraints change.
@@ -67,7 +73,8 @@ export function hasAlreadyLoadedHookNames(element: Element): boolean {
 export function loadHookNames(
   element: Element,
   hooksTree: HooksTree,
-  loadHookNamesFunction: (hookLog: HooksTree) => Thenable<HookNames>,
+  loadHookNamesFunction: LoadHookNamesFunction,
+  fetchFileWithCaching: FetchFileWithCaching | null,
 ): HookNames | null {
   let record = map.get(element);
 
@@ -103,7 +110,7 @@ export function loadHookNames(
 
     let didTimeout = false;
 
-    loadHookNamesFunction(hooksTree).then(
+    loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(
       function onSuccess(hookNames) {
         if (didTimeout) {
           return;