search

facebook / react-devtools

An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.
Other
11.04k stars 1.78k forks source link

React elements created within Chrome Extension not recognized #98

Closed polymorfiq closed 7 years ago

polymorfiq commented 9 years ago

I have created a Chrome Extension that makes use of React through browserify, react and reactify.

Chrome Extensions are unable to permanently modify window variables and thus I can't find a way to make React Devtools become aware of the React elements injected into the page by my extension.

I have made it so React recognizes that React is on the page by injecting a "script" tag into the specific page. But React Devtools then only recognizes "Top Level". Without this, the React tab never pops up.

empyrical commented 9 years ago

Chrome content scripts run in an entirely separate world from the webpage they've been injected in:

https://developer.chrome.com/extensions/content_scripts#execution-environment

React's devtools will need to be able to look in to other Javascript contexts running on a page for it to be able to inspect components injected by content scripts.

RaitoBezarius commented 9 years ago

Any workarounds on this except loading the application inside a web page? It would be awesome to have the React tab on extensions' popup.

gaearon commented 7 years ago

This npm package should solve your problems: https://github.com/facebook/react-devtools/tree/master/packages/react-devtools