css - How to really isolate stylesheets in the Google Chrome extension? -


i wrote google chrome extension, popups dialog autocomplete field , it's own style, there of sites css become totally broken doesn't nice.

i know isolating styles iframes, in google chrome extension there no way isolate html , css in way. method wrap stuff in separated div it's own id , relative styles id, , so, seems doesn't work on sites hard tags style overloading or "!important" directives in css code.

so want know there way isolate styles in convenient way or it's bad carma overload every little css property fix 1 or style bug on each site?

by way: set manifest load things @ "document_end", see not applied stylesheets everytime loaded before dom ready.

at time of asking question, option either use iframes, or stylesheets high specificity , explicitly set properties might affect styles. last method cumbersome, because there property overlooked you. consequently, usable method isolating stylesheets use iframes.

the solution problem -isolation of styles without iframes- shadow dom (since chrome 25). can find tutorial @ html5 rocks. real-world chrome extension uses shadow dom isolate styles, see display #anchors (source code here).


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -