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向下推，同时横幅绝对定位以填充空白区域（在本例中为32px）。

我尝试过其他方法在每个页面的顶部添加横幅。但是，此方法与目前为止的大多数站点兼容（甚至许多具有粘性标题的站点）。

然而，这绝对不是最好的解决方案，因为我无法在facebook，twitter，linkedin（工作但阻止某些内容）上工作，gmail / gcalendar / gdoc（工作但是导致一些内容被移到窗外），还有很多。此外，这种方法要求我指定内容的高度，现在可以，但我更喜欢更动态的方法。

备注：

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

以下是问题https://chrome.google.com/webstore/detail/awesome-facts/bjkhdklfbghoadcamlpmkafgmehcmima

的Chrome扩展程序

Answer 1

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

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

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

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

1 个答案: