Javascript 通过浏览器扩展在web上的每个页面顶部插入一个栏

我正在编写一个浏览器扩展，在用户访问的每个页面顶部插入一个横幅。横幅不得具有粘性，且不得阻止任何现有内容。（）

目前，我正在通过在每个页面上插入的contentscript中的以下javascript向DOM添加横幅内容：

$content = $('<div id="lb-banner'>blah blah</div>');
$('html:first').addClass('lb-banner-added').prepend($content);

这会将整个html向下推，同时横幅绝对位于填充空白的位置（在本例中为32px）

我尝试了其他方法在每一页的顶部添加横幅。但是，这种方法与迄今为止的大多数站点兼容（即使是许多具有粘性标题的站点）

然而，这绝对不是最好的解决方案，因为我无法在facebook、twitter、linkedin（有效，但阻止了一些内容）、gmail/gcalendar/gdoc（有效，但导致一些内容被移出窗口）等网站上使用它。 此外，这个方法需要我指定内容的高度，这目前还可以，但我更喜欢一个更动态的方法

---

注意事项：

如果没有我上面展示的样式，横幅仍然会出现在每个页面的顶部。然而，这样做也会破坏许多网站的布局，比如google.com。例如，在谷歌上，横幅只会覆盖黑色导航栏，搜索结果前会有额外的间距

---

这是一个值得商榷的chrome扩展

如果您将UI直接注入DOM，无论您做什么，您都无法完全阻止它受到不必要的干扰。例如，一个给定的页面可能在页面加载后异步加载元素，您几乎无法防止它将UI分流到一边。此外，除非为UI元素显式声明每个CSS样式，否则它们始终可以被外部定义的样式覆盖

浏览器扩展中使用的一种常见方法是将UI嵌入到框架中，并将其放置在DOM的顶部。这不是一个很好的解决方案，但它会将您的样式与不必要的干扰隔离开来

---

我知道没有最好的解决方案。但是，有没有比我目前使用的更好的方法来支持更多百分比的页面？我曾经考虑过使用iframe，但是用iframe包装你访问的每一个页面是完全不可行的。根本没有好的方法来完成你正在做的事情并使它在每个站点上都能工作。如果您想了解这有多困难，请下载Chrome的导管工具栏并查看其代码。他们必须对数百个网站使用不同的代码，但仍有网站被它破坏。

html.lb-banner-added {
   position: relative;
   margin-top: 32px;
}
#lb-banner {
   height: 32px;
   width: 100%;
   position: absolute;
   top: -32px;
   display: none;
   ... other styles...
}
.lb-banner-added #lb-banner { display: block; }