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

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来获得更加孤立的环境。在这些情况下，您会与您的嵌入器失去一些互动性;这是一个折衷。