为Chrome扩展隔离CSS [英] Isolating CSS for Chrome extension

问题描述

我正在构建一个使用内容脚本进行UI注入的Chrome扩展。问题是，由于每个网站都不同，并可能试图与某些元素（divs，列表）等的默认位置搞砸，我的用户界面看起来不同，具体取决于它正在使用的页面。

我尝试过使用YUI reset v3，但这并没有消除所有的怪异现象。有人知道一个更积极的重置方法，不仅仅是清除保证金/填充和重置文本大小吗？

预先感谢。

$ b $我们已经有过类似的问题，我们已经尝试了CSS重置，并且还为元素和CSS规则使用了特定的id标记，但它从来没有稳健足够...

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

如果您不熟悉Shadow DOM，请这里是这是一个很好的例子。这可能需要重新考虑你的目标，但它确实是唯一的解决方案，可以达到100％。

I'm building a Chrome extension that does some UI injection using content scripts. The problem is that since every website is different and may try to screw around with the default positioning of certain elements (divs, lists) etc, my ui looks different depending on which page it is being used.

I've tried using YUI reset v3 and that helped but didn't remove all the weirdness. Does anybody know of an even more aggressive reset method that does more than just clearing margin/padding and reset text sizes?

Thanks in advance.

解决方案

We've had a similar issue, we've tried CSS resets and also using specific id tags for the elements and CSS rules, but it was never robust enough...

The best solution was to inject the elements into the DOM as Shadow DOM elements that contain the style inline. You can read your CSS file via AJAX requests and inject them to the Shadow DOM dynamically, just make sure that they are within the web_accessible_resources files (you can use a wildcard to your CSS folder).

In case that you are not familiar with Shadow DOM, here is a good example of how it works. It might take a bit of re-factoring on your end, but it's really the only solution that works a 100%.

这篇关于为Chrome扩展隔离CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！