Question

从我的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");

Answer 1

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

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

其次，使用“reset-CSS”样式表。 Here是网络上的一百万个例子之一。你可能担心的“可能格式化div”部分主要通过在这个样式表中明确设置预期的格式来处理，因为你重置了所关注的每个属性，因此没有留下“可能”的空间。

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

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

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

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

1 个答案: