Skip to content

DevTools: Improve browser extension iframe support #19854

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Sep 23, 2020
Merged

DevTools: Improve browser extension iframe support #19854

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
16f07ad
DevTools: Iframe support
Jul 14, 2020
0ed8e93
Add all_frames:true to chrome devtool extension
May 19, 2020
988c450
Add "all_frames": true to edge extension manifest.json
May 19, 2020
2575e2f
Add "all_frames": true to firefox manifest.json
May 19, 2020
4de1f9d
Move iframe files to fixtures directory
May 20, 2020
1e38987
Make iframe server file executable
Jul 6, 2020
05f64d9
devtools support iframe
omarsy Sep 13, 2020
0cc8ade
Merge remote-tracking branch 'upstream/master' into issue-18945
omarsy Sep 13, 2020
0dd15fc
change var to targetWindow
omarsy Sep 13, 2020
554ea7e
Added a log to test server to help me remember the port
bvaughn Sep 14, 2020
6d34c72
Merge remote-tracking branch 'upstream/master' into issue-18945
omarsy Sep 17, 2020
c25f2be
Merge branch 'issue-18945' of https://github.com/omarsy/react into is…
omarsy Sep 17, 2020
acb21b5
handle case: parent window have no __REACT_DEVTOOLS_GLOBAL_HOOK__
omarsy Sep 17, 2020
ae0bd28
delete unused function
omarsy Sep 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions fixtures/devtools/iframe/iframe-in-component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
const MyComponent = () => {
return React.createElement("h1", null, "Parent", React.createElement(MainIframe, null, null));
};

const MainIframe = () => {
return React.createElement("iframe", {src: "./main.html", sandbox:"allow-same-origin allow-scripts"}, null);
}

const el = () => React.createElement(MyComponent, null)

ReactDOM.render(el(), document.getElementById('root'))
</script>
</body>
</html>
7 changes: 7 additions & 0 deletions fixtures/devtools/iframe/iframe-other-origin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe src="http://127.0.0.1:3000/main.html"></iframe>
</body>
</html>
7 changes: 7 additions & 0 deletions fixtures/devtools/iframe/iframe-same-origin-sandbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<!DOCTYPE html>
Copy link
Contributor Author

@omarsy omarsy Oct 6, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@StanislavMayorov Maybe you can add your case like this and push a PR ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a good suggestion!

<html>
<head></head>
<body>
<iframe sandbox="allow-scripts" src="./main.html"></iframe>
</body>
</html>
7 changes: 7 additions & 0 deletions fixtures/devtools/iframe/iframe-same-origin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<head></head>
<body>
<iframe src="./main.html"></iframe>
</body>
</html>
14 changes: 14 additions & 0 deletions fixtures/devtools/iframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React DevTools iframe test</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<iframe src="iframe-in-component.html"></iframe>
<iframe src="iframe-other-origin.html"></iframe>
<iframe src="iframe-same-origin-sandbox.html"></iframe>
<iframe src="iframe-same-origin.html"></iframe>
</body>
</html>
19 changes: 19 additions & 0 deletions fixtures/devtools/iframe/main.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
const MyComponent = () => {
return React.createElement("h1", null, "Coucou");
};

const el = () => React.createElement(MyComponent, null)

ReactDOM.render(el(), document.getElementById('root'))
</script>
</body>
</html>
18 changes: 18 additions & 0 deletions fixtures/devtools/iframe/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
#!/usr/bin/env node

const finalhandler = require('finalhandler');
const http = require('http');
const serveStatic = require('serve-static');

// Serve fixtures folder
const serve = serveStatic(__dirname);

// Create server
const server = http.createServer(function onRequest(req, res) {
serve(req, res, finalhandler(req, res));
});

console.log('Listening on http://localhost:3000');

// Listen
server.listen(3000);
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/14.9.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 14.9</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@0.14.9/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@0.14.9/dist/react-dom.js"></script>

Expand Down
5 changes: 0 additions & 5 deletions fixtures/devtools/regression/15.0.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,6 @@
<title>React 15.0</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@15.0/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.0/dist/react-dom.js"></script>
Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/15.1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 15.1</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@15.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.1/dist/react-dom.js"></script>

Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/15.2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 15.2</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@15.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.2/dist/react-dom.js"></script>

Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/15.3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 15.3</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@15.3/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3/dist/react-dom.js"></script>

Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/15.4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 15.4</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@15.4/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.4/dist/react-dom.js"></script>

Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/15.5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 15.5</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@15.5/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.5/dist/react-dom.js"></script>

Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/15.6.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 15.6</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@15.6/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.6/dist/react-dom.js"></script>

Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/16.0.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 16.0</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@16.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0/umd/react-dom.development.js"></script>

Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/16.1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 16.1</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@16.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.1/umd/react-dom.development.js"></script>

Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/16.2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 16.2</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@16.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.2/umd/react-dom.development.js"></script>

Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/16.3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 16.3</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@16.3/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.3/umd/react-dom.development.js"></script>

Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/16.4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 16.4</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/react@16.4/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.4/umd/react-dom.development.js"></script>

Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/16.5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 16.5</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/schedule@0.5.0/umd/schedule.development.js"></script>
<script src="https://unpkg.com/schedule@0.5.0/umd/schedule-tracing.development.js"></script>
<script src="https://unpkg.com/react@16.5/umd/react.development.js"></script>
Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/16.6.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 16.6</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler.development.js"></script>
<script src="https://unpkg.com/scheduler@0.10.0/umd/scheduler-tracing.development.js"></script>
<script src="https://unpkg.com/react@16.6/umd/react.development.js"></script>
Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/16.7.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React 16.7</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler.development.js"></script>
<script src="https://unpkg.com/scheduler@0.12.0/umd/scheduler-tracing.development.js"></script>
<script src="https://unpkg.com/react@16.7/umd/react.development.js"></script>
Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/canary.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React canary</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/scheduler@canary/umd/scheduler.development.js"></script>
<script src="https://unpkg.com/scheduler@canary/umd/scheduler-tracing.development.js"></script>
<script src="https://unpkg.com/react@canary/umd/react.development.js"></script>
Expand Down
6 changes: 0 additions & 6 deletions fixtures/devtools/regression/next.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,6 @@
<title>React next</title>
<link rel="stylesheet" href="styles.css" />

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

<script src="https://unpkg.com/scheduler@next/umd/scheduler.development.js"></script>
<script src="https://unpkg.com/scheduler@next/umd/scheduler-tracing.development.js"></script>
<script src="https://unpkg.com/react@next/umd/react.development.js"></script>
Expand Down
3 changes: 3 additions & 0 deletions packages/react-devtools-extensions/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,7 @@ yarn run test:chrome # Test Chrome extension

yarn build:firefox # => packages/react-devtools-extensions/firefox/build
yarn run test:firefox # Test Firefox extension

yarn build:edge # => packages/react-devtools-extensions/edge/build
yarn run test:edge # Test Edge extension
```
3 changes: 2 additions & 1 deletion packages/react-devtools-extensions/chrome/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@
{
"matches": ["<all_urls>"],
"js": ["build/injectGlobalHook.js"],
"run_at": "document_start"
"run_at": "document_start",
"all_frames": true
}
]
}
3 changes: 2 additions & 1 deletion packages/react-devtools-extensions/edge/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,8 @@
{
"matches": ["<all_urls>"],
"js": ["build/injectGlobalHook.js"],
"run_at": "document_start"
"run_at": "document_start",
"all_frames": true
}
]
}
3 changes: 2 additions & 1 deletion packages/react-devtools-extensions/firefox/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@
{
"matches": ["<all_urls>"],
"js": ["build/injectGlobalHook.js"],
"run_at": "document_start"
"run_at": "document_start",
"all_frames": true
}
]
}
Loading