google-chrome-extension - 为 Chrome 扩展隔离 CSS

Question

我正在构建一个 Chrome 扩展，它使用内容脚本进行一些 UI 注入(inject)。问题是，由于每个网站都是不同的，并且可能会尝试使用某些元素(div、列表)等的默认定位，因此我的 ui 看起来会根据所使用的页面而有所不同。

我尝试过使用 YUI reset v3，这有所帮助，但并没有消除所有的怪异之处。有没有人知道一种更激进的重置方法，它不仅仅是清除边距/填充和重置文本大小？

提前致谢。

Answer 1

我们也遇到过类似的问题，我们尝试过 CSS 重置，并为元素和 CSS 规则使用特定的 id 标签，但它从来都不够健壮......

最好的解决方案是将元素作为 注入(inject)到 DOM 中。影子 DOM 元素 包含内联样式。您可以通过 AJAX 请求读取您的 CSS 文件并将它们动态注入(inject)到 Shadow DOM，只需确保它们位于 web_accessible_resources 文件中(您可以在 CSS 文件夹中使用通配符)。

如果你不熟悉 Shadow DOM，here is它是如何工作的一个很好的例子。可能需要 有点 重新考虑您的最终因素，但它确实是唯一一个 100% 有效的解决方案。