Chrome Extension Trick to Isolate CSS

Did you know that you can use Iframes to isolate your chrome extension styles?

Video

Did you know that you can use Iframes to isolate your chrome extension styles? Every website has a unique set of css rules

Every website has a unique set of css rules

Browser plugins often inject html into other pages on the web

We want our plugins to have a unique look and feel everywhere

Here is what happens when you inject html directly

Our extension looks different everywhere.

Multiple websites display unprotected code however they want

But If we hide our user interface inside an iframe

The css for those components will be isolated by default

And now our app looks consistent to our brand identity

You can also use shadow DOM as an alternative to iframes for style isolation

If your specific use case is more complex