amitnovick / xstate-devtools

MIT License
102 stars 11 forks source link

xstate-devtools breaks Confluence document page #17

Open MrOrz opened 4 years ago

MrOrz commented 4 years ago

After installing xstate-devtools Google Chrome extension, users can no longer enter any document page in Confluence:

螢幕快照 2020-01-14 下午3 47 58

It seems that Confluence tries to invoke global.__REDUX_DEVTOOLS_EXTENSION__ manually. Invoking global.__REDUX_DEVTOOLS_EXTENSION__ as a function is the documented usage in https://github.com/zalmoxisus/redux-devtools-extension#11-basic-store , but it contradicts with the behavior here: https://github.com/amitnovick/xstate-devtools/blob/6f9dc9cc3463cf8a4a60ec769b65d69fcbbf4206/public/extension/injected/injected.js#L75

amitnovick commented 4 years ago

Thanks for documenting this issue!

Currently the XState integration of this extension piggy-backs on the "Redux DevTools" global namespace window.__REDUX_DEVTOOLS_EXTENSION__ as you've noticed.

I am looking to replace this global namespace to something else, and this has to happen in the XState repo.

This is the issue for progress on that: https://github.com/davidkpiano/xstate/issues/848

kgroat commented 4 years ago

One way to fix this extension breaking pages is to change the line in question to:

if (window.__REDUX_DEVTOOLS_EXTENSION__ ) {
  window.__REDUX_DEVTOOLS_EXTENSION__.connect = __XSTATE_DEVTOOLS_EXTENSION__.connect;
} else {
  window.__REDUX_DEVTOOLS_EXTENSION__ = __XSTATE_DEVTOOLS_EXTENSION__; 
}

This way, if __REDUX_DEVTOOLS_EXTENSION__ is already defined, you simply change the connect function, but keep everything else the same.

amitnovick commented 4 years ago

@kgroat

Could you test to see if the code you suggested solves the issue in the Confluence app? I would like to make sure that it actually does solve it before pushing a potentially breaking change to users. Would've done it myself if I had been using Confluence, and also I'm not sure how to reproduce the error even if I tried the free version that I just saw is available on their homepage.

Glutnix commented 4 years ago

Workaround: Right click the extension, choose "This site can read and change site data" > "When you click the extension".

skoshy commented 4 years ago

@amitnovick This can now be tested on reddit.com (new layout) as well, as the site breaks with the extension enabled. See https://github.com/amitnovick/xstate-devtools/issues/22#issuecomment-640811413