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

问题描述

我编写了一个 Google Chrome 扩展程序，它会弹出一个带有自动完成字段的对话框，它有自己的风格，但是在某些网站上我的 CSS 完全被破坏了，看起来不太好.

I wrote a Google Chrome extension, which popups a dialog with an autocomplete field and it's own style, but there are some sites where my CSS gets totally broken, which doesn't look very nice.

我知道使用 iFrame 隔离样式，但在 Google Chrome 扩展程序中，无法以这种方式隔离我的 HTML 和 CSS.另一种方法是将我所有的东西包装到一个单独的 div 中，并使用它自己的 id 和该 id 的相关样式，我这样做了，但它似乎不适用于某些具有硬"标签样式重载或！重要的"指令在 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 into a separated div with it's own id and relative styles for that id, and I do so, but it seems that it doesn't work on some sites with "hard" tags style overloading or "!important" directives in the CSS code.

所以，我想知道有没有什么方法可以真正以方便的方式隔离我的样式，或者重载每个小的 CSS 属性来修复每个站点的一个或另一个样式问题是我的坏事?

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

顺便说一句:我将清单设置为在document_end"加载所有内容，但我发现它并没有应用于样式表，而样式表每次都在 DOM 准备好时加载.

By the way: I set up my manifest to load all the things at the "document_end", but I see it's not being applied to the stylesheets which is every time loaded whenever the DOM is ready.

推荐答案

在问这个问题的时候，你唯一的选择是要么使用 iframe，要么使用具有很高 specificity 并明确设置所有可能影响样式的属性.最后一种方法很麻烦，因为总会有一些属性被你忽略.因此，隔离样式表的唯一可用方法是使用 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 扩展程序，请参阅 Display #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屋！