Chrome Extension Trick to Isolate CSS
Did you know that you can use Iframes to isolate your chrome extension styles?
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