Chrome Extension Wrapper

[taylorhakes]

I have started work on a Chrome extension wrapper for redux-devtools. I wanted to create this issue to make sure we don't have multiple people working on it at the same time.

I created it in a folder in this repo, but we could easily move it to another repo after it's finished.

WIP:
https://github.com/taylorhakes/redux-devtools

[tomatau]

👍 nice

[gaearon]

Awesome! Keep us posted!

[chrisdwheatley]

Wondering if you've got anywhere with this @taylorhakes. This was the implementation I immediately thought of after getting redux-devtools up and running. Would love to help out any way possible.

[taylorhakes]

I am working on it, but it is a little more complicated than I originally thought. Since Chrome extensions can only communicate through postMessage and can't get a reference to the store, I have to reimplement the store for the dev tool.

I have to sync the state and send actions between the 2 stores. I will post my updated code tonight and maybe we can come up with a better way to do it.

[gaearon]

This seems similar to “Flux over the wire”, we might have some kind of generic solution for that in the future. reduxjs/redux#264

[taylorhakes]

I have a working version of the Chrome extension here.

https://github.com/taylorhakes/redux-devtools/tree/chrome-devtools/chrome

It uses the same components as the inline devtools. In addition to installing the Chrome extension you need to expose the redux store to the window object .

window.__redux__ = store

(2 underscores)

Please report back any issues. Once it becomes stable we can add it to the Chrome store.

[taylorhakes]

@gaearon It would great if users could get the Chrome extension working without any code change. Preferably it would like it work similar to how the React chrome extension just works out of the box. No need to mixin/compose components or remember to expose objects (React does that for you).

I am suggesting changing the API for devtools to make this happen. The major one being moving devtools state into a separate store.

const finalCreateStore = compose(
  applyMiddleware(thunk),

  // get rid of this
  devTools(),
  persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/)), 

  createStore
);

It would allow the devtools state to live remotely and chrome extension dev tool to work without any code changes.

I am sure you understand the best way to make this happen, but I assume it may require some changes to the public Store api. I haven't dug that deep into it yet. What do you think?

[gaearon]

Great job. I'll take a look at it after releasing Redux 1.0.
Does it work with hot reloading reducers?

[taylorhakes]

Yes it works with hot reloading!

The extension is pretty simple. It injects code to listen to the store via store.subscribe and then just sends devtools actions to the store via store.dispatch.

[chrisdwheatley]

awesome work @taylorhakes 👍, will be trying this out tonight!

[philholden]

Great work. Is it possible to hook into Chrome dev tools way of logging expandable objects? My state object is a table with hundreds of rows so I need to scroll a long way to get back to previous actions.

[taylorhakes]

The Chrome extension is using the same components as the inline devtools (LogMonitor). Expand/Collapse functionality would be a great addition, but it is not as simple as calling a function or switching a boolean.

[kevinold]

Hi, just wondering what the status is of using this with Redux 2? Also will this be merged and supported into redux-devtools official repo?

[taylorhakes]

I think the Chrome extension belongs in user land. @gaearon might feel differently, I am not sure. I will port the Chrome extension over to Redux 2 in the next couple days.

[gaearon]

I want React DevTools to host our extension; I'm pretty sure there were plans for plugin API there. This is the reason I don't want to spend my time on a standalone extension myself.

[gaearon]

This look fairly outdated, so I'll close this out to avoid confusion.
Maybe we'll get back to doing this officially later when React DevTools has some API for third party plugins.