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]>
facebook · Sep 23, 2020 · a99bf5c · a99bf5c
1 parent c691734
commit a99bf5c
Show file tree

Hide file tree

Showing 30 changed files with 149 additions and 134 deletions.
diff --git a/fixtures/devtools/iframe/iframe-in-component.html b/fixtures/devtools/iframe/iframe-in-component.html
@@ -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>
diff --git a/fixtures/devtools/iframe/iframe-other-origin.html b/fixtures/devtools/iframe/iframe-other-origin.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <iframe src="http://127.0.0.1:3000/main.html"></iframe>
+  </body>
+</html>
diff --git a/fixtures/devtools/iframe/iframe-same-origin-sandbox.html b/fixtures/devtools/iframe/iframe-same-origin-sandbox.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <iframe sandbox="allow-scripts" src="./main.html"></iframe>
+  </body>
+</html>
diff --git a/fixtures/devtools/iframe/iframe-same-origin.html b/fixtures/devtools/iframe/iframe-same-origin.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+  <head></head>
+  <body>
+    <iframe src="./main.html"></iframe>
+  </body>
+</html>
diff --git a/fixtures/devtools/iframe/index.html b/fixtures/devtools/iframe/index.html
@@ -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>
diff --git a/fixtures/devtools/iframe/main.html b/fixtures/devtools/iframe/main.html
@@ -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>
diff --git a/fixtures/devtools/iframe/server.js 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
@@ -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/[email protected]/dist/react.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
 

diff --git a/fixtures/devtools/regression/15.0.html b/fixtures/devtools/regression/15.0.html
@@ -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/[email protected]/dist/react.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

diff --git a/fixtures/devtools/regression/15.1.html b/fixtures/devtools/regression/15.1.html
@@ -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/[email protected]/dist/react.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
 

diff --git a/fixtures/devtools/regression/15.2.html b/fixtures/devtools/regression/15.2.html
@@ -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/[email protected]/dist/react.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
 

diff --git a/fixtures/devtools/regression/15.3.html b/fixtures/devtools/regression/15.3.html
@@ -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/[email protected]/dist/react.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
 

diff --git a/fixtures/devtools/regression/15.4.html b/fixtures/devtools/regression/15.4.html
@@ -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/[email protected]/dist/react.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
 

diff --git a/fixtures/devtools/regression/15.5.html b/fixtures/devtools/regression/15.5.html
@@ -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/[email protected]/dist/react.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
 

diff --git a/fixtures/devtools/regression/15.6.html b/fixtures/devtools/regression/15.6.html
@@ -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/[email protected]/dist/react.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
 

diff --git a/fixtures/devtools/regression/16.0.html b/fixtures/devtools/regression/16.0.html
@@ -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/[email protected]/umd/react.development.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
 

diff --git a/fixtures/devtools/regression/16.1.html b/fixtures/devtools/regression/16.1.html
@@ -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/[email protected]/umd/react.development.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
 

diff --git a/fixtures/devtools/regression/16.2.html b/fixtures/devtools/regression/16.2.html
@@ -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/[email protected]/umd/react.development.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
 

diff --git a/fixtures/devtools/regression/16.3.html b/fixtures/devtools/regression/16.3.html
@@ -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/[email protected]/umd/react.development.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
 

diff --git a/fixtures/devtools/regression/16.4.html b/fixtures/devtools/regression/16.4.html
@@ -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/[email protected]/umd/react.development.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
 

diff --git a/fixtures/devtools/regression/16.5.html b/fixtures/devtools/regression/16.5.html
@@ -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/[email protected]/umd/schedule.development.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/schedule-tracing.development.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>

diff --git a/fixtures/devtools/regression/16.6.html b/fixtures/devtools/regression/16.6.html
@@ -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/[email protected]/umd/scheduler.development.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/scheduler-tracing.development.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>

diff --git a/fixtures/devtools/regression/16.7.html b/fixtures/devtools/regression/16.7.html
@@ -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/[email protected]/umd/scheduler.development.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/scheduler-tracing.development.js"></script>
     <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>

diff --git a/fixtures/devtools/regression/canary.html b/fixtures/devtools/regression/canary.html
@@ -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>

diff --git a/fixtures/devtools/regression/next.html b/fixtures/devtools/regression/next.html
@@ -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>

diff --git 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
@@ -53,7 +53,8 @@
     {
       "matches": ["<all_urls>"],
       "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
@@ -53,7 +53,8 @@
     {
       "matches": ["<all_urls>"],
       "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
@@ -57,7 +57,8 @@
     {
       "matches": ["<all_urls>"],
       "js": ["build/injectGlobalHook.js"],
-      "run_at": "document_start"
+      "run_at": "document_start",
+      "all_frames": true
     }
   ]
 }