react/packages/react-devtools-extensions/edge/build.js
Ruslan Lesiutin 2c4c847188
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.
2023-08-29 10:40:02 +01:00

40 lines
1.1 KiB
JavaScript

#!/usr/bin/env node
'use strict';
const chalk = require('chalk');
const {execSync} = require('child_process');
const {join} = require('path');
const {argv} = require('yargs');
const build = require('../build');
const main = async () => {
const {crx} = argv;
await build('edge');
const cwd = join(__dirname, 'build');
if (crx) {
const crxPath = join(__dirname, '..', 'node_modules', '.bin', 'crx');
execSync(`${crxPath} pack ./unpacked -o ReactDevTools.crx`, {
cwd,
});
}
console.log(chalk.green('\nThe Microsoft Edge extension has been built!'));
console.log(chalk.green('\nTo load this extension:'));
console.log(chalk.yellow('Navigate to edge://extensions/'));
console.log(chalk.yellow('Enable "Developer mode"'));
console.log(chalk.yellow('Click "LOAD UNPACKED"'));
console.log(chalk.yellow('Select extension folder - ' + cwd + '\\unpacked'));
console.log(chalk.green('\nYou can test this build by running:'));
console.log(chalk.gray('\n# From the react-devtools root directory:'));
console.log('yarn run test:edge\n');
};
main();