React-devtools: Not showing up when inspecting a Chrome app

[gurdiga]

I’m using React to develop the UI for a Chrome app.

I have installed the React Chrome Developer Tools, it shows up in Crome dev tools in the browser, but it doesn’t show up when I’m inspecting the Chrome app’s UI.

I imagine this use case may have not been expected/popular, but I’m still wondering if it’d be a way around it.

[sophiebits]

I don't know offhand why this wouldn't work but if you figure it out, I'd be happy to take a patch to fix it.

[gurdiga]

I have added a print statement in injected/GlobalHook.js and it seems that it’s not run within the other extension’s¹ pages, although content_scripts.matches in manifest is <all_urls>.

I’m wondering if you guys have seen this kind of issue before.

¹ and a packaged Chrome app like mine is essentially a Chrome extension because it’s location.href is chrome-extension://fcfaacoiceonjcbkphlmimnmngcalndp/index.html

[rafales]

Same issue here. Is it possible that's because of CSP enforced for all chrome packaged apps?

Adding this code:

Object.defineProperty(
  window, '__REACT_DEVTOOLS_GLOBAL_HOOK__', {
    value: {
      inject: function(runtime){ this._reactRuntime = runtime },
      getSelectedInstance: null,
      Overlay: null,
    }
  }
)

to a separate script which gets loaded via the script tag makes it work for me. Hovering over components in the react inspector causes error because of the open() being not available for packaged apps (see screenshot).

[gurdiga]

@rafales That is interesting insight, thank you for sharing! :+1:

[sophiebits]

Maybe https://code.google.com/p/chromium/issues/detail?id=77440.

[rafales]

Correct me if I'm wrong, but this means that there is no possibility to load the GlobalHook.js code on app's startup automatically, so the only thing that can be done is to change how react exposes it's internals for the devtools?

Also can we do anything abot the errors on the screenshot? Having "overlay" on currently hovered component is really useful. Should I open separate issue for that?

[sophiebits]

It sounds to me like Chrome's security policy is designed to prevent extensions from communicating with each other in this way. I don't have a good understanding of why the tools mostly work when you define __REACT_DEVTOOLS_GLOBAL_HOOK__ manually. If we can figure out a way to get past that problem (which may simply involve waiting for a fix upstream) then it's worth looking into the overlay errors, but otherwise I don't think there's much point.

[rafales]

React is supposed to expose internals in REACT_DEVTOOLS_GLOBAL_HOOK but only if it exists. Normally it's defined by the content script. For devtools extensions content script is the only way to inject javascript before other scripts (like react) gets loaded.

[ghost]

Hello people,

tl;dr;
i just/still have the same problem. the "React" tab just does not show in the devtools.

thing is, i had it before. my current spec is:
chrome: 40.0.2214.111 (64-bit)
chromium: 43.0.2357.125 (64-bit)
React Developer Tools 0.13.1
OS: arch linux

does not work on either browser. installed it some month ago, worked fine. in the mean time, did other stuff/vacations/projects, didn't touch react for a while. upgraded my box, got the browser versions stated above.
then, started a new react project and noticed that the tab was gone(still had the older version, whatever it was). removed the "react" extension, re-installed it, and the current is 0.13.1. still does not show.

i don't see any branch or tag named V2, so is this patched in the official extension? or is the fix dependent on the browser versions somehow?

[petejkim]

I don't think it's fixed yet. It means "will be fixed in v2"

[jaredly]

yeah -- sorry if that's confusing. v2 will be coming shortly!

[dsimmons]

What's the status on this and/or is there a temporary workaround?

I'm attempting to use the v2-beta1 DevTools while developing a Chrome extension (more specifically, a content script that's injected into another page and displays a side widget/component).

It works great on a normal website that uses React (standard use case), but doesn't show up as a tab when React is injected into the page after-the-fact. I haven't tried the above shim yet, but it looks like that too has issues.

[jaredly]

We have a potential solution in the works, but nothing ready yet :/ hopefully soon

[dsimmons]

Ah, bummer.

Well, in any situation, just wanted to get another "valid" user story on your radar! The new version looks killer and it'd definitely make my life a lot easier :smile:

[numaanashraf]

Any updates on this?

[ladas-larry]

For me it's not working even when inspecting a popup window in chrome extension.

[ngyikp]

Hey guys, I use React on a Chrome extension too, and after many frustrating hours of unable to debug my React state, I finally dug into the codebase and got it working for both Chrome apps/extensions :)

Unfortunately, it does not work out-of-the-box, the main problem is that extensions cannot inject content scripts to other extensions, so my solution is just simply inject the content script by myself.

Another issue is that extension popup pages don't have a tabId that the React Dev Tools use to uniquely identify different web pages opened at the same time, so I create my own unique identifier using the system clock. (Math.random() seems to bring some weird floating-point trouble, so I took the path of least resistance)

Finally, I ensure the devtools background page listen by onConnectExternal and make the content script connect externally.

The proof-of-concept code, might not be pretty! https://github.com/ngyikp/react-devtools/tree/chromeextension (check the commit descriptions for implementation info)

Screenshots:

Also working with Facebook Pixel Helper after my manual patching:

So what's remaining is:

• Tidy up the code a bit and possibly fix the TODOs
• Better implementation instructions, though once this code is pushed live to the Chrome Web Store, all you got to do is copy a helper file and put a <script> tag, yay

[dsimmons]

Excellent investigative work @ngyikp! I hadn't had time to do the same myself.

Are you of the opinion that it could ever be incorporated in a more abstract/general way to react-devtools?! Or do you think that it'll always be somewhat of a hack on a case-by-case basis?

[wenzowski]

Injection script, as suggested by @ngyikp is how redux devtools accomplish this as well.

[msudgh]

Are you sure checked Allow access to file URLs option of React Developer Tools like the bellow picture?
i had your problem but when i checked that option, React tab appeared

[lebe-dev]

checked, but it doesn't helping

[maks]

@jaredly is it possible to reopen this? as it turns out #440 does not fix this specific issue.

[connieelee]

I don't believe this problem is actually resolved. A lot of other issues point to this thread but there's nothing here that actually even suggests a workaround or alternative. So here, thought I'd mention that there is a standalone version of the devtools that works with react-dom.

Including the localhost script will cause an error due to some content security policy. Adding "content_security_policy": "script-src 'self' http://localhost:8097; object-src 'self'" in manifest.json fixes this issue. Reference this document for more information.

[Kondax]

This is still an issue.