React developer tools extension for Microsoft Edge (#18041)

* Port Chrome extension to Microsoft Edge

packages/react-devtools-extensions/deploy.edge.html

@@ -0,0 +1,8 @@
+<ol>
+  <li><a href="ReactDevTools.zip">download extension</a></li>
+  <li>Double-click to extract</li>
+  <li>Navigate to <code>edge://extensions/</code></li>
+  <li>Enable "Developer mode"</li>
+  <li>Click "LOAD UNPACKED"</li>
+  <li>Select extracted extension folder (<code>ReactDevTools</code>)</li>
+</ol>

packages/react-devtools-extensions/edge/README.md

@@ -0,0 +1,12 @@
+# The Microsoft Edge extension
+
+The source code for this extension has moved to `shells/webextension`.
+
+Modify the source code there and then rebuild this extension by running `node build` from this directory or `yarn run build:extension:edge` from the root directory.
+
+## Testing in Microsoft Edge
+
+You can test a local build of the web extension like so:
+
+ 1. Build the extension: `node build`
+ 1. Follow the on-screen instructions.

packages/react-devtools-extensions/edge/build.js

@@ -0,0 +1,46 @@
+#!/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();

packages/react-devtools-extensions/edge/deploy.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const deploy = require('../deploy');
+
+const main = async () => await deploy('edge');
+
+main();

packages/react-devtools-extensions/edge/manifest.json

@@ -0,0 +1,52 @@
+{
+  "manifest_version": 2,
+  "name": "React Developer Tools",
+  "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
+  "version": "4.4.0",
+  "version_name": "4.4.0",
+
+  "minimum_chrome_version": "49",
+
+  "icons": {
+    "16": "icons/16-production.png",
+    "32": "icons/32-production.png",
+    "48": "icons/48-production.png",
+    "128": "icons/128-production.png"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/16-disabled.png",
+      "32": "icons/32-disabled.png",
+      "48": "icons/48-disabled.png",
+      "128": "icons/128-disabled.png"
+    },
+
+    "default_popup": "popups/disabled.html"
+  },
+
+  "devtools_page": "main.html",
+
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "web_accessible_resources": [
+    "main.html",
+    "panel.html",
+    "build/react_devtools_backend.js",
+    "build/renderer.js"
+  ],
+
+  "background": {
+    "scripts": ["build/background.js"],
+    "persistent": false
+  },
+
+  "permissions": ["file:///*", "http://*/*", "https://*/*"],
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["build/injectGlobalHook.js"],
+      "run_at": "document_start"
+    }
+  ]
+}

packages/react-devtools-extensions/edge/now.json

@@ -0,0 +1,5 @@
+{
+  "name": "react-devtools-experimental-edge",
+  "alias": ["react-devtools-experimental-edge"],
+  "files": ["index.html", "ReactDevTools.zip"]
+}

packages/react-devtools-extensions/edge/test.js

@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const edge = require('windows-edge');
+
+const START_URL = 'https://facebook.github.io/react/';
+
+edge({uri: START_URL}, (err, ps) => {
+  if (err) throw err;
+  ps.on('error', console.error);
+  ps.on('exit', code => {
+    // Browser exited
+  });
+  setTimeout(() => {
+    ps.kill();
+  }, 2000);
+});

packages/react-devtools-extensions/package.json

@@ -3,15 +3,19 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox",
-    "build:dev": "cross-env NODE_ENV=development yarn run build:chrome && yarn run build:firefox",
+    "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox && yarn run build:edge",
+    "build:dev": "cross-env NODE_ENV=development yarn run build:chrome && yarn run build:firefox && yarn run build:edge",
     "build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
     "build:chrome:crx": "cross-env NODE_ENV=production node ./chrome/build --crx",
     "build:chrome:dev": "cross-env NODE_ENV=development node ./chrome/build",
     "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
     "build:firefox:dev": "cross-env NODE_ENV=development node ./firefox/build",
+    "build:edge": "cross-env NODE_ENV=production node ./edge/build",
+    "build:edge:crx": "cross-env NODE_ENV=production node ./edge/build --crx",
+    "build:edge:dev": "cross-env NODE_ENV=development node ./edge/build",
     "test:chrome": "node ./chrome/test",
-    "test:firefox": "node ./firefox/test"
+    "test:firefox": "node ./firefox/test",
+    "test:edge": "node ./edge/test"
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",
@@ -37,6 +41,7 @@
     "web-ext": "^3.0.0",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.3.1"
+    "webpack-dev-server": "^3.3.1",
+    "windows-edge": "^1.0.1"
   }
 }