React developer tools extension for Microsoft Edge (#18041)
* Port Chrome extension to Microsoft Edge
Haseeb Furkhan Mohammed committed
Feb 18, 2020 at 09:40 UTC
d5ddc16a3398c33d70489cee87f5176c85f3c9f5
8 files changed
+159
-4
packages/react-devtools-extensions/deploy.edge.html
new
+8
@@ -0,0 +1,8 @@
1
+<ol>
2
+ <li><a href="ReactDevTools.zip">download extension</a></li>
3
+ <li>Double-click to extract</li>
4
+ <li>Navigate to <code>edge://extensions/</code></li>
5
+ <li>Enable "Developer mode"</li>
6
+ <li>Click "LOAD UNPACKED"</li>
7
+ <li>Select extracted extension folder (<code>ReactDevTools</code>)</li>
8
+</ol>
\ No newline at end of file
packages/react-devtools-extensions/edge/README.md
new
+12
@@ -0,0 +1,12 @@
1
+# The Microsoft Edge extension
2
+
3
+The source code for this extension has moved to `shells/webextension`.
4
+
5
+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.
6
+
7
+## Testing in Microsoft Edge
8
+
9
+You can test a local build of the web extension like so:
10
+
11
+ 1. Build the extension: `node build`
12
+ 1. Follow the on-screen instructions.
packages/react-devtools-extensions/edge/build.js
new
+46
@@ -0,0 +1,46 @@
1
+#!/usr/bin/env node
2
+
3
+'use strict';
4
+
5
+const chalk = require('chalk');
6
+const {execSync} = require('child_process');
7
+const {join} = require('path');
8
+const {argv} = require('yargs');
9
+const build = require('../build');
10
+
11
+const main = async () => {
12
+ const {crx} = argv;
13
+
14
+ await build('edge');
15
+
16
+ const cwd = join(__dirname, 'build');
17
+ if (crx) {
18
+ const crxPath = join(
19
+ __dirname,
20
+ '..',
21
+ '..',
22
+ '..',
23
+ 'node_modules',
24
+ '.bin',
25
+ 'crx'
26
+ );
27
+
28
+ execSync(`${crxPath} pack ./unpacked -o ReactDevTools.crx`, {
29
+ cwd,
30
+ });
31
+ }
32
+
33
+ console.log(chalk.green('\nThe Microsoft Edge extension has been built!'));
34
+
35
+ console.log(chalk.green('\nTo load this extension:'));
36
+ console.log(chalk.yellow('Navigate to edge://extensions/'));
37
+ console.log(chalk.yellow('Enable "Developer mode"'));
38
+ console.log(chalk.yellow('Click "LOAD UNPACKED"'));
39
+ console.log(chalk.yellow('Select extension folder - ' + cwd + '\\unpacked'));
40
+
41
+ console.log(chalk.green('\nYou can test this build by running:'));
42
+ console.log(chalk.gray('\n# From the react-devtools root directory:'));
43
+ console.log('yarn run test:edge\n');
44
+};
45
+
46
+main();
packages/react-devtools-extensions/edge/deploy.js
new
+9
@@ -0,0 +1,9 @@
1
+#!/usr/bin/env node
2
+
3
+'use strict';
4
+
5
+const deploy = require('../deploy');
6
+
7
+const main = async () => await deploy('edge');
8
+
9
+main();
packages/react-devtools-extensions/edge/manifest.json
new
+52
@@ -0,0 +1,52 @@
1
+{
2
+ "manifest_version": 2,
3
+ "name": "React Developer Tools",
4
+ "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
5
+ "version": "4.4.0",
6
+ "version_name": "4.4.0",
7
+
8
+ "minimum_chrome_version": "49",
9
+
10
+ "icons": {
11
+ "16": "icons/16-production.png",
12
+ "32": "icons/32-production.png",
13
+ "48": "icons/48-production.png",
14
+ "128": "icons/128-production.png"
15
+ },
16
+
17
+ "browser_action": {
18
+ "default_icon": {
19
+ "16": "icons/16-disabled.png",
20
+ "32": "icons/32-disabled.png",
21
+ "48": "icons/48-disabled.png",
22
+ "128": "icons/128-disabled.png"
23
+ },
24
+
25
+ "default_popup": "popups/disabled.html"
26
+ },
27
+
28
+ "devtools_page": "main.html",
29
+
30
+ "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
31
+ "web_accessible_resources": [
32
+ "main.html",
33
+ "panel.html",
34
+ "build/react_devtools_backend.js",
35
+ "build/renderer.js"
36
+ ],
37
+
38
+ "background": {
39
+ "scripts": ["build/background.js"],
40
+ "persistent": false
41
+ },
42
+
43
+ "permissions": ["file:///*", "http://*/*", "https://*/*"],
44
+
45
+ "content_scripts": [
46
+ {
47
+ "matches": ["<all_urls>"],
48
+ "js": ["build/injectGlobalHook.js"],
49
+ "run_at": "document_start"
50
+ }
51
+ ]
52
+}
packages/react-devtools-extensions/edge/now.json
new
+5
@@ -0,0 +1,5 @@
1
+{
2
+ "name": "react-devtools-experimental-edge",
3
+ "alias": ["react-devtools-experimental-edge"],
4
+ "files": ["index.html", "ReactDevTools.zip"]
5
+}
packages/react-devtools-extensions/edge/test.js
new
+18
@@ -0,0 +1,18 @@
1
+#!/usr/bin/env node
2
+
3
+'use strict';
4
+
5
+const edge = require('windows-edge');
6
+
7
+const START_URL = 'https://facebook.github.io/react/';
8
+
9
+edge({uri: START_URL}, (err, ps) => {
10
+ if (err) throw err;
11
+ ps.on('error', console.error);
12
+ ps.on('exit', code => {
13
+ // Browser exited
14
+ });
15
+ setTimeout(() => {
16
+ ps.kill();
17
+ }, 2000);
18
+});
packages/react-devtools-extensions/package.json
+9
-4
@@ -3,15 +3,19 @@
3
"version": "0.0.0",
4
"private": true,
5
"scripts": {
6
- "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox",
7
- "build:dev": "cross-env NODE_ENV=development yarn run build:chrome && yarn run build:firefox",
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 && yarn run build:firefox && yarn run build:edge",
8
"build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
9
"build:chrome:crx": "cross-env NODE_ENV=production node ./chrome/build --crx",
10
"build:chrome:dev": "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",
13
+ "build:edge": "cross-env NODE_ENV=production node ./edge/build",
14
+ "build:edge:crx": "cross-env NODE_ENV=production node ./edge/build --crx",
15
+ "build:edge:dev": "cross-env NODE_ENV=development node ./edge/build",
16
"test:chrome": "node ./chrome/test",
14
- "test:firefox": "node ./firefox/test"
17
+ "test:firefox": "node ./firefox/test",
18
+ "test:edge": "node ./edge/test"
19
},
20
"devDependencies": {
21
"@babel/core": "^7.1.6",
@@ -37,6 +41,7 @@
41
"web-ext": "^3.0.0",
42
"webpack": "^4.41.2",
43
"webpack-cli": "^3.3.10",
40
- "webpack-dev-server": "^3.3.1"
44
+ "webpack-dev-server": "^3.3.1",
45
+ "windows-edge": "^1.0.1"
46
}
47
}