Question

我目前正在开发一个Safari扩展，它使用注入的脚本进一步将一些HTML注入当前网页，并注入一些其他脚本以使其工作。这一切都运行正常，但问题是注入的HTML会受到网页已导入的CSS样式表的影响。例如，HTML在Google.com上看起来很完美（它的CSS样式相对较少），但在StackOverflow.com（样式按钮等）上却很糟糕。

在显示此HTML时，jQuery被注入到网页中，所以我可以使用它。我尝试了各种各样的事情，包括遍历所有元素并在每个元素上调用removeClass()，但都无济于事。我还试图添加“CSS重置”类等，但似乎没有任何工作。

防止CSS干扰我的HTML的最佳方法是什么？

Answer 1

你不能阻止这种情况发生。但是，您可以覆盖CSS规则。给你的主元素一个唯一的id（通过obfustation真的应该是唯一的，比如“yourapplicationname_mainelement_name”或者什么），然后覆盖所有可能给你的html带来奇怪效果的样式。

你的插件：

<div id="yourapplicationname_mainelement_name">
  <p>My paragraph that must not be styled</p>
</div>

你的css：

#yourapplicationname_mainelement_name p {
  display: block;
  color: black;
  background: white;
  position: relative;
  ... and so on ...
}

由于您的css样式规则是最具体的，根据您的ID，它们将覆盖注入html的页面上的任何设置。

此外......可能很难看出哪些规则是最重要的。你可以使用firebug或类似的东西来理解哪一个覆盖了另一个。在开发应用程序时，你将很难没有它。

Answer 2

这是一个艰难的。我看到两个选项。您可以围绕所有内容设置包装div，并为此设置所有css的前缀。例如：

<body>
  <div class='wrappingDiv'>
     ...
  </div>
</body>

样式表：

.wrappingDiv * {}

然后，当您注入jquery时，使用它来关闭内容之前的初始包装div，并将任何后续内容包装在另一个包装div中。

的问题：

只有在注射时才有可能其他网站内容自己动手站点。
这可能会变得复杂取决于您注射的位置的HTML。

另一种选择是加载一个重置样式表，专门针对你注入的html。在这种情况下，只有您注入的html会被包装，但您需要一个css文件，在添加自己的样式之前，将所有标记的所有属性重置为默认值。这里没有真正的问题，只是不太优雅......

另一种方法是使用一个不像iframe一样继承样式表的元素，但它有自己的问题...

Answer 3

我在不同的插件上看到他们将代码放在iframe中，并且他们使用JS与页面的其余部分进行交互，因此您无法更改内部的CSS。

我也注意到，当注入html代码时，人们使用标签内的“style”属性设置插件内容的样式，这样浏览器将优先考虑style属性中的css而不是css文件。想法是覆盖css，通常使用“！important”子句。但是你可能在不同的浏览器上遇到一些问题

编辑我忘了说我的答案就是你将代码注入某人的其他页面而你无法直接控制css的情况

如何在注入的HTML片段中防止CSS干扰？

3 个答案: