javascript - 删除 Chrome 扩展程序生成的内容的格式

Question

什么是从我的 Chrome 扩展中动态生成的内容的网站样式表中删除任何格式的简短、快速且有效的方法？

例如，如果我在我的 chrome 扩展程序中使用下面的代码生成一个 div，该网站的样式表可能会格式化该 div，使其比我想要的更长，或者具有比需要更多的填充，或者具有圆 Angular 。我该如何防止这种情况发生？

foo = $("<div/>",{
        "class" : "some class",
        "css" : {
            "background" : "#000",
            "height" : "16px",
            "display" : "none",
            "opacity" : "0.7",
            "position" : "absolute",
            "pointer-events": "none",
            "z-index": "99999"
        }
    }).appendTo("body");

Answer 1

这个问题实际上与 Chrome 扩展没有任何关系；您在扩展的上下文中遇到它的可能性要高一点，因为您不知道要将元素插入到哪种页面中。假设您正在构建某种类型的 JavaScript 小部件，将新社交网络的按钮插入到内容提供商的页面中。这是一个等价的问题，但您会同意该问题现在是一个纯 HTML/CSS 问题。

首先，选择可能不同的类名和元素 ID。这个问题没有完美的解决方案，但您可以选择其他人不太可能使用的名称，例如 yourdomain-main、yourdomain-header 等。

其次，使用“reset-CSS”样式表。 Here是网络上的一百万个例子之一。您担心的“可能格式化 div”部分在很大程度上已通过在此样式表中明确设置预期格式来解决，为“可能”留下很小的空间，因为您已经重置了您关心的每个属性。

第三，在您所依赖的样式中要非常明确。例如，不要期望您的 div 扩展以填充它可以填充的任何空间，而是在特定数量的像素中设置特定宽度。由于上面的唯一性步骤，您可能是大多数样式的最后一个样式表，但如果有什么很重要，请不要忘记 !important .

最后，为您的小部件收集一组敌对环境很有帮助，也许是它们的 iframe 副本，这样您就可以在一个页面上看到它们，并在开发过程中经常测试。

说到 iframe，许多社交按钮确实使用 iframe 来获得更加孤立的环境。在这些情况下，您会失去与嵌入器的一些交互性；这是一种权衡。