@samitouri / QOS-React-2 / commits / 545d4c2de7

Prevent errors/crashing when multiple installs of DevTools are present (#22517)

## Summary This commit is a proposal for handling duplicate installation of DevTools, in particular scoped to duplicates such as a dev build or the internal versions of DevTools installed alongside the Chrome Web Store extension. Specifically, this commit makes it so when another instance of the DevTools extension is installed alongside the extension installed from the Chrome Web Store, we don't produce a stream of errors or crash Chrome, which is what would usually happen in this case. ### Detecting Duplicate Installations - First, we check what type of installation the extension is: from the Chrome Web Store, the internal build of the extension, or a local development build. - If the extension is from the **Chrome Web Store**: - During initialization, we first check if the internal or local builds of the extension have already been installed and are enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the internal and local builds of the extension using their extension IDs. - We can do this because the extension ID for the internal build (and for the Chrome Web Store) is a stable ID. - For the local build, at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds. - If we detect that the internal or local extensions are already installed, then we skip initializing the current extension altogether so as to not conflict with the other versions. This means we don't initialize the frontend or the backend at all. - If the extension is the **Internal Build**: - During initialization, we first check if the local builds of the extension has already been installed and is enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the local build of the extension using its extension ID. - We can do this for the local build because at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds. - If we detect that the local extension is already installed, then we skip initializing the current extension altogether so as to not conflict with the that version. This means we don't initialize the frontend or the backend at all. - If the extension is a **Local Dev Build**: - Since other extensions check for the existence of this extension and disable themselves if they detect it, we don't need any special handling during initialization and assume that there are no duplicate extensions. This means that we will generally prefer keeping this extension enabled. This behavior means that the order of priority for keeping an extension enabled is the following: 1. Local build 2. Internal build 3. Public build ### Preventing duplicate backend initialization Note that the backend is injected and initialized by the content script listening to a message posted to the inspected window (via `postMessage`). Since the content script will be injected twice, once each by each instance of the extension, even if we initialize the extension once, both content scripts would still receive the single message posted from the single frontend, and it would then still inject and initialize the backend twice. In order to prevent this, we also add the extension ID to the message for injecting the backend. That way each content script can check if the message comes from its own extension, and if not it can ignore the message and avoid double injecting the backend. ### Other approaches - I considered using the [`chrome.management`](https://developer.chrome.com/docs/extensions/reference/management/) API generally to detect other installations, but that requires adding additional permissions to our production extension, which didn't seem ideal. - I also considered a few options of writing a special flag to the inspected window and checking for it before initializing the extension. However, it's hard to avoid race conditions in that case, and it seemed more reliable to check specifically for the WebStore extension, which is realistically where we would encounter the overlap. ### Rollout - This commit needs to be published and rolled out to the Chrome Web Store first. - After this commit is published to the Chrome Web Store, any duplicate instances of the extension that are built and installed after this commit will no longer conflict with the Chrome Web Store version. ### Next Steps - In a subsequent PR, I will extend this code to show a warning when duplicate extensions have been detected. Part of #22486 ## How did you test this change? ### Basic Testing - yarn flow - yarn test - yarn test-build-devtools ### Double installation testing Testing double-installed extensions for this commit is tricky because we are relying on the extension ID of the internal and Chrome Web Store extensions, but we obviously can't actually test the Web Store version (since we can't modify the already published version). In order to simulate duplicate extensions installed, I did the following process: - Built separate extensions where I hardcoded a constant for whether the extension is internal or public (e.g. `EXTENSION_INSTALLATION_TYPE = 'internal'`). Then I installed these built extensions corresponding to the "internal" and "Web Store" builds. - Build and run the regular development extension (with `yarn build:chrome:dev && yarn test:chrome`), using the extension IDs of the previously built extensions as the "internal" and "public" extension IDs. With this set up in place, I tested the following on pages both with and without React: - When only the local extension enabled, DevTools works normally. - When only the "internal" extension enabled, DevTools works normally. - When only the "public" extension enabled, DevTools works normally. - When "internal" and "public" extensions are installed, "public" extension is disabled and "internal" extension works normally. - When the local extension runs alongside the other extensions, other extensions disable themselves and local build works normally. - When we can't recognize what type of build the extension corresponds to, we show an error. - When all 3 extensions are installed and enabled in all different combinations, DevTools no longer produces errors or crashes Chrome, and works normally.

Juan committed Oct 14, 2021 at 17:15 UTC 545d4c2de7934a43b0c5d3ce050d77b4c3113bd3
8 files changed +576 -350
packages/react-devtools-extensions/build.js
+11
@@ -102,6 +102,17 @@ const build = async (tempPath, manifestPath) => {
102 }
103 manifest.description += `\n\nCreated from revision ${commit} on ${dateString}.`;
104
105 + if (process.env.NODE_ENV === 'development') {
106 + // When building the local development version of the
107 + // extension we want to be able to have a stable extension ID
108 + // for the local build (in order to be able to reliably detect
109 + // duplicate installations of DevTools).
110 + // By specifying a key in the built manifest.json file,
111 + // we can make it so the generated extension ID is stable.
112 + // For more details see the docs here: https://developer.chrome.com/docs/extensions/mv2/manifest/key/
113 + manifest.key = 'reactdevtoolslocalbuilduniquekey';
114 + }
115 +
116 writeFileSync(copiedManifestPath, JSON.stringify(manifest, null, 2));
117
118 // Pack the extension
packages/react-devtools-extensions/package.json
+4 -4
@@ -4,15 +4,15 @@
4 "private": true,
5 "scripts": {
6 "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox && yarn run build:edge",
7 - "build:dev": "cross-env NODE_ENV=development yarn run build:chrome:dev && yarn run build:firefox:dev && yarn run build:edge:dev",
7 + "build:local": "cross-env NODE_ENV=development yarn run build:chrome:local && yarn run build:firefox:local && yarn run build:edge:local",
8 "build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
9 "build:chrome:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./chrome/build --crx",
10 - "build:chrome:dev": "cross-env NODE_ENV=development node ./chrome/build",
10 + "build:chrome:local": "cross-env NODE_ENV=development node ./chrome/build",
11 "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
12 - "build:firefox:dev": "cross-env NODE_ENV=development node ./firefox/build",
12 + "build:firefox:local": "cross-env NODE_ENV=development node ./firefox/build",
13 "build:edge": "cross-env NODE_ENV=production node ./edge/build",
14 "build:edge:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./edge/build --crx",
15 - "build:edge:dev": "cross-env NODE_ENV=development node ./edge/build",
15 + "build:edge:local": "cross-env NODE_ENV=development node ./edge/build",
16 "test:chrome": "node ./chrome/test",
17 "test:firefox": "node ./firefox/test",
18 "test:edge": "node ./edge/test",
packages/react-devtools-extensions/src/background.js
+10
@@ -6,6 +6,8 @@ const ports = {};
6
7 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
8
9 +import {EXTENSION_INSTALL_CHECK_MESSAGE} from './constants';
10 +
11 chrome.runtime.onConnect.addListener(function(port) {
12 let tab = null;
13 let name = null;
@@ -116,6 +118,14 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
118 }
119 });
120
121 +chrome.runtime.onMessageExternal.addListener(
122 + (request, sender, sendResponse) => {
123 + if (request === EXTENSION_INSTALL_CHECK_MESSAGE) {
124 + sendResponse(true);
125 + }
126 + },
127 +);
128 +
129 chrome.runtime.onMessage.addListener((request, sender) => {
130 const tab = sender.tab;
131 if (tab) {
packages/react-devtools-extensions/src/checkForDuplicateInstallations.js new
+129
@@ -0,0 +1,129 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow strict-local
8 + */
9 +
10 +declare var chrome: any;
11 +
12 +import {__DEBUG__} from 'react-devtools-shared/src/constants';
13 +import {
14 + EXTENSION_INSTALL_CHECK_MESSAGE,
15 + EXTENSION_INSTALLATION_TYPE,
16 + INTERNAL_EXTENSION_ID,
17 + LOCAL_EXTENSION_ID,
18 +} from './constants';
19 +
20 +const UNRECOGNIZED_EXTENSION_WARNING =
21 + 'React Developer Tools: You are running an unrecognized installation of the React Developer Tools extension, which might conflict with other versions of the extension installed in your browser. ' +
22 + 'Please make sure you only have a single version of the extension installed or enabled. ' +
23 + 'If you are developing this extension locally, make sure to build the extension using the `yarn build:<browser>:local` command.';
24 +
25 +export function checkForDuplicateInstallations(callback: boolean => void) {
26 + switch (EXTENSION_INSTALLATION_TYPE) {
27 + case 'public': {
28 + // If this is the public extension (e.g. from Chrome Web Store), check if an internal
29 + // or local build of the extension is also installed, and if so, disable this extension.
30 + // TODO show warning if other installations are present.
31 + checkForInstalledExtensions([
32 + INTERNAL_EXTENSION_ID,
33 + LOCAL_EXTENSION_ID,
34 + ]).then(areExtensionsInstalled => {
35 + if (areExtensionsInstalled.some(isInstalled => isInstalled)) {
36 + callback(true);
37 + } else {
38 + callback(false);
39 + }
40 + });
41 + break;
42 + }
43 + case 'internal': {
44 + // If this is the internal extension, check if a local build of the extension
45 + // is also installed, and if so, disable this extension.
46 + // If the public version of the extension is also installed, that extension
47 + // will disable itself.
48 + // TODO show warning if other installations are present.
49 + checkForInstalledExtension(LOCAL_EXTENSION_ID).then(isInstalled => {
50 + if (isInstalled) {
51 + callback(true);
52 + } else {
53 + callback(false);
54 + }
55 + });
56 + break;
57 + }
58 + case 'local': {
59 + if (__DEV__) {
60 + // If this is the local extension (i.e. built locally during development),
61 + // always keep this one enabled. Other installations disable themselves if
62 + // they detect the local build is installed.
63 + callback(false);
64 + break;
65 + }
66 +
67 + // If this extension wasn't built locally during development, we can't reliably
68 + // detect if there are other installations of DevTools present.
69 + // In this case, assume there are no duplicate exensions and show a warning about
70 + // potential conflicts.
71 + console.error(UNRECOGNIZED_EXTENSION_WARNING);
72 + chrome.devtools.inspectedWindow.eval(
73 + `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
74 + );
75 + callback(false);
76 + break;
77 + }
78 + case 'unknown': {
79 + // If we don't know how this extension was built, we can't reliably detect if there
80 + // are other installations of DevTools present.
81 + // In this case, assume there are no duplicate exensions and show a warning about
82 + // potential conflicts.
83 + console.error(UNRECOGNIZED_EXTENSION_WARNING);
84 + chrome.devtools.inspectedWindow.eval(
85 + `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
86 + );
87 + callback(false);
88 + break;
89 + }
90 + default: {
91 + (EXTENSION_INSTALLATION_TYPE: empty);
92 + }
93 + }
94 +}
95 +
96 +function checkForInstalledExtensions(
97 + extensionIds: string[],
98 +): Promise<boolean[]> {
99 + return Promise.all(
100 + extensionIds.map(extensionId => checkForInstalledExtension(extensionId)),
101 + );
102 +}
103 +
104 +function checkForInstalledExtension(extensionId: string): Promise<boolean> {
105 + return new Promise(resolve => {
106 + chrome.runtime.sendMessage(
107 + extensionId,
108 + EXTENSION_INSTALL_CHECK_MESSAGE,
109 + response => {
110 + if (__DEBUG__) {
111 + console.log(
112 + 'checkForDuplicateInstallations: Duplicate installation check responded with',
113 + {
114 + response,
115 + error: chrome.runtime.lastError?.message,
116 + currentExtension: EXTENSION_INSTALLATION_TYPE,
117 + checkingExtension: extensionId,
118 + },
119 + );
120 + }
121 + if (chrome.runtime.lastError != null) {
122 + resolve(false);
123 + } else {
124 + resolve(true);
125 + }
126 + },
127 + );
128 + });
129 +}
packages/react-devtools-extensions/src/constants.js new
+31
@@ -0,0 +1,31 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow strict-local
8 + */
9 +
10 +declare var chrome: any;
11 +
12 +export const CURRENT_EXTENSION_ID = chrome.runtime.id;
13 +
14 +export const EXTENSION_INSTALL_CHECK_MESSAGE = 'extension-install-check';
15 +
16 +export const CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
17 +export const INTERNAL_EXTENSION_ID = 'dnjnjgbfilfphmojnmhliehogmojhclc';
18 +export const LOCAL_EXTENSION_ID = 'ikiahnapldjmdmpkmfhjdjilojjhgcbf';
19 +
20 +export const EXTENSION_INSTALLATION_TYPE:
21 + | 'public'
22 + | 'internal'
23 + | 'local'
24 + | 'unknown' =
25 + CURRENT_EXTENSION_ID === CHROME_WEBSTORE_EXTENSION_ID
26 + ? 'public'
27 + : CURRENT_EXTENSION_ID === INTERNAL_EXTENSION_ID
28 + ? 'internal'
29 + : CURRENT_EXTENSION_ID === LOCAL_EXTENSION_ID
30 + ? 'local'
31 + : 'unknown';
packages/react-devtools-extensions/src/injectGlobalHook.js
+17 -2
@@ -2,7 +2,11 @@
2
3 import nullthrows from 'nullthrows';
4 import {installHook} from 'react-devtools-shared/src/hook';
5 -import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
5 +import {
6 + __DEBUG__,
7 + SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
8 +} from 'react-devtools-shared/src/constants';
9 +import {CURRENT_EXTENSION_ID, EXTENSION_INSTALLATION_TYPE} from './constants';
10 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
11
12 function injectCode(code) {
@@ -27,7 +31,17 @@ window.addEventListener('message', function onMessage({data, source}) {
31 if (source !== window || !data) {
32 return;
33 }
30 -
34 + if (data.extensionId !== CURRENT_EXTENSION_ID) {
35 + if (__DEBUG__) {
36 + console.log(
37 + `[injectGlobalHook] Received message '${data.source}' from different extension instance. Skipping message.`,
38 + {
39 + currentExtension: EXTENSION_INSTALLATION_TYPE,
40 + },
41 + );
42 + }
43 + return;
44 + }
45 switch (data.source) {
46 case 'react-devtools-detector':
47 lastDetectionResult = {
@@ -102,6 +116,7 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function({reactBuildType})
116 window.postMessage({
117 source: 'react-devtools-detector',
118 reactBuildType,
119 + extensionId: "${CURRENT_EXTENSION_ID}",
120 }, '*');
121 });
122 `;
packages/react-devtools-extensions/src/main.js
+373 -343
@@ -22,6 +22,8 @@ import {
22 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
23 import {__DEBUG__} from 'react-devtools-shared/src/constants';
24 import {logEvent} from 'react-devtools-shared/src/Logger';
25 +import {CURRENT_EXTENSION_ID, EXTENSION_INSTALLATION_TYPE} from './constants';
26 +import {checkForDuplicateInstallations} from './checkForDuplicateInstallations';
27
28 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
29 'React::DevTools::supportsProfiling';
@@ -70,135 +72,158 @@ function createPanelIfReactLoaded() {
72 return;
73 }
74
73 - panelCreated = true;
75 + checkForDuplicateInstallations(hasDuplicateInstallation => {
76 + if (hasDuplicateInstallation) {
77 + if (__DEBUG__) {
78 + console.log(
79 + '[main] createPanelIfReactLoaded: Duplicate installation detected, skipping initialization of extension.',
80 + {currentExtension: EXTENSION_INSTALLATION_TYPE},
81 + );
82 + }
83 + panelCreated = true;
84 + clearInterval(loadCheckInterval);
85 + return;
86 + }
87
75 - clearInterval(loadCheckInterval);
88 + if (__DEBUG__) {
89 + console.log(
90 + '[main] createPanelIfReactLoaded: No duplicate installations detected, continuing with initialization.',
91 + {currentExtension: EXTENSION_INSTALLATION_TYPE},
92 + );
93 + }
94
77 - let bridge = null;
78 - let store = null;
95 + panelCreated = true;
96
80 - let profilingData = null;
97 + clearInterval(loadCheckInterval);
98
82 - let componentsPortalContainer = null;
83 - let profilerPortalContainer = null;
99 + let bridge = null;
100 + let store = null;
101
85 - let cloneStyleTags = null;
86 - let mostRecentOverrideTab = null;
87 - let render = null;
88 - let root = null;
102 + let profilingData = null;
103
90 - const tabId = chrome.devtools.inspectedWindow.tabId;
104 + let componentsPortalContainer = null;
105 + let profilerPortalContainer = null;
106
92 - registerDevToolsEventLogger('extension');
107 + let cloneStyleTags = null;
108 + let mostRecentOverrideTab = null;
109 + let render = null;
110 + let root = null;
111
94 - function initBridgeAndStore() {
95 - const port = chrome.runtime.connect({
96 - name: String(tabId),
97 - });
98 - // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
99 - // so it makes no sense to handle it here.
100 -
101 - bridge = new Bridge({
102 - listen(fn) {
103 - const listener = message => fn(message);
104 - // Store the reference so that we unsubscribe from the same object.
105 - const portOnMessage = port.onMessage;
106 - portOnMessage.addListener(listener);
107 - return () => {
108 - portOnMessage.removeListener(listener);
109 - };
110 - },
111 - send(event: string, payload: any, transferable?: Array<any>) {
112 - port.postMessage({event, payload}, transferable);
113 - },
114 - });
115 - bridge.addListener('reloadAppForProfiling', () => {
116 - localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
117 - chrome.devtools.inspectedWindow.eval('window.location.reload();');
118 - });
119 - bridge.addListener('syncSelectionToNativeElementsPanel', () => {
120 - setBrowserSelectionFromReact();
121 - });
112 + const tabId = chrome.devtools.inspectedWindow.tabId;
113
123 - // This flag lets us tip the Store off early that we expect to be profiling.
124 - // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
125 - // after a user has clicked the "reload and profile" button.
126 - let isProfiling = false;
127 - let supportsProfiling = false;
128 - if (
129 - localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
130 - ) {
131 - supportsProfiling = true;
132 - isProfiling = true;
133 - localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
134 - }
114 + registerDevToolsEventLogger('extension');
115
136 - if (store !== null) {
137 - profilingData = store.profilerStore.profilingData;
138 - }
116 + function initBridgeAndStore() {
117 + const port = chrome.runtime.connect({
118 + name: String(tabId),
119 + });
120 + // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
121 + // so it makes no sense to handle it here.
122 +
123 + bridge = new Bridge({
124 + listen(fn) {
125 + const listener = message => fn(message);
126 + // Store the reference so that we unsubscribe from the same object.
127 + const portOnMessage = port.onMessage;
128 + portOnMessage.addListener(listener);
129 + return () => {
130 + portOnMessage.removeListener(listener);
131 + };
132 + },
133 + send(event: string, payload: any, transferable?: Array<any>) {
134 + port.postMessage({event, payload}, transferable);
135 + },
136 + });
137 + bridge.addListener('reloadAppForProfiling', () => {
138 + localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
139 + chrome.devtools.inspectedWindow.eval('window.location.reload();');
140 + });
141 + bridge.addListener('syncSelectionToNativeElementsPanel', () => {
142 + setBrowserSelectionFromReact();
143 + });
144
140 - bridge.addListener('extensionBackendInitialized', () => {
141 - // Initialize the renderer's trace-updates setting.
142 - // This handles the case of navigating to a new page after the DevTools have already been shown.
143 - bridge.send(
144 - 'setTraceUpdatesEnabled',
145 - localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===
146 - 'true',
147 - );
148 - });
145 + // This flag lets us tip the Store off early that we expect to be profiling.
146 + // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
147 + // after a user has clicked the "reload and profile" button.
148 + let isProfiling = false;
149 + let supportsProfiling = false;
150 + if (
151 + localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
152 + ) {
153 + supportsProfiling = true;
154 + isProfiling = true;
155 + localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
156 + }
157
150 - store = new Store(bridge, {
151 - isProfiling,
152 - supportsReloadAndProfile: isChrome,
153 - supportsProfiling,
154 - // At this time, the scheduling profiler can only parse Chrome performance profiles.
155 - supportsSchedulingProfiler: isChrome,
156 - supportsTraceUpdates: true,
157 - });
158 - store.profilerStore.profilingData = profilingData;
159 -
160 - // Initialize the backend only once the Store has been initialized.
161 - // Otherwise the Store may miss important initial tree op codes.
162 - chrome.devtools.inspectedWindow.eval(
163 - `window.postMessage({ source: 'react-devtools-inject-backend' }, '*');`,
164 - function(response, evalError) {
165 - if (evalError) {
166 - console.error(evalError);
167 - }
168 - },
169 - );
158 + if (store !== null) {
159 + profilingData = store.profilerStore.profilingData;
160 + }
161
171 - const viewAttributeSourceFunction = (id, path) => {
172 - const rendererID = store.getRendererIDForElement(id);
173 - if (rendererID != null) {
174 - // Ask the renderer interface to find the specified attribute,
175 - // and store it as a global variable on the window.
176 - bridge.send('viewAttributeSource', {id, path, rendererID});
162 + bridge.addListener('extensionBackendInitialized', () => {
163 + // Initialize the renderer's trace-updates setting.
164 + // This handles the case of navigating to a new page after the DevTools have already been shown.
165 + bridge.send(
166 + 'setTraceUpdatesEnabled',
167 + localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===
168 + 'true',
169 + );
170 + });
171
178 - setTimeout(() => {
179 - // Ask Chrome to display the location of the attribute,
180 - // assuming the renderer found a match.
181 - chrome.devtools.inspectedWindow.eval(`
172 + store = new Store(bridge, {
173 + isProfiling,
174 + supportsReloadAndProfile: isChrome,
175 + supportsProfiling,
176 + // At this time, the scheduling profiler can only parse Chrome performance profiles.
177 + supportsSchedulingProfiler: isChrome,
178 + supportsTraceUpdates: true,
179 + });
180 + store.profilerStore.profilingData = profilingData;
181 +
182 + // Initialize the backend only once the Store has been initialized.
183 + // Otherwise the Store may miss important initial tree op codes.
184 + chrome.devtools.inspectedWindow.eval(
185 + `window.postMessage({
186 + source: 'react-devtools-inject-backend',
187 + extensionId: "${CURRENT_EXTENSION_ID}"
188 + }, '*');`,
189 + function(response, evalError) {
190 + if (evalError) {
191 + console.error(evalError);
192 + }
193 + },
194 + );
195 +
196 + const viewAttributeSourceFunction = (id, path) => {
197 + const rendererID = store.getRendererIDForElement(id);
198 + if (rendererID != null) {
199 + // Ask the renderer interface to find the specified attribute,
200 + // and store it as a global variable on the window.
201 + bridge.send('viewAttributeSource', {id, path, rendererID});
202 +
203 + setTimeout(() => {
204 + // Ask Chrome to display the location of the attribute,
205 + // assuming the renderer found a match.
206 + chrome.devtools.inspectedWindow.eval(`
207 if (window.$attribute != null) {
208 inspect(window.$attribute);
209 }
210 `);
186 - }, 100);
187 - }
188 - };
211 + }, 100);
212 + }
213 + };
214
190 - const viewElementSourceFunction = id => {
191 - const rendererID = store.getRendererIDForElement(id);
192 - if (rendererID != null) {
193 - // Ask the renderer interface to determine the component function,
194 - // and store it as a global variable on the window
195 - bridge.send('viewElementSource', {id, rendererID});
196 -
197 - setTimeout(() => {
198 - // Ask Chrome to display the location of the component function,
199 - // or a render method if it is a Class (ideally Class instance, not type)
200 - // assuming the renderer found one.
201 - chrome.devtools.inspectedWindow.eval(`
215 + const viewElementSourceFunction = id => {
216 + const rendererID = store.getRendererIDForElement(id);
217 + if (rendererID != null) {
218 + // Ask the renderer interface to determine the component function,
219 + // and store it as a global variable on the window
220 + bridge.send('viewElementSource', {id, rendererID});
221 +
222 + setTimeout(() => {
223 + // Ask Chrome to display the location of the component function,
224 + // or a render method if it is a Class (ideally Class instance, not type)
225 + // assuming the renderer found one.
226 + chrome.devtools.inspectedWindow.eval(`
227 if (window.$type != null) {
228 if (
229 window.$type &&
@@ -213,288 +238,293 @@ function createPanelIfReactLoaded() {
238 }
239 }
240 `);
216 - }, 100);
217 - }
218 - };
219 -
220 - let debugIDCounter = 0;
241 + }, 100);
242 + }
243 + };
244
222 - // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
223 - // never reaches the chrome.runtime.onMessage event listener.
224 - let fetchFileWithCaching = null;
225 - if (isChrome) {
226 - const fetchFromNetworkCache = (url, resolve, reject) => {
227 - // Debug ID allows us to avoid re-logging (potentially long) URL strings below,
228 - // while also still associating (potentially) interleaved logs with the original request.
229 - let debugID = null;
245 + let debugIDCounter = 0;
246
231 - if (__DEBUG__) {
232 - debugID = debugIDCounter++;
233 - console.log(`[main] fetchFromNetworkCache(${debugID})`, url);
234 - }
247 + // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
248 + // never reaches the chrome.runtime.onMessage event listener.
249 + let fetchFileWithCaching = null;
250 + if (isChrome) {
251 + const fetchFromNetworkCache = (url, resolve, reject) => {
252 + // Debug ID allows us to avoid re-logging (potentially long) URL strings below,
253 + // while also still associating (potentially) interleaved logs with the original request.
254 + let debugID = null;
255
236 - chrome.devtools.network.getHAR(harLog => {
237 - for (let i = 0; i < harLog.entries.length; i++) {
238 - const entry = harLog.entries[i];
239 - if (url === entry.request.url) {
240 - if (__DEBUG__) {
241 - console.log(
242 - `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
243 - url,
244 - );
245 - }
256 + if (__DEBUG__) {
257 + debugID = debugIDCounter++;
258 + console.log(`[main] fetchFromNetworkCache(${debugID})`, url);
259 + }
260
247 - entry.getContent(content => {
248 - if (content) {
249 - if (__DEBUG__) {
250 - console.log(
251 - `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
252 - );
253 - }
261 + chrome.devtools.network.getHAR(harLog => {
262 + for (let i = 0; i < harLog.entries.length; i++) {
263 + const entry = harLog.entries[i];
264 + if (url === entry.request.url) {
265 + if (__DEBUG__) {
266 + console.log(
267 + `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
268 + url,
269 + );
270 + }
271
255 - resolve(content);
256 - } else {
257 - if (__DEBUG__) {
258 - console.log(
259 - `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
260 - content,
261 - );
272 + entry.getContent(content => {
273 + if (content) {
274 + if (__DEBUG__) {
275 + console.log(
276 + `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
277 + );
278 + }
279 +
280 + resolve(content);
281 + } else {
282 + if (__DEBUG__) {
283 + console.log(
284 + `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
285 + content,
286 + );
287 + }
288 +
289 + // Edge case where getContent() returned null; fall back to fetch.
290 + fetchFromPage(url, resolve, reject);
291 }
292 + });
293
264 - // Edge case where getContent() returned null; fall back to fetch.
265 - fetchFromPage(url, resolve, reject);
266 - }
267 - });
294 + return;
295 + }
296 + }
297
269 - return;
298 + if (__DEBUG__) {
299 + console.log(
300 + `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
301 + );
302 }
271 - }
303
304 + // No matching URL found; fall back to fetch.
305 + fetchFromPage(url, resolve, reject);
306 + });
307 + };
308 +
309 + const fetchFromPage = (url, resolve, reject) => {
310 if (__DEBUG__) {
274 - console.log(
275 - `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
276 - );
311 + console.log('[main] fetchFromPage()', url);
312 }
313
279 - // No matching URL found; fall back to fetch.
280 - fetchFromPage(url, resolve, reject);
281 - });
282 - };
283 -
284 - const fetchFromPage = (url, resolve, reject) => {
285 - if (__DEBUG__) {
286 - console.log('[main] fetchFromPage()', url);
287 - }
288 -
289 - function onPortMessage({payload, source}) {
290 - if (source === 'react-devtools-content-script') {
291 - switch (payload?.type) {
292 - case 'fetch-file-with-cache-complete':
293 - chrome.runtime.onMessage.removeListener(onPortMessage);
294 - resolve(payload.value);
295 - break;
296 - case 'fetch-file-with-cache-error':
297 - chrome.runtime.onMessage.removeListener(onPortMessage);
298 - reject(payload.value);
299 - break;
314 + function onPortMessage({payload, source}) {
315 + if (source === 'react-devtools-content-script') {
316 + switch (payload?.type) {
317 + case 'fetch-file-with-cache-complete':
318 + chrome.runtime.onMessage.removeListener(onPortMessage);
319 + resolve(payload.value);
320 + break;
321 + case 'fetch-file-with-cache-error':
322 + chrome.runtime.onMessage.removeListener(onPortMessage);
323 + reject(payload.value);
324 + break;
325 + }
326 }
327 }
302 - }
328
304 - chrome.runtime.onMessage.addListener(onPortMessage);
329 + chrome.runtime.onMessage.addListener(onPortMessage);
330
306 - chrome.devtools.inspectedWindow.eval(`
331 + chrome.devtools.inspectedWindow.eval(`
332 window.postMessage({
333 source: 'react-devtools-extension',
334 + extensionId: "${CURRENT_EXTENSION_ID}"
335 payload: {
336 type: 'fetch-file-with-cache',
337 url: "${url}",
338 },
339 });
340 `);
315 - };
341 + };
342
317 - // Fetching files from the extension won't make use of the network cache
318 - // for resources that have already been loaded by the page.
319 - // This helper function allows the extension to request files to be fetched
320 - // by the content script (running in the page) to increase the likelihood of a cache hit.
321 - fetchFileWithCaching = url => {
322 - return new Promise((resolve, reject) => {
323 - // Try fetching from the Network cache first.
324 - // If DevTools was opened after the page started loading, we may have missed some requests.
325 - // So fall back to a fetch() from the page and hope we get a cached response that way.
326 - fetchFromNetworkCache(url, resolve, reject);
327 - });
343 + // Fetching files from the extension won't make use of the network cache
344 + // for resources that have already been loaded by the page.
345 + // This helper function allows the extension to request files to be fetched
346 + // by the content script (running in the page) to increase the likelihood of a cache hit.
347 + fetchFileWithCaching = url => {
348 + return new Promise((resolve, reject) => {
349 + // Try fetching from the Network cache first.
350 + // If DevTools was opened after the page started loading, we may have missed some requests.
351 + // So fall back to a fetch() from the page and hope we get a cached response that way.
352 + fetchFromNetworkCache(url, resolve, reject);
353 + });
354 + };
355 + }
356 +
357 + // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
358 + const hookNamesModuleLoaderFunction = () =>
359 + import(
360 + /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
361 + );
362 +
363 + root = createRoot(document.createElement('div'));
364 +
365 + render = (overrideTab = mostRecentOverrideTab) => {
366 + mostRecentOverrideTab = overrideTab;
367 + root.render(
368 + createElement(DevTools, {
369 + bridge,
370 + browserTheme: getBrowserTheme(),
371 + componentsPortalContainer,
372 + enabledInspectedElementContextMenu: true,
373 + fetchFileWithCaching,
374 + hookNamesModuleLoaderFunction,
375 + overrideTab,
376 + profilerPortalContainer,
377 + showTabBar: false,
378 + store,
379 + warnIfUnsupportedVersionDetected: true,
380 + viewAttributeSourceFunction,
381 + viewElementSourceFunction,
382 + }),
383 + );
384 };
329 - }
385
331 - // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
332 - const hookNamesModuleLoaderFunction = () =>
333 - import(
334 - /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
335 - );
386 + render();
387 + }
388
337 - root = createRoot(document.createElement('div'));
338 -
339 - render = (overrideTab = mostRecentOverrideTab) => {
340 - mostRecentOverrideTab = overrideTab;
341 - root.render(
342 - createElement(DevTools, {
343 - bridge,
344 - browserTheme: getBrowserTheme(),
345 - componentsPortalContainer,
346 - enabledInspectedElementContextMenu: true,
347 - fetchFileWithCaching,
348 - hookNamesModuleLoaderFunction,
349 - overrideTab,
350 - profilerPortalContainer,
351 - showTabBar: false,
352 - store,
353 - warnIfUnsupportedVersionDetected: true,
354 - viewAttributeSourceFunction,
355 - viewElementSourceFunction,
356 - }),
357 - );
389 + cloneStyleTags = () => {
390 + const linkTags = [];
391 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
392 + for (const linkTag of document.getElementsByTagName('link')) {
393 + if (linkTag.rel === 'stylesheet') {
394 + const newLinkTag = document.createElement('link');
395 + // eslint-disable-next-line no-for-of-loops/no-for-of-loops
396 + for (const attribute of linkTag.attributes) {
397 + newLinkTag.setAttribute(
398 + attribute.nodeName,
399 + attribute.nodeValue,
400 + );
401 + }
402 + linkTags.push(newLinkTag);
403 + }
404 + }
405 + return linkTags;
406 };
407
360 - render();
361 - }
408 + initBridgeAndStore();
409
363 - cloneStyleTags = () => {
364 - const linkTags = [];
365 - // eslint-disable-next-line no-for-of-loops/no-for-of-loops
366 - for (const linkTag of document.getElementsByTagName('link')) {
367 - if (linkTag.rel === 'stylesheet') {
368 - const newLinkTag = document.createElement('link');
369 - // eslint-disable-next-line no-for-of-loops/no-for-of-loops
370 - for (const attribute of linkTag.attributes) {
371 - newLinkTag.setAttribute(attribute.nodeName, attribute.nodeValue);
372 - }
373 - linkTags.push(newLinkTag);
410 + function ensureInitialHTMLIsCleared(container) {
411 + if (container._hasInitialHTMLBeenCleared) {
412 + return;
413 }
414 + container.innerHTML = '';
415 + container._hasInitialHTMLBeenCleared = true;
416 }
376 - return linkTags;
377 - };
417
379 - initBridgeAndStore();
380 -
381 - function ensureInitialHTMLIsCleared(container) {
382 - if (container._hasInitialHTMLBeenCleared) {
383 - return;
418 + function setBrowserSelectionFromReact() {
419 + // This is currently only called on demand when you press "view DOM".
420 + // In the future, if Chrome adds an inspect() that doesn't switch tabs,
421 + // we could make this happen automatically when you select another component.
422 + chrome.devtools.inspectedWindow.eval(
423 + '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
424 + '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
425 + 'false',
426 + (didSelectionChange, evalError) => {
427 + if (evalError) {
428 + console.error(evalError);
429 + }
430 + },
431 + );
432 }
385 - container.innerHTML = '';
386 - container._hasInitialHTMLBeenCleared = true;
387 - }
433
389 - function setBrowserSelectionFromReact() {
390 - // This is currently only called on demand when you press "view DOM".
391 - // In the future, if Chrome adds an inspect() that doesn't switch tabs,
392 - // we could make this happen automatically when you select another component.
393 - chrome.devtools.inspectedWindow.eval(
394 - '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
395 - '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
396 - 'false',
397 - (didSelectionChange, evalError) => {
398 - if (evalError) {
399 - console.error(evalError);
400 - }
401 - },
402 - );
403 - }
404 -
405 - function setReactSelectionFromBrowser() {
406 - // When the user chooses a different node in the browser Elements tab,
407 - // copy it over to the hook object so that we can sync the selection.
408 - chrome.devtools.inspectedWindow.eval(
409 - '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
410 - '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
411 - 'false',
412 - (didSelectionChange, evalError) => {
413 - if (evalError) {
414 - console.error(evalError);
415 - } else if (didSelectionChange) {
416 - // Remember to sync the selection next time we show Components tab.
417 - needsToSyncElementSelection = true;
418 - }
419 - },
420 - );
421 - }
434 + function setReactSelectionFromBrowser() {
435 + // When the user chooses a different node in the browser Elements tab,
436 + // copy it over to the hook object so that we can sync the selection.
437 + chrome.devtools.inspectedWindow.eval(
438 + '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
439 + '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
440 + 'false',
441 + (didSelectionChange, evalError) => {
442 + if (evalError) {
443 + console.error(evalError);
444 + } else if (didSelectionChange) {
445 + // Remember to sync the selection next time we show Components tab.
446 + needsToSyncElementSelection = true;
447 + }
448 + },
449 + );
450 + }
451
423 - setReactSelectionFromBrowser();
424 - chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
452 setReactSelectionFromBrowser();
426 - });
453 + chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
454 + setReactSelectionFromBrowser();
455 + });
456
428 - let currentPanel = null;
429 - let needsToSyncElementSelection = false;
430 -
431 - chrome.devtools.panels.create(
432 - isChrome ? '⚛️ Components' : 'Components',
433 - '',
434 - 'panel.html',
435 - extensionPanel => {
436 - extensionPanel.onShown.addListener(panel => {
437 - if (needsToSyncElementSelection) {
438 - needsToSyncElementSelection = false;
439 - bridge.send('syncSelectionFromNativeElementsPanel');
440 - }
457 + let currentPanel = null;
458 + let needsToSyncElementSelection = false;
459 +
460 + chrome.devtools.panels.create(
461 + isChrome ? '⚛️ Components' : 'Components',
462 + '',
463 + 'panel.html',
464 + extensionPanel => {
465 + extensionPanel.onShown.addListener(panel => {
466 + if (needsToSyncElementSelection) {
467 + needsToSyncElementSelection = false;
468 + bridge.send('syncSelectionFromNativeElementsPanel');
469 + }
470
442 - if (currentPanel === panel) {
443 - return;
444 - }
471 + if (currentPanel === panel) {
472 + return;
473 + }
474
446 - currentPanel = panel;
447 - componentsPortalContainer = panel.container;
475 + currentPanel = panel;
476 + componentsPortalContainer = panel.container;
477
449 - if (componentsPortalContainer != null) {
450 - ensureInitialHTMLIsCleared(componentsPortalContainer);
451 - render('components');
452 - panel.injectStyles(cloneStyleTags);
453 - logEvent({event_name: 'selected-components-tab'});
454 - }
455 - });
456 - extensionPanel.onHidden.addListener(panel => {
457 - // TODO: Stop highlighting and stuff.
458 - });
459 - },
460 - );
461 -
462 - chrome.devtools.panels.create(
463 - isChrome ? '⚛️ Profiler' : 'Profiler',
464 - '',
465 - 'panel.html',
466 - extensionPanel => {
467 - extensionPanel.onShown.addListener(panel => {
468 - if (currentPanel === panel) {
469 - return;
470 - }
478 + if (componentsPortalContainer != null) {
479 + ensureInitialHTMLIsCleared(componentsPortalContainer);
480 + render('components');
481 + panel.injectStyles(cloneStyleTags);
482 + logEvent({event_name: 'selected-components-tab'});
483 + }
484 + });
485 + extensionPanel.onHidden.addListener(panel => {
486 + // TODO: Stop highlighting and stuff.
487 + });
488 + },
489 + );
490
472 - currentPanel = panel;
473 - profilerPortalContainer = panel.container;
491 + chrome.devtools.panels.create(
492 + isChrome ? '⚛️ Profiler' : 'Profiler',
493 + '',
494 + 'panel.html',
495 + extensionPanel => {
496 + extensionPanel.onShown.addListener(panel => {
497 + if (currentPanel === panel) {
498 + return;
499 + }
500
475 - if (profilerPortalContainer != null) {
476 - ensureInitialHTMLIsCleared(profilerPortalContainer);
477 - render('profiler');
478 - panel.injectStyles(cloneStyleTags);
479 - logEvent({event_name: 'selected-profiler-tab'});
480 - }
481 - });
482 - },
483 - );
501 + currentPanel = panel;
502 + profilerPortalContainer = panel.container;
503
485 - chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
504 + if (profilerPortalContainer != null) {
505 + ensureInitialHTMLIsCleared(profilerPortalContainer);
506 + render('profiler');
507 + panel.injectStyles(cloneStyleTags);
508 + logEvent({event_name: 'selected-profiler-tab'});
509 + }
510 + });
511 + },
512 + );
513
487 - // Re-initialize DevTools panel when a new page is loaded.
488 - chrome.devtools.network.onNavigated.addListener(function onNavigated() {
489 - // Re-initialize saved filters on navigation,
490 - // since global values stored on window get reset in this case.
491 - syncSavedPreferences();
514 + chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
515
493 - // It's easiest to recreate the DevTools panel (to clean up potential stale state).
494 - // We can revisit this in the future as a small optimization.
495 - flushSync(() => root.unmount());
516 + // Re-initialize DevTools panel when a new page is loaded.
517 + chrome.devtools.network.onNavigated.addListener(function onNavigated() {
518 + // Re-initialize saved filters on navigation,
519 + // since global values stored on window get reset in this case.
520 + syncSavedPreferences();
521
497 - initBridgeAndStore();
522 + // It's easiest to recreate the DevTools panel (to clean up potential stale state).
523 + // We can revisit this in the future as a small optimization.
524 + flushSync(() => root.unmount());
525 +
526 + initBridgeAndStore();
527 + });
528 });
529 },
530 );
packages/react-devtools/CONTRIBUTING.md
+1 -1
@@ -57,7 +57,7 @@ Some changes requiring testing in the browser extension (e.g. like "named hooks"
57 ```sh
58 cd <react-repo>
59 cd packages/react-devtools-extensions
60 -yarn build:chrome && yarn test:chrome
60 +yarn build:chrome:local && yarn test:chrome
61 ```
62 This will launch a standalone version of Chrome with the locally built React DevTools pre-installed. If you are testing a specific URL, you can make your testing even faster by passing the `--url` argument to the test script:
63 ```sh