refactor: resolve browser via env variables based on build rather than user agent (#27179)
Fixes https://github.com/facebook/react/issues/26911, https://github.com/facebook/react/issues/26860. Currently, we are parsing user agent string to determine which browser is running the extension. This doesn't work well with custom user agents, and sometimes when user turns on mobile dev mode in Firefox, we stop resolving that this is a Firefox browser, extension starts to use Chrome API's and fails to inject. Changes: Since we are building different extensions for all supported browsers (Chrome, Firefox, Edge), we predefine env variables for browser resolution, which are populated in a build step.
Ruslan Lesiutin committed
Aug 29, 2023 at 10:40 UTC
2c4c84718810bf3df411d599acc152d08208d35f
5 files changed
+40
-33
packages/react-devtools-extensions/build.js
+21
-4
@@ -52,16 +52,17 @@ const preProcess = async (destinationPath, tempPath) => {
52
await ensureDir(tempPath); // Create temp dir for this new build
53
};
54
55
-const build = async (tempPath, manifestPath) => {
55
+const build = async (tempPath, manifestPath, envExtension = {}) => {
56
const binPath = join(tempPath, 'bin');
57
const zipPath = join(tempPath, 'zip');
58
+ const mergedEnv = {...process.env, ...envExtension};
59
60
const webpackPath = join(__dirname, 'node_modules', '.bin', 'webpack');
61
execSync(
62
`${webpackPath} --config webpack.config.js --output-path ${binPath}`,
63
{
64
cwd: __dirname,
64
- env: process.env,
65
+ env: mergedEnv,
66
stdio: 'inherit',
67
},
68
);
@@ -69,7 +70,7 @@ const build = async (tempPath, manifestPath) => {
70
`${webpackPath} --config webpack.backend.js --output-path ${binPath}`,
71
{
72
cwd: __dirname,
72
- env: process.env,
73
+ env: mergedEnv,
74
stdio: 'inherit',
75
},
76
);
@@ -132,16 +133,32 @@ const postProcess = async (tempPath, destinationPath) => {
133
await remove(tempPath); // Clean up temp directory and files
134
};
135
136
+const SUPPORTED_BUILDS = ['chrome', 'firefox', 'edge'];
137
+
138
const main = async buildId => {
139
+ if (!SUPPORTED_BUILDS.includes(buildId)) {
140
+ throw new Error(
141
+ `Unexpected build id - "${buildId}". Use one of ${JSON.stringify(
142
+ SUPPORTED_BUILDS,
143
+ )}.`,
144
+ );
145
+ }
146
+
147
const root = join(__dirname, buildId);
148
const manifestPath = join(root, 'manifest.json');
149
const destinationPath = join(root, 'build');
150
151
+ const envExtension = {
152
+ IS_CHROME: buildId === 'chrome',
153
+ IS_FIREFOX: buildId === 'firefox',
154
+ IS_EDGE: buildId === 'edge',
155
+ };
156
+
157
try {
158
const tempPath = join(__dirname, 'build', buildId);
159
await ensureLocalBuild();
160
await preProcess(destinationPath, tempPath);
144
- await build(tempPath, manifestPath);
161
+ await build(tempPath, manifestPath, envExtension);
162
163
const builtUnpackedPath = join(destinationPath, 'unpacked');
164
await postProcess(tempPath, destinationPath);
packages/react-devtools-extensions/edge/build.js
+2
-9
@@ -6,6 +6,7 @@ const chalk = require('chalk');
6
const {execSync} = require('child_process');
7
const {join} = require('path');
8
const {argv} = require('yargs');
9
+
10
const build = require('../build');
11
12
const main = async () => {
@@ -15,15 +16,7 @@ const main = async () => {
16
17
const cwd = join(__dirname, 'build');
18
if (crx) {
18
- const crxPath = join(
19
- __dirname,
20
- '..',
21
- '..',
22
- '..',
23
- 'node_modules',
24
- '.bin',
25
- 'crx'
26
- );
19
+ const crxPath = join(__dirname, '..', 'node_modules', '.bin', 'crx');
20
21
execSync(`${crxPath} pack ./unpacked -o ReactDevTools.crx`, {
22
cwd,
packages/react-devtools-extensions/src/utils.js
+3
-20
@@ -2,26 +2,9 @@
2
3
import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
4
5
-export const IS_EDGE = navigator.userAgent.indexOf('Edg') >= 0;
6
-export const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
7
-export const IS_CHROME = IS_EDGE === false && IS_FIREFOX === false;
8
-
9
-export type BrowserName = 'Chrome' | 'Firefox' | 'Edge';
10
-
11
-export function getBrowserName(): BrowserName {
12
- if (IS_EDGE) {
13
- return 'Edge';
14
- }
15
- if (IS_FIREFOX) {
16
- return 'Firefox';
17
- }
18
- if (IS_CHROME) {
19
- return 'Chrome';
20
- }
21
- throw new Error(
22
- 'Expected browser name to be one of Chrome, Edge or Firefox.',
23
- );
24
-}
5
+export const IS_EDGE: boolean = process.env.IS_EDGE;
6
+export const IS_FIREFOX: boolean = process.env.IS_FIREFOX;
7
+export const IS_CHROME: boolean = process.env.IS_CHROME;
8
9
export function getBrowserTheme(): BrowserTheme {
10
if (IS_CHROME) {
packages/react-devtools-extensions/webpack.backend.js
+7
@@ -34,6 +34,10 @@ const __DEV__ = NODE_ENV === 'development';
34
35
const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
36
37
+const IS_CHROME = process.env.IS_CHROME === 'true';
38
+const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
39
+const IS_EDGE = process.env.IS_EDGE === 'true';
40
+
41
const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
42
43
module.exports = {
@@ -79,6 +83,9 @@ module.exports = {
83
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
84
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
85
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
86
+ 'process.env.IS_CHROME': IS_CHROME,
87
+ 'process.env.IS_FIREFOX': IS_FIREFOX,
88
+ 'process.env.IS_EDGE': IS_EDGE,
89
}),
90
new DevToolsIgnorePlugin({
91
shouldIgnorePath: function (path) {
packages/react-devtools-extensions/webpack.config.js
+7
@@ -35,6 +35,10 @@ const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
35
const EDITOR_URL = process.env.EDITOR_URL || null;
36
const LOGGING_URL = process.env.LOGGING_URL || null;
37
38
+const IS_CHROME = process.env.IS_CHROME === 'true';
39
+const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
40
+const IS_EDGE = process.env.IS_EDGE === 'true';
41
+
42
const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
43
44
const babelOptions = {
@@ -105,6 +109,9 @@ module.exports = {
109
'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
110
'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
111
'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
112
+ 'process.env.IS_CHROME': IS_CHROME,
113
+ 'process.env.IS_FIREFOX': IS_FIREFOX,
114
+ 'process.env.IS_EDGE': IS_EDGE,
115
}),
116
],
117
module: {