How to build augmented reality for Single Page Application using browser extension?
- 1. Boris Mossounov facebook.com/mossounov linkedin.com/in/borismossounov anotherguru.me How to build augmented reality for Single Page Application using browser extension?
- 2. Boris Mossounov facebook.com/mossounov linkedin.com/in/borismossounov anotherguru.me How to build augmented reality for Single Page Application using browser extension? orsetInterval MutationObserver
- 3. Pain: Content Script & Styles are embedded and augment webpage only once when page is loaded. In Single Page Applications webpage changes without reload. You gotta pick optimal mechanism for page augmentation timing.
- 4. Option 1. window.setInterval() t Meanwhile in inactive tabs…
- 5. Option 1. window.setInterval() The more tabs the more overhead. You’ve got overhead regardless whether the user is busy or idle. The lesser timeout the more overhead. The longer timeout the more noticeable is the augmentation lag.
- 6. Option 2. MutationObserver t in theory: in reality: meanwhile in other tabs: but in some tabs:
- 7. DOM tree modifications happen in bulk usually. Sometimes in cycle. The overhead does not depend on the number of open tabs. Somewhere in Single Page Application interval triggered DOM tree modifications can occur. DOM tree modification callback can produce another DOM tree modification. You can end up in endless loop. Option 2. MutationObserver
- 10. Option 3. MutationObserver + setTimeout t meanwhile in other tabs: but somewhere: 200 ms 200 ms 200 ms 200 ms 200 ms 200 ms 200 ms 200 ms 200 ms 200 ms 200 ms 200 ms 200 ms
- 11. DOM tree modification callback is fired after a bunch of modifications. Inactive tabs do not produce overhead. It takes some effort and smarts to implement this mechanism carefully without endless loops. Option 3. MutationObserver + setTimeout
- 12. Questions?