Boris Mossounovfacebook.com/mossounov

linkedin.com/in/borismossounovanotherguru.me

How to build augmented reality for Single Page Applicationusing browser extension?

Boris Mossounovfacebook.com/mossounov

linkedin.com/in/borismossounovanotherguru.me

How to build augmented reality for Single Page Applicationusing browser extension?

orsetInterval MutationObserver

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.

Option 1. window.setInterval()

tMeanwhile in inactive tabs…

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.

Option 2. MutationObserver

t

in theory:

in reality:

meanwhile in other tabs:

but in some tabs:

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

setInterval MutationObserver

setTimeout &MutationObserver

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

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

Questions?