如何不在我通过内容脚本插入的 div 上应用网页的 CSS？答案

【问题标题】：How to not apply a webpage's CSS on the div I am inserting into it via content scripts?如何不在我通过内容脚本插入的 div 上应用网页的 CSS？
【发布时间】：2014-01-10 16:50:59
【问题描述】：

我正在构建一个 chrome 扩展，在其中我将一个 div 插入到网页的正文中，并将它的 CSS 位置设置为固定，以便它漂浮在页面上。

但是，主机页面的 CSS 会应用到我正在插入的 div 上，我不希望这种情况发生。我怎样才能避免这种情况？

我尝试应用 normalize.css 来摆脱主机页面应用的 css，但这似乎不起作用。

【问题讨论】：

可能重复：stackoverflow.com/q/7846052/588079 另外，您是否尝试过内联样式（或使用 javascript 使用 style 属性）？
我没有尝试过内联样式。会看看。虽然，我必须将它们插入到主机页面的头部，对吗？不知道该怎么做。也会尝试上面的答案。
上面的代码确实有效，但它删除了所有样式，包括我正在应用的样式！

标签： javascript jquery css google-chrome google-chrome-extension

【解决方案1】：

另一个技巧是编写一个尝试创建唯一 ID（或类名）的小函数（本质上，检查 ID 是否存在，如果存在，则增加一个附加的数字），然后添加一个内联样式脚本来规范化它特定的 div 及其所有子项，最后使用此唯一 ID（或类名）添加您的 div。

例子：

function addDiv(){
  var uId = (function(){
              for(var r='myUniqueId', i=1; document.getElementById(r+i); i++);
              return r+i;
            })()
  ,   div = document.createElement('div')
  ;

  document.getElementsByTagName('head')[0]
          .appendChild(document.createElement('style'))
          .innerHTML = '#'+uId+ '{background-color:red;}'     //just as example
                     + '#'+uId+ ' .test{background-color:yellow;}';  
  div.id=uId;
  document.getElementsByTagName('body')[0]
          .appendChild(div)
          .innerHTML='<p class="test">foo</p> <br> bar';  //just as example
}

Working jsfiddle here

【讨论】：

【解决方案2】：

据我所知，有三种解决方案，第一种比较理想：

将您的内容放入 iframe。父级的 css 不会在其中应用。 Demo here (click).

重置元素及其所有子元素上的每个 CSS 样式。 See this answer (click).

一直使用内联样式。

【讨论】：

我需要与主机页面交互。所以，我认为 iFrame 选项不起作用。
@Jatin 我找到了该链接，并制作了 iframe 解决方案的演示。查看我的更新。
我在我的扩展中尝试了 iframe 方法。似乎无法让它工作。我基本上需要该 iframe 中的 angular.js 应用程序，但 angular 不起作用，似乎 iframe 无法访问我希望它访问的脚本。
@Jatin 也可以这样做，但这不是这篇文章的主题。如果您提出有关 iframe 和脚本的所有详细信息的问题，我将很乐意提供帮助。发布问题的链接，我会试一试。
我让它在 iframe 中工作！谢谢你的帮助！欣赏它！ :)