This is a very interesting project showing the power of MutationObservor. I'm now building something on top of its example PageMirror application.
The motivation here is that I can still see a few differences here and there while mirroring pages. There are several problems I ran into.
- For YouTube videos: no playback streaming correctly. The root cause is nowadays video players make use of Media Source Extension APIs, which first creates a MediaSource object in JS, and then appends video segments to this object to be picked up directly by HTML Video elements to play. This way we beyond DOM, we need to persist and somehow pass these objects to the mirrored page to play the videos normally.
- For websites w/ complex iframes: they use iframes, so the inability to handle nested iframes throws bugs. However, given the underlying mutation records have the changes on file, I think I can simply create more TreeMirror/TreeMirrorClient instances to recursively process all iframes. Not sure though if the same-domain policy would allow this manipulation or not. Google Drive/Mail sites fall into this category.
- For websites with complex CSSs: this is, in fact, the most mysterious case I've encountered. For example, GitHub.com is not displaying correctly as all the tiny icons alongside the buttons (like the eye icon next to the "Watch" button) missing. What is the root cause here? I've compared both DOMs and see no diffs there that are significant enough in my understanding (e.g. viewbox vs viewBox).
Moreover, I can see an additional "injected stylesheet" (75% zoom-in?) in the DevTools that seems to part of the extension. Where does this come from? I cannot seem to locate any associated CSS brought by the extension.
Towards a better page mirror application, is there anything more I can work on? Would be really happy to hear from the developers themselves :).