Code isolation

[hexwit]

Hello!

I have a goal: show modal window (with some custom logic) on any page via browser extension. I click extension button - modal window with business logic injected into the page and displayed its content.

Here I have a potential problem: how to isolate JS logic to avoid any interfering with other code on the page?
For example I am using preact, and page has also uses preact and some state. In regular case I am in trouble.
That is why I need to find a way how to isolate my code.

I investigated following:

• iframe: gives what I need but pretty slow, and I see lags. bad ux.
• web components - as I know allows only shadow dom that can hide cssm but not js.

I heard that ES6 modules can help me somehow, but TBH I didn't understood how.

Do preact offers some way, how to build an isolated module/micro-frontend to avoid any possible clashes with
code end libraries on the page.

[JoviDeCroock]

As long as that bundle leverages its own individual instance of Preact it will be isolated, so inlining it into the relevant module should do the trick

[hexwit]

If you mean code in the extension - then yes, there is no such problem. Problem begins when I inject JS into currently open page. And here any JS acts as usually, having access everywhere. So the question was not about extension, but about injected code.
It is similar to micro-frontend pattern if I understand correctly, but code isolation problem still actual.

[JoviDeCroock]

Same concepts apply, it's JS so if the code is inlined into the injected code you won't suffer from this. Generally applications that are deployed after bundling will use their own inlined equivalent, the issue you are describing would only become apparent if both the host as well as the injected application would use ESM-imports as the module-cache would make you share said instance.

[marvinhagemeister]

Like @JoviDeCroock said, just inject your code and prebundle it so that all your JS lives is wrapped in a closure. Most bundlers will do that automatically. That way all the globals of your code and all its dependencies are scoped to the closure with the exception of window and document. Our devtools extension does this exact thing to render the overlay when you highlight a component.

If you want even more isolation you can always opt for an iframe.

[ForsakenHarmony]

I think there might be a misunderstanding about "global" state here.

preact does not add anything to the window or document object like e.g. jQuery would.
The "global" state is all within the library code itself and does not leak into the page.

[hexwit]

Thank you very much for all your answers. That helped me a lot!