infy-scroll icon indicating copy to clipboard operation
infy-scroll copied to clipboard

Published 20 hours ago • verified publisher icon sixcious

Not activating on AJAX/SPA Websites that adjust their content dynamically (e.g. Github Issues/PRs pages)

Open alexolog opened this issue 2 years ago • 3 comments

Describe the bug

  1. Go to https://github.com/sixcious/infy-scroll/issues?q=is%3Aissue
  2. Scroll down to see the extension working
  3. click in Filters textbox, add a space at the end of the query string, and hit ENTER
  4. Scroll down to see the extension NOT working
  5. Refresh the page ( url changes to https://github.com/sixcious/infy-scroll/issues?q=is%3Aissue+ ) and it works again.

Website https://github.com/sixcious/infy-scroll/issues?q=is%3Aissue

Environment Please fill out as much as you can about your environment.

  • Device: PC
  • OS: Windows 10
  • Browser: FF
  • Browser Version: 105.0b9
  • Extension Version: 0.7

alexolog avatar Sep 23 '22 14:09 alexolog

Hi again Alex,

So, basically Infy doesn't auto-activate itself on websites that use AJAX and SPA (Single Page Application) techniques to adjust their page content dynamically. This is due to the default way the Browser API allows extensions to activate themselves, which is typically only done when the page is first loaded. It is technically possible to watch for DOM changes, but it comes at a performance cost of doing something on each and every page load, like adding a mutation observer, or adding a timeout that checks every few seconds to see if the website has updated itself, or going down a rabbit hole of using extension APIs that deal with web navigation, which is a no-go at this point because it adds a new invasive permission each user would have to accept. I've thought about this issue before and decided it just isn't worth the performance cost to implement. At least for the time being.

I'll go ahead and close this, but feel free to reply if you'd like to. Thanks!

sixcious avatar Sep 24 '22 18:09 sixcious

I'll go ahead and reopen this since it may be something to look at again in the future.

sixcious avatar Sep 24 '22 18:09 sixcious

but it comes at a performance cost of doing something on each and every page load, like adding a mutation observer

Hmmm... The mutation observer approach sounds interesting. What if it is only done when opening pages that match the pattern for which such option is specified? Sort of an advanced rule option.

alexolog avatar Sep 24 '22 20:09 alexolog

I came here for the same issue. There are many websites that use pagination buttons and then lazy-load content into each page. It would be a great feature, but I can understand if @sixcious thinks it doesn't justify the additional complexity.

evoyy avatar Feb 16 '23 13:02 evoyy

Hi @evoyy!

Sorry this isn't yet in Infy publicly, but there's a really new Browser API called Navigation that can now detect browser navigations. It was designed especially to handle SPAs, which is our use case here. I've added Navigation to my local development build of Infy and it seems to work really well on GitHub and other SPAs. Sadly, it's only for Chrome/Edge 102+. Firefox doesn't currently support it.

If anyone would like to preview Version 0.8 with the new Navigation API, I've uploaded my local build to GitHub. Instructions here.

So, to recap, there'll be two new ways to handle SPAs in Version 0.8:

  1. Navigation API will be on by default for Chrome/Edge users
  2. MutationObserver option available in the UI Window for all users (as Alex suggested)

I think (hope!) this will strike a great balance to solving this issue. Navigation by default since it's a low-cost listener, and MutationObserver for the rare site you need it on, or if on Firefox.

sixcious avatar Feb 17 '23 03:02 sixcious

@sixcious Amazing news, thanks. I will give this a try later today. The website I was struggling with is Flickr, so I will see if it works now.

evoyy avatar Feb 17 '23 09:02 evoyy

@sixcious I installed v0.8 and I'm happy to report that it works great! (Flickr with Element Iframe Mode). Thanks so much for this, Infy is awesome and you are a legend! ❤️

evoyy avatar Feb 17 '23 14:02 evoyy

Hi,

This feature has been added in Version 8. The Navigation API is turned on by default in Options > Extra and is supported for Chrome/Edge 102+ to detect browser navigation events automatically. For Firefox and other use-cases, there is also now a "Late Activation" (MutationObserver) setting under the Scripts dialog in the UI Window that can be turned on manually. So, if you're on Firefox and using GitHub, you can save the URL with that setting checked on. (Chrome/Edge users won't need to do this for GitHub because it will work using the Navigation API.)

Thanks for opening this issue. 💜

sixcious avatar Jun 18 '23 21:06 sixcious