1

I have a react app that I managed to shove into a chrome extension with content_scripts. It's basically an overlay on the page that shows contextually relevant tools based on the route. The problem is that the existing page content links don't cause react-router in my extension to update its history when they are clicked. So when the user changes pages using the actual website links my app doesn't show the right tools. Only when they hit refresh on the proper route.

Is there a way to get react-router to be aware and update it's history when users click links on the existing page content?

DigitalDisaster
  • 467
  • 3
  • 10
  • 25
  • Not sure if `react-router` will server you here. How about listening to url changes? https://stackoverflow.com/questions/34957319/how-to-listen-for-url-change-with-chrome-extension – Or B Oct 29 '17 at 15:08
  • That seems to be fine for uses cases outside of the react-app, but i'm not sure how to use this event listener to instruct react-router within my extension to update. but maybe this is a good direction to explore further – DigitalDisaster Oct 29 '17 at 15:24
  • 1
    You can detect in-page navigations in a background page using chrome.webNavigation.onHistoryStateUpdated and .onReferenceFragmentUpdated, then send a message to your content script app. – wOxxOm Oct 29 '17 at 22:33
  • This looks like it may be the answer. Can you submit this as an answer to the question and when I get a chance to implement it I'll mark it solved if it works? – DigitalDisaster Oct 31 '17 at 12:12

1 Answers1

1

Maybe you could try listening for url changes with the "hashchange" event listener, and then push the url changes to react router with browserHistory.push('/some/path').

Sami El Maameri
  • 349
  • 1
  • 6
  • 12