如何真正隔离Google Chrome扩展程序中的样式表？ [英] How to really isolate stylesheets in the Google Chrome extension?

问题描述

我写了google chrome扩展，弹出对话框与自动完成字段和自己的风格，但有一些网站，我的CSS完全折断，看起来不是很好。

I wrote google chrome extension, which popups dialog with autocomplete field and it's own style, but there is some of sites where my CSS become totally broken which doesn't look very nice.

我知道使用iFrames隔离样式，但在Google Chrome扩展中，没有办法以这种方式隔离我的HTML和CSS。另一种方法是将所有我的东西包装在分离的div，它有自己的id和相关的样式为id，我这样做，但似乎不工作在一些网站的硬标签样式重载或！important指令CSS代码。

I know about isolating styles with iFrames, but in Google Chrome extension there is no way to isolate my HTML and CSS in this way. Another method is to wrap all my stuff in the separated div with it's own id and relative styles for that id, and I do so, but it seems doesn't work on some sites with hard tags style overloading or "!important" directives in the CSS code.

所以我想知道是否有一些方式真正地隔离我的风格在方便的方式，或者是我的坏carma重载每一个小的CSS属性来修复一个或每个网站上的其他样式错误？

So I want to know is there some way to really isolate my styles in convenient way or it's my bad carma to overload every little CSS property to fix one or another style bug on each site?

顺便说一下：我设置我的清单加载所有的东西在document_end，但我看到它不适用于

By the way: I set up my manifest to load all things at the "document_end", but I see it does not applied to the stylesheets which is everytime loaded before any DOM is ready.

推荐答案

在提出问题的时候，你唯一的选择是使用iframe或具有非常高的特定性的样式表并显式设置所有可能影响样式的属性。最后一个方法非常繁琐，因为总会有一些属性被你忽略。

At the time of asking the question, your only option was to either use iframes, or stylesheets with a very high specificity and explicitly set all properties that might affect styles. The last method is very cumbersome, because there will always be some property that is overlooked by you. Consequently, the only usable method for isolating stylesheets was to use iframes.

这个问题的解决方案 - 不使用iframe的样式的隔离 - Shadow DOM （，因为Chrome 25 ）。您可以在 HTML5 Rocks 上找到教程。对于使用Shadow DOM隔离样式的实际Chrome扩展程序，请参见显示#Anchors （ 此处的源代码）。

The solution to this problem -isolation of styles without iframes- is Shadow DOM (since Chrome 25). You can find a tutorial at HTML5 Rocks. For a real-world Chrome extension that uses Shadow DOM to isolate styles, see Display #Anchors (source code here).

这篇关于如何真正隔离Google Chrome扩展程序中的样式表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！