1

So here is the thing, I have an old chrome extension which was developed for an legacy web site is being replaced with a new one.

What the old extension did was to change the click event handlers for certain link types, this has happened when the page has loaded.

Now the website has moved to Angular 8 and the results are not being loaded right away but rather lazy loaded from a server after a certain action by a user, which means that there are simply no links to go over and change when the extension loads.

I have looked through the web and I couldn't find anything relveant. Ideally I would want to listen to a certain event and make the extension do it's thing, or at least be able to identify that the grid of links has loaded and fire the extension code.

Unfortunately, all I found was related to the registering to events when the DOM has loaded, which doesn't help much in my case.

The current code in the extension is super simple, in fact, I suppose it's too simple:

$('a[href^=im:]').
 live('click', handleMouseClickOnLink)

Anyone has any suggestions?

wOxxOm
  • 65,848
  • 11
  • 132
  • 136
MichaelEr
  • 75
  • 2
  • 8
  • So do you have control over the new Angular 8 app? – MikeOne Mar 15 '20 at 21:43
  • You can use MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver to watch for changes in the DOM – Gergely Szabo Mar 15 '20 at 21:45
  • @MikeOne, Yes, I do, I am developing both the app and updating the extension – MichaelEr Mar 15 '20 at 21:46
  • @GergelySzabo I have tried that, unfortuntaly when the extension loads the container of the links is not loaded yet, and will only load upon a click. Thus I am getting an error when the extension loads: `Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.` – MichaelEr Mar 15 '20 at 21:57
  • @MichaelEr You could just try selecting the element periodically and only add the observer once it's there. What is your use case btw? Why do you have to change the links externally if you control the site? – Gergely Szabo Mar 16 '20 at 00:28
  • 1
    AFAICT this is covered in [this answer](https://stackoverflow.com/a/39508954). – wOxxOm Mar 16 '20 at 04:28
  • 1
    Why not have the angular app emit a custom event on a top element (body? Html) once it has the elements you need available in de DOM? The extension can just listen to that event and do its thing? – MikeOne Mar 16 '20 at 13:11
  • @GergelySzabo The links are generated during the application runtime – MichaelEr Mar 16 '20 at 19:17

1 Answers1

0

I have used the recommendation used by @MikeOne and indeed emit an event from the application and catch it in the extension. I have used this answer as the base: https://stackoverflow.com/a/14815553/4155127

MichaelEr
  • 75
  • 2
  • 8