We have page event listeners right? I’m trying to do something similar, I want to catch the images that load into my page, does anyone have a smart way to do this?
I want to try to avoid observers as I just can’t understand how it’s working in e10s so I don’t want to do something bad there. And also the observer technique is only catching non-cached downloads.
What’s wrong with observing { childList: true, subtree: true } on content.document.documentElement and adding listeners to images as they are added to DOM? For e10s you obviously need to do it in a content/frame script.
Ah that’s a good idea. It won’t be too intensive? It will trigger a lot.
MutationObservers were made for this exact purpose. They should (browsers are buggy in some corner cases) trigger as a microtask only after all code has finished on the current stack/task. So multiple mutation records are potentially collected before the observer is called.
Incidentally, there is another inconsistency in Firefox where childList changes are triggered for textContent-only changes, so keep that in mind.
See https://youtu.be/eRZ4pO0gVWw?t=2m9s for the neat stuff you can do with them. The video is courtesy of MutationSummary lib which you might find useful. Although I managed to live without it for the simple case of replacing the deprecated mutationEvents.
Very cool thanks LA!