Skip to content

DevTools: Improve browser extension iframe support #18945

Closed as not planned
@dmail

Description

@dmail

When react is inside an iframe, chrome extension for react devtools fails to detect react.

This is because the extension sets __REACT_DEVTOOLS_GLOBAL_HOOK__ only on the top level window. Apparently it's possible to have __REACT_DEVTOOLS_GLOBAL_HOOK__ on iframes too by adding all_frames: true in extension manifest.json. It was done by redux devtools extension in zalmoxisus/redux-devtools-extension#56.

Have you considered adding all_frames: true to chrome extension ?

Steps To Reproduce

  1. Create a file react-main.html
<!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></body>
</html>
  1. Create a file react-iframe.html
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <iframe src="./react-main.html" />
  </body>
</html>
  1. Open react-iframe.html in chrome

The current behavior

react-devtools-not-detected

The expected behavior

react-devtools-detected

Pull request: #18952

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions