Question

我正在开发一个项目，在我无法控制的网页上注入JS + CSS + HTML。

我担心主机页面样式化我注入的代码 - 我希望我注入的代码只服从我的样式，而不是他们的样式。

目前唯一可以做到这一点的方法是，我可以想到明确指定容器<div>的每个可能的标记（使用预定义的，已知的浏览器默认值）并依赖于这些规则的继承传播到我注入的HTML的其余部分。此CSS需要显示在页面<head>标记的底部。

我认为这不是最佳解决方案，我不期待实施它。当然有更好的方法。

Answer 1

其他人提出了很好的方法来防止你的CSS影响页面，并确保你的CSS优先，但你似乎最关心的是页面的CSS影响你 - 也就是说，添加一个时髦，意想不到的风格（比如让所有div都有粉红色的背景）。

我能想到的唯一方法是阻止他们的样式影响你注入的代码，这样你就可以将你注入的内容沙盒化，就像在iframe中一样。否则你需要定义的东西太多了 - 你必须定义每一种风格（padding，border，margin，background ......列表继续在“*”选择器上（或者更好，“#yourid *”，所以你只需覆盖自己的内容），这样你就可以保证对CSS的绝对控制

编辑：我意识到如果您使用全向选择器将所有内容重置为基线，后一种解决方案不一定会太痛苦：

#myid * {
    somestyle1: default;
    somestyle2: default;
    ... 
}

我找到了someone who has written up such a solution。如果你在页面上向下滚动足够远，你会看到它（来自SuzyUK）。它看起来并不完整，但肯定是一个好的开始。

（我也有兴趣知道是否有一种防止这种情况的好方法。我在编写Greasemonkey脚本之前将代码注入页面，并且必须编写CSS来覆盖页面的CSS，但是这些案例我知道我的目标是谁，可以直接在页面上定制我的CSS。）

Answer 2

将注入的HTML用特定分类的<div>包裹，例如

<div class="my-super-specialized-unique-wrapper"><!--contents--></div>

然后在您的CSS中，使用.my-super-specialized-unique-wrapper为所有规则添加前缀，并在每个规则上使用 !important 。这将指示客户端浏览器将您的规则视为匹配的任何元素的最高要求，无论其他任何可能针对它们的样式 - 即使您控制范围之外的其他规则更具体。

Answer 3

您必须非常specific使用CSS选择器。也就是说，比主页的CSS规则更具体。您可能还希望添加一种全局CSS重置修改为仅重置HTML。通过这种方式，我的意思是将所有颜色，背景，字体，填充等重置为单一标准。从那里你可以建立自己的风格。

Answer 4

为什么不用这样的内联格式注入html元素：

<p style="color:red">This to be injected</p>

内联样式优先于任何其他规则，并且您已经创建了标记以便插入它。

其他解决方案是在元素上使用非常具体的 DOM ID，然后在添加的CSS上设置样式

Answer 5

如果您使用的是Mozilla浏览器，您实际上可以（如果是非法的话）将可见的DOM内容添加到＆lt; html＆gt; ＆lt; body＆gt;之外的元素元件。这将避免任何与正文相匹配且由您的内容继承的样式。有些样式可能会匹配html，这会破坏这种技术，但我发现它很有用。

例如。使用jquery：$（'html'）。append（'＆lt; div id =“mycontent”＆gt; blah blah blah＆lt; / div＆gt;'）;

当您不希望库的实例干扰您正在修改的页面定义的库的使用时，使用流行的库本身就是一个挑战。 Greasemonkey的'@require'对我不起作用。我发现有必要（但可能！）保存由jquery脚本分配的两个或三个全局名称的任何现有值，将我的库实例插入DOM，等待它被加载（必须使用计时器，这很烦人，但我看不到它的方法），在我自己的命名空间中缓存分配给全局变量的值供我自己使用，并恢复保存的值。

Answer 6

我不确定应该如何使用浏览器支持，但这是使用http://www.w3.org/TR/shadow-dom/的主要原因之一

这个想法是你可以插入一个web组件，它可以完全设置样式并且具有仅影响shadow-DOM的特定事件（因此你的模块不会影响页面的其余部分）。

防止现有的CSS样式化注入HTML / CSS

6 个答案: