How to avoid unwanted inherited CSS in a Chrome Extension - Content Script

Hey! In this video we look at how to avoid unwanted inherited CSS issues for Chrome Extension content scripts. This examples uses the shadow root & the "all" css property.

RELATED LINKS:
** Sign up to the above email list for early access to my new course **

VIDEO SUGGESTIONS?

SKILLSHARE:

CHAPTERS:
0:00 Intro
0:28 Docs
0:40 Extension
1:06 Inspect Element
1:46 Example Code
2:54 Shadow Root Example
3:50 Summary

FIND ME ONLINE:

MY MINIMAL SETUP:

[moebazzi]

Dude I hope you don’t take another long break, your chrome extension videos are super helpful, I know it’s hard right now with not so many views but just keep it up and it will pay off.

[PickledCaret]

Yay! Welcome back Rusty! Hope all was well during that break!

[moviekoya]

Please keep your chrome extension tutorials up. Not many cover this on YouTube. Thanks bro

[CilantroSativum]

Hey Rusty, why = color inside content js, works only for some site and not for others, sometime only affect few section of a target page , not working for youtube at all

[tariqplays]

Does this also prevent elements from being targeted directly by element selectors like div or h1, h2 {} ?

[phamducanh]

I see that shadow root will help us to separate CSS of extension and current web page. But there is a problem that when it's not separate the input key in shadow root with event listener on current web page. Ex: I'm using input inside shadow root and press some key that is the current page shortcut (Like Youtube), it will trigger the current page shortcut. Have you ever met this problem and do you have any solution.

[rbOthree]

Curious if you ever considered using iframes as an approach here. If so, what made you pick the shadow dom?