React-devtools: Chrome extension icon should activate on sites using React

[ogawa0071]

"react-devtools" Chrome Extension icon is unresponsive even on a site using React.
Why it turn on colorful icon and, Inform the page show up react tab in Chrome Developer Tools?
I think it update makes even better extension.

Vue.js Chrome Extension icon is responsive.

[gaearon]

Would you like to contribute this? It must be some new API Chrome added.

[thisizkp]

Does any started working on this? I want to pick this up.
Never did much of open-source contribution, would love to contribute back. :-)

[gaearon]

@kp25 Feel free to go ahead!

[ogawa0071]

@gaearon @kp25
Sorry to late response. I pointed out, but I have no time to tackle.
I appreciate @kp25 seems to be working on it. Thank you very match!

[thisizkp]

@ogawa0071 @gaearon haven't started yet; will be picking it up this weekend. Will ping you guys if any help needed.

[thisizkp]

@gaearon found the fix for that, but I need new icon files that need to be showed when it is active; Would be helpful if someone can help me out with that. :-)

[gaearon]

Hmm, shouldn't it just use our existing icon? It's green in the repository, so I assume it's Chrome painting it gray by default. There's probably some API to switch it back to colorful when the extension is active.

[gaearon]

Our existing icons are here: https://github.com/facebook/react-devtools/tree/master/shells/chrome/icons

[thisizkp]

@gaearon If we just gray it out, a user can't interact with the extension icon, right?

Looking at https://github.com/vuejs/vue-devtools extension, they are using two sets of icons
default - grayed out ones
active - colored version

By clicking on default icon they are showing a message popup saying that "vue.js not detected". This feature is implemented using "browser action" rather than "page action"; Checked the docs, it suggests to use "browser action".

Please take a look at the following and let me know which direction should we proceed.

[gaearon]

I think we should do the same. 👍
The extension was written a long time ago so it's likely best practices changed.
I like what Vue is doing.

[thisizkp]

@gaearon cool. Can you ask someone to help me out with the new set of icons, all I need is two sets of icons - default & active one.

[gaearon]

Can you use Preview.app or similar to make a grayscale icon?

[thisizkp]

I have no idea about that, but it's okay.
I'll take a look at that and will do. Thanks for the pointer. 👍

[deecewan]

@kp25 here are some greyscale icons if you want them. Just using Preview.app to turn the saturation down to 0.

[thisizkp]

Status Update: Not that straight forward, there is a bit of digging into docs and reading more about chrome 'browser_action' API. Need some more time :)

[thisizkp]

@gaearon How do I debug Chrome extension code?
Right Click on Chrome extension, Inspect Pop-up is disabled? Tried setting up a debugger in the code, but the execution isn't being paused.

[thisizkp]

one more query, Is it okay to use https://facebook.github.io/react/docs/test-utils.html#iselement to test if a particular element is a react element (or) Is there any shorter/good way to do that?

I want to run a script on a page, and quickly tell if it contains react element or not. Based on that, will send message to chrome runtime and show the necessary icon.

[gaearon]

How do I debug Chrome extension code?

I think you need to expand DevTools into their own window (there's a way to do it), and then press Cmd+Shift+I again.

one more query, Is it okay to use https://facebook.github.io/react/docs/test-utils.html#iselement to test if a particular element is a react element

No, this won’t help you. DOM elements and React elements are very different things.

I think you should look at __REACT_DEVTOOLS_GLOBAL_HOOK__. There's some events firing on it when a React page attaches to DevTools. Maybe the event is called renderer-attached: you can search the codebase for it.

[gaearon]

Do you have any progress on this?

[thisizkp]

@gaearon sorry for not responding back. Had an accident last week, didn't have enough time to work on this, will pick it up again.

Is this urgent issue?

[deecewan]

i'll take a look later tonight/tomorrow if you can't get to it @kp25

[thisizkp]

@deecewan @gaearon Have anyone else started working? If not, I'll continue on this.

[gaearon]

@kp25 Any progress so far? I want to get a fix out in the next version so if you don’t have something working yet, I might jump on it myself.

[gaearon]

(Sorry I didn’t reply to your earlier comment. All discussion happens in the thread, so if nobody commented then nobody’s working on it.)

[thisizkp]

@gaearon I tried playing around with it, but no progress so far. Having a hard time trying to understand the whole flow; Is it possible to pair with you when you're building this feature?

[gaearon]

Not sure how that would work. We’re in a bit of a hurry here so I’ll probably look at how Vue does it and try to replicate on Monday.

[thisizkp]

cool, I'll look at the PR.

[gaearon]

This was fixed in https://github.com/facebook/react-devtools/pull/642.
Yay!