Cannot use the Ngrx dev tool for ngrx running through a Chrome Extension

[Saliot]

Hello,

I'm developing a Chrome Extension and use ngrx to manage its state.
NgRx devtools works well when I serve the code through "ng serve".
Once I "ng build" the angular code (so it can be further embeded into a Chrome Extension) and launch my extension, then the nrgx-devtool does not diplay anything.

It is like the store is not connected.

Would you have any clue on how I could still vizualise my actions & states when the angular app is embedded as a Chrome Extension ?

Thanks

[david-shortman]

For web extensions, you can write both Javascript that runs sandboxed within an extension space, and Javascript that is injected into the tab/window.

You could write a dev-only tab/window script that receives messages from the extension with state changes, which it then reports to the redux dev tools extension.

[david-shortman]

Presumably, you have a popup HTML/JS that uses NgRx that you want to communicate to a content script on the window. I have a repository which has a popup script and a content script which interact through messaging, if that's helpful: https://github.com/david-shortman/clickster

[david-shortman]

In your case, you would add an event listener in your content script like this, and then you would push actions manually to the dev tools.

[david-shortman]

Honestly, this sounds like a neat project that could be open-sourced: a library that allows you to your Angular + NgRx extension to communicate to the dev tools though a provided content script.

[david-shortman]

You may be able to use the Chrome dev tools and see the redux dev tools working correctly by following the advice from this SO thread, too: https://stackoverflow.com/a/5039998/11087018