Skip to content

Commit a99bf5c

Browse files
omarsyJoel DSouzaDamien Maillardbvaughn
authored
DevTools: Improve browser extension iframe support (#19854)
 Co-authored-by: Joel DSouza <[email protected]> Co-authored-by: Damien Maillard <[email protected]> Co-authored-by: Brian Vaughn <[email protected]>
1 parent c691734 commit a99bf5c

30 files changed

+149
-134
lines changed

‎fixtures/devtools/iframe/iframe-in-component.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
5+
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
<script>
10+
const MyComponent = () => {
11+
return React.createElement("h1", null, "Parent", React.createElement(MainIframe, null, null));
12+
};
13+
14+
const MainIframe = () => {
15+
return React.createElement("iframe", {src: "./main.html", sandbox:"allow-same-origin allow-scripts"}, null);
16+
}
17+
18+
const el = () => React.createElement(MyComponent, null)
19+
20+
ReactDOM.render(el(), document.getElementById('root'))
21+
</script>
22+
</body>
23+
</html>

‎fixtures/devtools/iframe/iframe-other-origin.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head></head>
4+
<body>
5+
<iframe src="http://127.0.0.1:3000/main.html"></iframe>
6+
</body>
7+
</html>

‎fixtures/devtools/iframe/iframe-same-origin-sandbox.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head></head>
4+
<body>
5+
<iframe sandbox="allow-scripts" src="./main.html"></iframe>
6+
</body>
7+
</html>

‎fixtures/devtools/iframe/iframe-same-origin.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head></head>
4+
<body>
5+
<iframe src="./main.html"></iframe>
6+
</body>
7+
</html>

‎fixtures/devtools/iframe/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>React DevTools iframe test</title>
6+
<link rel="stylesheet" href="styles.css" />
7+
</head>
8+
<body>
9+
<iframe src="iframe-in-component.html"></iframe>
10+
<iframe src="iframe-other-origin.html"></iframe>
11+
<iframe src="iframe-same-origin-sandbox.html"></iframe>
12+
<iframe src="iframe-same-origin.html"></iframe>
13+
</body>
14+
</html>

‎fixtures/devtools/iframe/main.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
5+
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
<script>
10+
const MyComponent = () => {
11+
return React.createElement("h1", null, "Coucou");
12+
};
13+
14+
const el = () => React.createElement(MyComponent, null)
15+
16+
ReactDOM.render(el(), document.getElementById('root'))
17+
</script>
18+
</body>
19+
</html>

‎fixtures/devtools/iframe/server.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#!/usr/bin/env node
2+
3+
const finalhandler = require('finalhandler');
4+
const http = require('http');
5+
const serveStatic = require('serve-static');
6+
7+
// Serve fixtures folder
8+
const serve = serveStatic(__dirname);
9+
10+
// Create server
11+
const server = http.createServer(function onRequest(req, res) {
12+
serve(req, res, finalhandler(req, res));
13+
});
14+
15+
console.log('Listening on http://localhost:3000');
16+
17+
// Listen
18+
server.listen(3000);

‎fixtures/devtools/regression/14.9.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 14.9</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
159
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
1610

‎fixtures/devtools/regression/15.0.html

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,6 @@
55
<title>React 15.0</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
138

149
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
1510
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

‎fixtures/devtools/regression/15.1.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 15.1</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
159
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
1610

‎fixtures/devtools/regression/15.2.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 15.2</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
159
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
1610

‎fixtures/devtools/regression/15.3.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 15.3</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
159
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
1610

‎fixtures/devtools/regression/15.4.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 15.4</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
159
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
1610

‎fixtures/devtools/regression/15.5.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 15.5</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
159
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
1610

‎fixtures/devtools/regression/15.6.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 15.6</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
159
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
1610

‎fixtures/devtools/regression/16.0.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 16.0</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
159
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
1610

‎fixtures/devtools/regression/16.1.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 16.1</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
159
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
1610

‎fixtures/devtools/regression/16.2.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 16.2</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
159
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
1610

‎fixtures/devtools/regression/16.3.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 16.3</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
159
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
1610

‎fixtures/devtools/regression/16.4.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 16.4</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
159
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
1610

‎fixtures/devtools/regression/16.5.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 16.5</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/umd/schedule.development.js"></script>
159
<script src="https://unpkg.com/[email protected]/umd/schedule-tracing.development.js"></script>
1610
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>

‎fixtures/devtools/regression/16.6.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 16.6</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/umd/scheduler.development.js"></script>
159
<script src="https://unpkg.com/[email protected]/umd/scheduler-tracing.development.js"></script>
1610
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>

‎fixtures/devtools/regression/16.7.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React 16.7</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/[email protected]/umd/scheduler.development.js"></script>
159
<script src="https://unpkg.com/[email protected]/umd/scheduler-tracing.development.js"></script>
1610
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>

‎fixtures/devtools/regression/canary.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React canary</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/scheduler@canary/umd/scheduler.development.js"></script>
159
<script src="https://unpkg.com/scheduler@canary/umd/scheduler-tracing.development.js"></script>
1610
<script src="https://unpkg.com/react@canary/umd/react.development.js"></script>

‎fixtures/devtools/regression/next.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<title>React next</title>
66
<link rel="stylesheet" href="styles.css" />
77

8-
<script type="text/javascript">
9-
// Enable DevTools to inspect React inside of an <iframe>
10-
// This must run before React is loaded
11-
__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
12-
</script>
13-
148
<script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
159
<script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
1610
<script src="https://unpkg.com/react@next/umd/react.development.js"></script>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,7 @@ yarn run test:chrome # Test Chrome extension
3434

3535
yarn build:firefox # => packages/react-devtools-extensions/firefox/build
3636
yarn run test:firefox # Test Firefox extension
37+
38+
yarn build:edge # => packages/react-devtools-extensions/edge/build
39+
yarn run test:edge # Test Edge extension
3740
```

‎packages/react-devtools-extensions/chrome/manifest.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@
5353
{
5454
"matches": ["<all_urls>"],
5555
"js": ["build/injectGlobalHook.js"],
56-
"run_at": "document_start"
56+
"run_at": "document_start",
57+
"all_frames": true
5758
}
5859
]
5960
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@
5353
{
5454
"matches": ["<all_urls>"],
5555
"js": ["build/injectGlobalHook.js"],
56-
"run_at": "document_start"
56+
"run_at": "document_start",
57+
"all_frames": true
5758
}
5859
]
5960
}

‎packages/react-devtools-extensions/firefox/manifest.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,8 @@
5757
{
5858
"matches": ["<all_urls>"],
5959
"js": ["build/injectGlobalHook.js"],
60-
"run_at": "document_start"
60+
"run_at": "document_start",
61+
"all_frames": true
6162
}
6263
]
6364
}

0 commit comments

Comments
 (0)