隔离Chrome扩展程序的CSS

Question

我正在构建一个Chrome扩展程序,使用内容脚本执行一些UI注入.问题在于,由于每个网站都不同,可能会尝试使用某些元素(div,列表)等的默认定位,我的ui看起来会有所不同,具体取决于它所使用的页面.

我已经尝试过使用YUI重置v3,这有所帮助,但没有消除所有的怪异.有没有人知道一个更积极的重置方法,不仅仅是清除边距/填充和重置文本大小？

提前致谢.

Answer 1

我们遇到了类似的问题,我们已经尝试过CSS重置,并且还为元素和CSS规则使用了特定的id标签,但它从来都不够强大......

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

如果您不熟悉Shadow DOM,这里有一个很好的例子.这可能需要一点上你的最终再保的,但它确实是工作的100%的唯一解决方案.

Answer 2

这就是为什么你应该在 注射document_end。"run_at": "document_end"您可以通过在内容脚本清单中设置来做到这一点