Bruteforcing react devtools

facebook · jorge-cab · Jun 3, 2025 · May 6, 2025 · May 7, 2025 · May 7, 2025
commit 0e5c79cfead6ee49b81ac5a55340c0fb6a95d852
diff --git a/.../packages/react-mcp-server/src/extensions/react-devtools/icons/128-deadcode.png b/.../packages/react-mcp-server/src/extensions/react-devtools/icons/128-deadcode.png
diff --git a/...ckages/react-mcp-server/src/extensions/react-devtools/icons/128-development.png b/...ckages/react-mcp-server/src/extensions/react-devtools/icons/128-development.png
diff --git a/.../packages/react-mcp-server/src/extensions/react-devtools/icons/128-disabled.png b/.../packages/react-mcp-server/src/extensions/react-devtools/icons/128-disabled.png
diff --git a/.../packages/react-mcp-server/src/extensions/react-devtools/icons/128-outdated.png b/.../packages/react-mcp-server/src/extensions/react-devtools/icons/128-outdated.png
diff --git a/...ackages/react-mcp-server/src/extensions/react-devtools/icons/128-production.png b/...ackages/react-mcp-server/src/extensions/react-devtools/icons/128-production.png
diff --git a/...ackages/react-mcp-server/src/extensions/react-devtools/icons/128-restricted.png b/...ackages/react-mcp-server/src/extensions/react-devtools/icons/128-restricted.png
diff --git a/...ackages/react-mcp-server/src/extensions/react-devtools/icons/128-unminified.png b/...ackages/react-mcp-server/src/extensions/react-devtools/icons/128-unminified.png
diff --git a/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/16-deadcode.png b/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/16-deadcode.png
diff --git a/...ackages/react-mcp-server/src/extensions/react-devtools/icons/16-development.png b/...ackages/react-mcp-server/src/extensions/react-devtools/icons/16-development.png
diff --git a/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/16-disabled.png b/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/16-disabled.png
diff --git a/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/16-outdated.png b/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/16-outdated.png
diff --git a/...packages/react-mcp-server/src/extensions/react-devtools/icons/16-production.png b/...packages/react-mcp-server/src/extensions/react-devtools/icons/16-production.png
diff --git a/...packages/react-mcp-server/src/extensions/react-devtools/icons/16-restricted.png b/...packages/react-mcp-server/src/extensions/react-devtools/icons/16-restricted.png
diff --git a/...packages/react-mcp-server/src/extensions/react-devtools/icons/16-unminified.png b/...packages/react-mcp-server/src/extensions/react-devtools/icons/16-unminified.png
diff --git a/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/32-deadcode.png b/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/32-deadcode.png
diff --git a/...ackages/react-mcp-server/src/extensions/react-devtools/icons/32-development.png b/...ackages/react-mcp-server/src/extensions/react-devtools/icons/32-development.png
diff --git a/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/32-disabled.png b/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/32-disabled.png
diff --git a/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/32-outdated.png b/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/32-outdated.png
diff --git a/...packages/react-mcp-server/src/extensions/react-devtools/icons/32-production.png b/...packages/react-mcp-server/src/extensions/react-devtools/icons/32-production.png
diff --git a/...packages/react-mcp-server/src/extensions/react-devtools/icons/32-restricted.png b/...packages/react-mcp-server/src/extensions/react-devtools/icons/32-restricted.png
diff --git a/...packages/react-mcp-server/src/extensions/react-devtools/icons/32-unminified.png b/...packages/react-mcp-server/src/extensions/react-devtools/icons/32-unminified.png
diff --git a/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/48-deadcode.png b/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/48-deadcode.png
diff --git a/...ackages/react-mcp-server/src/extensions/react-devtools/icons/48-development.png b/...ackages/react-mcp-server/src/extensions/react-devtools/icons/48-development.png
diff --git a/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/48-disabled.png b/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/48-disabled.png
diff --git a/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/48-outdated.png b/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/48-outdated.png
diff --git a/...packages/react-mcp-server/src/extensions/react-devtools/icons/48-production.png b/...packages/react-mcp-server/src/extensions/react-devtools/icons/48-production.png
diff --git a/...packages/react-mcp-server/src/extensions/react-devtools/icons/48-restricted.png b/...packages/react-mcp-server/src/extensions/react-devtools/icons/48-restricted.png
diff --git a/...packages/react-mcp-server/src/extensions/react-devtools/icons/48-unminified.png b/...packages/react-mcp-server/src/extensions/react-devtools/icons/48-unminified.png
diff --git a/...iler/packages/react-mcp-server/src/extensions/react-devtools/icons/deadcode.svg b/...iler/packages/react-mcp-server/src/extensions/react-devtools/icons/deadcode.svg
diff --git a/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/development.svg b/...r/packages/react-mcp-server/src/extensions/react-devtools/icons/development.svg
diff --git a/...iler/packages/react-mcp-server/src/extensions/react-devtools/icons/disabled.svg b/...iler/packages/react-mcp-server/src/extensions/react-devtools/icons/disabled.svg
diff --git a/...iler/packages/react-mcp-server/src/extensions/react-devtools/icons/outdated.svg b/...iler/packages/react-mcp-server/src/extensions/react-devtools/icons/outdated.svg
diff --git a/...er/packages/react-mcp-server/src/extensions/react-devtools/icons/production.svg b/...er/packages/react-mcp-server/src/extensions/react-devtools/icons/production.svg
diff --git a/...er/packages/react-mcp-server/src/extensions/react-devtools/icons/restricted.svg b/...er/packages/react-mcp-server/src/extensions/react-devtools/icons/restricted.svg
diff --git a/compiler/packages/react-mcp-server/src/extensions/react-devtools/main.html b/compiler/packages/react-mcp-server/src/extensions/react-devtools/main.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <script src="./build/main.js"></script>
+    </head>
+    <body>
+    </body>
+</html>
diff --git a/compiler/packages/react-mcp-server/src/extensions/react-devtools/manifest.json b/compiler/packages/react-mcp-server/src/extensions/react-devtools/manifest.json
@@ -0,0 +1,65 @@
+{
+  "manifest_version": 3,
+  "name": "React Developer Tools",
+  "description": "Adds React debugging tools to the Chrome Developer Tools.\n\nCreated from revision b9cfa0d308 on 5/5/2025.",
+  "version": "6.1.1",
+  "version_name": "6.1.1 (5/5/2025)",
+  "minimum_chrome_version": "102",
+  "icons": {
+    "16": "icons/16-production.png",
+    "32": "icons/32-production.png",
+    "48": "icons/48-production.png",
+    "128": "icons/128-production.png"
+  },
+  "action": {
+    "default_icon": {
+      "16": "icons/16-disabled.png",
+      "32": "icons/32-disabled.png",
+      "48": "icons/48-disabled.png",
+      "128": "icons/128-disabled.png"
+    },
+    "default_popup": "popups/disabled.html"
+  },
+  "devtools_page": "main.html",
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  },
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "main.html",
+        "panel.html",
+        "build/*.js"
+      ],
+      "matches": [
+        "<all_urls>"
+      ],
+      "extension_ids": []
+    }
+  ],
+  "background": {
+    "service_worker": "build/background.js"
+  },
+  "permissions": [
+    "scripting",
+    "storage",
+    "tabs"
+  ],
+  "optional_permissions": [
+    "clipboardWrite"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "build/prepareInjection.js"
+      ],
+      "run_at": "document_start"
+    }
+  ]
+}
diff --git a/compiler/packages/react-mcp-server/src/extensions/react-devtools/panel.html b/compiler/packages/react-mcp-server/src/extensions/react-devtools/panel.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html style="display: flex">
+    <head>
+        <meta charset="utf8">
+        <style>
+            html {
+                display: flex;
+            }
+            body {
+                margin: 0;
+                padding: 0;
+                flex: 1;
+                display: flex;
+            }
+            #container {
+                display: flex;
+                flex: 1;
+                width: 100%;
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+            .no-react-disclaimer {
+              margin: 16px;
+              font-family: Courier, monospace, serif;
+              font-size: 16px;
+              animation: fadeIn .5s ease-in-out forwards;
+            }
+
+            @keyframes fadeIn {
+              0% {
+                opacity: 0;
+              }
+              100% {
+                opacity: 1;
+              }
+            }
+
+            @media (prefers-color-scheme: dark) {
+              :root {
+                color-scheme: dark;
+              }
+
+              @supports (-moz-appearance:none) {
+                :root {
+                  background: black;
+                }
+
+                body {
+                  color: white;
+                }
+              }
+            }
+        </style>
+    </head>
+    <body>
+        <!-- main react mount point -->
+        <div id="container">
+          <h1 class="no-react-disclaimer">Looks like this page doesn't have React, or it hasn't been loaded yet.</h1>
+        </div>
+        <script src="./build/panel.js"></script>
+    </body>
+</html>
diff --git a/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/deadcode.html b/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/deadcode.html
@@ -0,0 +1,28 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 460px;
+    min-height: 133px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page includes an extra development build of React. &#x1f6a7;</b>
+</p>
+<p>
+  The React build on this page includes both development and production versions because dead code elimination has not been applied correctly.
+  <br />
+  <br />
+  This makes its size larger, and causes React to run slower.
+  <br />
+  <br />
+  Make sure to <a href="https://reactjs.org/docs/optimizing-performance.html#use-the-production-build">set up dead code elimination</a> before deployment.
+</p>
+<hr />
+<p>
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
+</p>
diff --git a/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/development.html b/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/development.html
@@ -0,0 +1,24 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 460px;
+    min-height: 101px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page is using the development build of React. &#x1f6a7;</b>
+</p>
+<p>
+  Note that the development build is not suitable for production.
+  <br />
+  Make sure to <a href="https://reactjs.org/docs/optimizing-performance.html#use-the-production-build">use the production build</a> before deployment.
+</p>
+<hr />
+<p>
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
+</p>
diff --git a/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/disabled.html b/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/disabled.html
@@ -0,0 +1,17 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 410px;
+    min-height: 33px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page doesn&rsquo;t appear to be using React.</b>
+  <br />
+  If this seems wrong, follow the <a href="https://github.com/facebook/react/tree/main/packages/react-devtools#the-react-tab-doesnt-show-up">troubleshooting instructions</a>.
+</p>
diff --git a/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/outdated.html b/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/outdated.html
@@ -0,0 +1,25 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 460px;
+    min-height: 117px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page is using an outdated version of React. &#8987;</b>
+</p>
+<p>
+  We recommend updating React to ensure that you receive important bugfixes and performance improvements.
+  <br />
+  <br />
+  You can find the upgrade instructions on the <a href="https://reactjs.org/blog/">React blog</a>.
+</p>
+<hr />
+<p>
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
+</p>
diff --git a/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/production.html b/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/production.html
@@ -0,0 +1,17 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 460px;
+    min-height: 39px;
+  }
+
+  hr {
+    width: 100%;
+  }
+</style>
+<p>
+  <b>This page is using the production build of React. &#x2705;</b>
+  <br />
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
+</p>
diff --git a/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/restricted.html b/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/restricted.html
@@ -0,0 +1,14 @@
+<script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
+<style>
+  html, body {
+    min-width: 286px;
+    min-height: 33px;
+  }
+
+</style>
+<p>
+  <b>This is a restricted browser page.</b>
+  <br />
+  React devtools cannot access this page.
+</p>
diff --git a/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/shared.css b/compiler/packages/react-mcp-server/src/extensions/react-devtools/popups/shared.css
@@ -0,0 +1,23 @@
+html, body {
+  font-size: 14px;
+}
+
+body {
+  margin: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+
+  @supports (-moz-appearance:none) {
+    :root {
+      background: black;
+    }
+
+    body {
+      color: white;
+    }
+  }
+}