Listener that fires when DOM content changes in modern web apps

[Graham Billington]

Hi all,

Recently I've noticed a bug in my chrome extension that only occurs on modern web apps that are using React or NextJS (or others of that nature). Essentially, I have a chrome extension that makes modifications to the DOM once the page has loaded. Initially on load, the modifications happen on these modern apps, but if I navigate to another page on that site, the modifications don't happen. This is because in these modern apps, the page never actually reloads, but rather updates the content for a better UX. My question is if anyone knows of an event listener that I can add to my service worker that will fire when one of these updates happens, so I can tell my extension to behave like it would on a page load. 

Please let me know if any more clarification is needed. Any help is appreciated!

Best,
Graham

[Simeon Vincent]

Hey Graham, I responded to your question on Stack Overflow a little bit ago. The short answer is that the extension platform itself doesn't provide a way to monitor soft navigations, but you have a couple other tools at your disposal: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver and History interception

Simeon - @dotproto

[hrg...@gmail.com]

The chrome.tabs.onUpdated event fires whenever a tab's URL changes even if there's not a new document being loaded.

For example, the event will fire when you click on an anchor link (which only changes the scroll position of the page) or if a page calls History.pushState().