2

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

目前，我正在通过插入每个页面的 contentscript 中的以下 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 像素）。

我尝试了其他方法在每个页面的顶部添加横幅。然而，这种方法与迄今为止的大多数网站兼容（甚至许多带有粘性标题的网站）。

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

笔记：

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

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

4

1 回答 1

3

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

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

可以在页面内容中插入 <iframe> 吗？

于 2013-05-21T21:49:54.227 回答