Question

我正在撰写Chrome扩展程序，将HTML注入所显示的页面。我希望注入的HTML具有自己的风格，不受主机页面中可能存在的CSS的影响。

我尝试使用传统的CSS，但仍然遭受主机页面的样式损坏。

在观看I / O 15的Polymer演示后，我想知道是否有任何新的Chrome特定技术可以用来实现这一目标？

Answer 1

您希望了解的是shadow-dom。这将使您能够创建一个小部件/组件（这将是您注入的HTML）。这意味着窗口小部件/组件的DOM树被封装，页面中没有外部样式会影响它。有一篇关于html5rocks的好文章。您可能还想查看WebComponents。请记住，此功能仅适用于最新的浏览器版本。

Answer 2

我目前在工作地点使用的两件事是：

我在工作中使用react，因此是react-css-modules，但css-modules应该适用于你的情况。它不是特定于Chrome的，但我们会在我们构建的每个组件的上下文中使用它们。基本上，就像文档状态一样，row类会变成类似table__row___2w27N的类。内置名称的细分是CSS的文件名，而不是类名，后跟一个5字符的base64哈希值。我希望这会有所帮助。

一个潜在的缺点是需要 Webpack 。

以下是我们的组件文件夹结构示例：

- component
  - Component.jsx/js
  - component.css/scss/sass
  - component.test.js

是否有任何特定于Chrome的技术来定位/隔离CSS？

2 个答案: