如何真正隔离 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.

这个问题的解决方案 - 没有 iframes 的样式隔离 - 是 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屋！