0

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

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

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");
4

1 回答 1

1

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

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

其次，使用“reset-CSS”样式表。这是网络上一百万个示例中的一个。您担心的“可能格式化 div”部分在很大程度上是通过在此样式表中显式设置预期格式来处理的，因为您已经重置了您关心的每个属性，所以几乎没有为“可能”留下空间。

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

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

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

于 2013-04-27T03:59:22.417 回答