javascript - 通过浏览器扩展在网络上每个页面的顶部插入一个栏

Question

我正在编写一个浏览器扩展，它会在用户访问的每个页面顶部插入一个横幅。横幅不得具有粘性，且不得遮挡任何现有内容。 (my chrome extension)

目前，我正在通过插入每个页面的内容脚本中的以下 javascript 将横幅内容添加到 DOM:

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

我在正文之前添加内容，以便横幅不会受到网站样式的影响。然后，为了将页面的主要内容下推，同时不影响任何潜在的网站布局，我使用以下样式:

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; }

这会将整个 html 向下推，同时横幅绝对定位以填充空白空间(在本例中为 32 像素)。

我尝试过其他方法在每个页面的顶部添加横幅。然而，此方法与迄今为止的大多数网站兼容(甚至许多具有粘性 header 的网站)。

但这绝对不是最好的解决方案，因为我无法让它在 facebook、twitter、linkedin(可以工作，但阻止了某些内容)、gmail/gcalendar/gdoc(可以工作，但导致某些内容移出窗口)上工作)， 还有很多。 此外，此方法要求我指定内容的高度，目前还可以，但我更喜欢更动态的方法。

---

注释:

如果没有上面显示的样式，横幅仍会出现在每个页面的顶部。然而，这样做也会破坏许多网站(例如 google.com)的布局。例如，在 Google 上，横幅将仅覆盖黑色导航栏，并且在搜索结果之前会有额外的间距。

这是有问题的 Chrome 扩展 https://chrome.google.com/webstore/detail/awesome-facts/bjkhdklfbghoadcamlpmkafgmehcmima

Answer 1

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

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

Is it okay to insert an <iframe> into the page's content?