From a99bf5c5f4840c558f5e5923fcbe4ad6cb8ade98 Mon Sep 17 00:00:00 2001 From: 6h057 <15034695+omarsy@users.noreply.github.com> Date: Wed, 23 Sep 2020 22:56:13 +0200 Subject: [PATCH] DevTools: Improve browser extension iframe support (#19854) Co-authored-by: Joel DSouza Co-authored-by: Damien Maillard Co-authored-by: Brian Vaughn --- .../devtools/iframe/iframe-in-component.html | 23 +++++++ .../devtools/iframe/iframe-other-origin.html | 7 ++ .../iframe/iframe-same-origin-sandbox.html | 7 ++ .../devtools/iframe/iframe-same-origin.html | 7 ++ fixtures/devtools/iframe/index.html | 14 ++++ fixtures/devtools/iframe/main.html | 19 +++++ fixtures/devtools/iframe/server.js | 18 +++++ fixtures/devtools/regression/14.9.html | 6 -- fixtures/devtools/regression/15.0.html | 5 -- fixtures/devtools/regression/15.1.html | 6 -- fixtures/devtools/regression/15.2.html | 6 -- fixtures/devtools/regression/15.3.html | 6 -- fixtures/devtools/regression/15.4.html | 6 -- fixtures/devtools/regression/15.5.html | 6 -- fixtures/devtools/regression/15.6.html | 6 -- fixtures/devtools/regression/16.0.html | 6 -- fixtures/devtools/regression/16.1.html | 6 -- fixtures/devtools/regression/16.2.html | 6 -- fixtures/devtools/regression/16.3.html | 6 -- fixtures/devtools/regression/16.4.html | 6 -- fixtures/devtools/regression/16.5.html | 6 -- fixtures/devtools/regression/16.6.html | 6 -- fixtures/devtools/regression/16.7.html | 6 -- fixtures/devtools/regression/canary.html | 6 -- fixtures/devtools/regression/next.html | 6 -- packages/react-devtools-extensions/README.md | 3 + .../chrome/manifest.json | 3 +- .../edge/manifest.json | 3 +- .../firefox/manifest.json | 3 +- packages/react-devtools-shared/src/hook.js | 69 ++++++++++++------- 30 files changed, 149 insertions(+), 134 deletions(-) create mode 100644 fixtures/devtools/iframe/iframe-in-component.html create mode 100644 fixtures/devtools/iframe/iframe-other-origin.html create mode 100644 fixtures/devtools/iframe/iframe-same-origin-sandbox.html create mode 100644 fixtures/devtools/iframe/iframe-same-origin.html create mode 100644 fixtures/devtools/iframe/index.html create mode 100644 fixtures/devtools/iframe/main.html create mode 100755 fixtures/devtools/iframe/server.js diff --git a/fixtures/devtools/iframe/iframe-in-component.html b/fixtures/devtools/iframe/iframe-in-component.html new file mode 100644 index 0000000000000..4e123c82e1a61 --- /dev/null +++ b/fixtures/devtools/iframe/iframe-in-component.html @@ -0,0 +1,23 @@ + + + + + + + +
+ + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/iframe-other-origin.html b/fixtures/devtools/iframe/iframe-other-origin.html new file mode 100644 index 0000000000000..cab1851e98639 --- /dev/null +++ b/fixtures/devtools/iframe/iframe-other-origin.html @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/iframe-same-origin-sandbox.html b/fixtures/devtools/iframe/iframe-same-origin-sandbox.html new file mode 100644 index 0000000000000..370e5b549d15a --- /dev/null +++ b/fixtures/devtools/iframe/iframe-same-origin-sandbox.html @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/iframe-same-origin.html b/fixtures/devtools/iframe/iframe-same-origin.html new file mode 100644 index 0000000000000..51d0b2ced40a9 --- /dev/null +++ b/fixtures/devtools/iframe/iframe-same-origin.html @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/index.html b/fixtures/devtools/iframe/index.html new file mode 100644 index 0000000000000..a941775a54f8e --- /dev/null +++ b/fixtures/devtools/iframe/index.html @@ -0,0 +1,14 @@ + + + + + React DevTools iframe test + + + + + + + + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/main.html b/fixtures/devtools/iframe/main.html new file mode 100644 index 0000000000000..e2b2a449e9d62 --- /dev/null +++ b/fixtures/devtools/iframe/main.html @@ -0,0 +1,19 @@ + + + + + + + +
+ + + \ No newline at end of file diff --git a/fixtures/devtools/iframe/server.js b/fixtures/devtools/iframe/server.js new file mode 100755 index 0000000000000..87e5ce0942699 --- /dev/null +++ b/fixtures/devtools/iframe/server.js @@ -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); diff --git a/fixtures/devtools/regression/14.9.html b/fixtures/devtools/regression/14.9.html index 524ff196881f5..c6d6d36fe6f33 100644 --- a/fixtures/devtools/regression/14.9.html +++ b/fixtures/devtools/regression/14.9.html @@ -5,12 +5,6 @@ React 14.9 - - diff --git a/fixtures/devtools/regression/15.0.html b/fixtures/devtools/regression/15.0.html index fde26012c6bbe..37590fdda31c9 100644 --- a/fixtures/devtools/regression/15.0.html +++ b/fixtures/devtools/regression/15.0.html @@ -5,11 +5,6 @@ React 15.0 - diff --git a/fixtures/devtools/regression/15.1.html b/fixtures/devtools/regression/15.1.html index 49813d80a19d6..347540a50d9e0 100644 --- a/fixtures/devtools/regression/15.1.html +++ b/fixtures/devtools/regression/15.1.html @@ -5,12 +5,6 @@ React 15.1 - - diff --git a/fixtures/devtools/regression/15.2.html b/fixtures/devtools/regression/15.2.html index 2be6f7c41aae3..1a9604370cb20 100644 --- a/fixtures/devtools/regression/15.2.html +++ b/fixtures/devtools/regression/15.2.html @@ -5,12 +5,6 @@ React 15.2 - - diff --git a/fixtures/devtools/regression/15.3.html b/fixtures/devtools/regression/15.3.html index cc5c3960d2a44..4011bc352c3d2 100644 --- a/fixtures/devtools/regression/15.3.html +++ b/fixtures/devtools/regression/15.3.html @@ -5,12 +5,6 @@ React 15.3 - - diff --git a/fixtures/devtools/regression/15.4.html b/fixtures/devtools/regression/15.4.html index 93b425a644b6f..f47452a6249df 100644 --- a/fixtures/devtools/regression/15.4.html +++ b/fixtures/devtools/regression/15.4.html @@ -5,12 +5,6 @@ React 15.4 - - diff --git a/fixtures/devtools/regression/15.5.html b/fixtures/devtools/regression/15.5.html index 75f722ccabfe6..6150198a41747 100644 --- a/fixtures/devtools/regression/15.5.html +++ b/fixtures/devtools/regression/15.5.html @@ -5,12 +5,6 @@ React 15.5 - - diff --git a/fixtures/devtools/regression/15.6.html b/fixtures/devtools/regression/15.6.html index 0ec03ee51d123..ed4bd18586faf 100644 --- a/fixtures/devtools/regression/15.6.html +++ b/fixtures/devtools/regression/15.6.html @@ -5,12 +5,6 @@ React 15.6 - - diff --git a/fixtures/devtools/regression/16.0.html b/fixtures/devtools/regression/16.0.html index 1e1403372ca43..75a527525e57e 100644 --- a/fixtures/devtools/regression/16.0.html +++ b/fixtures/devtools/regression/16.0.html @@ -5,12 +5,6 @@ React 16.0 - - diff --git a/fixtures/devtools/regression/16.1.html b/fixtures/devtools/regression/16.1.html index a6131e9ae1ce9..a04afe853fef2 100644 --- a/fixtures/devtools/regression/16.1.html +++ b/fixtures/devtools/regression/16.1.html @@ -5,12 +5,6 @@ React 16.1 - - diff --git a/fixtures/devtools/regression/16.2.html b/fixtures/devtools/regression/16.2.html index 4d0468d343428..457f807365492 100644 --- a/fixtures/devtools/regression/16.2.html +++ b/fixtures/devtools/regression/16.2.html @@ -5,12 +5,6 @@ React 16.2 - - diff --git a/fixtures/devtools/regression/16.3.html b/fixtures/devtools/regression/16.3.html index 335adaeffead1..97f079455e532 100644 --- a/fixtures/devtools/regression/16.3.html +++ b/fixtures/devtools/regression/16.3.html @@ -5,12 +5,6 @@ React 16.3 - - diff --git a/fixtures/devtools/regression/16.4.html b/fixtures/devtools/regression/16.4.html index 8a881ea3fe059..66cd698f9c220 100644 --- a/fixtures/devtools/regression/16.4.html +++ b/fixtures/devtools/regression/16.4.html @@ -5,12 +5,6 @@ React 16.4 - - diff --git a/fixtures/devtools/regression/16.5.html b/fixtures/devtools/regression/16.5.html index ad91102b1b609..cc5c6dcc2e041 100644 --- a/fixtures/devtools/regression/16.5.html +++ b/fixtures/devtools/regression/16.5.html @@ -5,12 +5,6 @@ React 16.5 - - diff --git a/fixtures/devtools/regression/16.6.html b/fixtures/devtools/regression/16.6.html index aa8ae33837e57..5bd63653ee863 100644 --- a/fixtures/devtools/regression/16.6.html +++ b/fixtures/devtools/regression/16.6.html @@ -5,12 +5,6 @@ React 16.6 - - diff --git a/fixtures/devtools/regression/16.7.html b/fixtures/devtools/regression/16.7.html index 76fb9823014c2..85acad6674ec6 100644 --- a/fixtures/devtools/regression/16.7.html +++ b/fixtures/devtools/regression/16.7.html @@ -5,12 +5,6 @@ React 16.7 - - diff --git a/fixtures/devtools/regression/canary.html b/fixtures/devtools/regression/canary.html index 88cadef4ccaf6..20c7ed452cad7 100644 --- a/fixtures/devtools/regression/canary.html +++ b/fixtures/devtools/regression/canary.html @@ -5,12 +5,6 @@ React canary - - diff --git a/fixtures/devtools/regression/next.html b/fixtures/devtools/regression/next.html index 4ac0751a0c22d..2dde165ba3256 100644 --- a/fixtures/devtools/regression/next.html +++ b/fixtures/devtools/regression/next.html @@ -5,12 +5,6 @@ React next - - diff --git a/packages/react-devtools-extensions/README.md b/packages/react-devtools-extensions/README.md index cef2bc9c6db3b..aada529ded1d4 100644 --- a/packages/react-devtools-extensions/README.md +++ b/packages/react-devtools-extensions/README.md @@ -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 ``` diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json index 60fd566a5ebd5..784231770ccb6 100644 --- a/packages/react-devtools-extensions/chrome/manifest.json +++ b/packages/react-devtools-extensions/chrome/manifest.json @@ -53,7 +53,8 @@ { "matches": [""], "js": ["build/injectGlobalHook.js"], - "run_at": "document_start" + "run_at": "document_start", + "all_frames": true } ] } diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json index 3fbb2900bd642..ab4ae6df269f6 100644 --- a/packages/react-devtools-extensions/edge/manifest.json +++ b/packages/react-devtools-extensions/edge/manifest.json @@ -53,7 +53,8 @@ { "matches": [""], "js": ["build/injectGlobalHook.js"], - "run_at": "document_start" + "run_at": "document_start", + "all_frames": true } ] } diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json index ebe8547f10f5b..92f89a3b45e5a 100644 --- a/packages/react-devtools-extensions/firefox/manifest.json +++ b/packages/react-devtools-extensions/firefox/manifest.json @@ -57,7 +57,8 @@ { "matches": [""], "js": ["build/injectGlobalHook.js"], - "run_at": "document_start" + "run_at": "document_start", + "all_frames": true } ] } diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index f9f65df7fb9c8..79d0120a49ffb 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/packages/react-devtools-shared/src/hook.js @@ -21,6 +21,25 @@ export function installHook(target: any): DevToolsHook | null { return null; } + function getMainWindow(targetWindow: any): any { + if (!canAccessParentWindow(targetWindow) || isMainWindow(targetWindow)) { + return targetWindow; + } + return getMainWindow(targetWindow.parent); + } + + function isMainWindow(targetWindow: any): boolean { + return targetWindow.self === targetWindow.top; + } + + function canAccessParentWindow(targetWindow: any): boolean { + try { + return !!targetWindow.parent.origin; + } catch (error) { + return false; + } + } + function detectReactBuildType(renderer) { try { if (typeof renderer.version === 'string') { @@ -282,30 +301,32 @@ export function installHook(target: any): DevToolsHook | null { const listeners = {}; const renderers = new Map(); - const hook: DevToolsHook = { - rendererInterfaces, - listeners, - - // Fast Refresh for web relies on this. - renderers, - - emit, - getFiberRoots, - inject, - on, - off, - sub, - - // This is a legacy flag. - // React v16 checks the hook for this to ensure DevTools is new enough. - supportsFiber: true, - - // React calls these methods. - checkDCE, - onCommitFiberUnmount, - onCommitFiberRoot, - }; - + let hook: DevToolsHook = getMainWindow(target).__REACT_DEVTOOLS_GLOBAL_HOOK__; + if (!hook) { + hook = { + rendererInterfaces, + listeners, + + // Fast Refresh for web relies on this. + renderers, + + emit, + getFiberRoots, + inject, + on, + off, + sub, + + // This is a legacy flag. + // React v16 checks the hook for this to ensure DevTools is new enough. + supportsFiber: true, + + // React calls these methods. + checkDCE, + onCommitFiberUnmount, + onCommitFiberRoot, + }; + } Object.defineProperty( target, '__REACT_DEVTOOLS_GLOBAL_HOOK__',