javascript - StumbleUpon chrome 扩展如何在 google 主页导航栏上方插入 div？

Question

我正在开发一个扩展，它将在所有网页的顶部插入一个水平 div。它适用于大多数页面，但对于http://google.com，谷歌的导航栏显示在我的顶部。stumbleUpon chrome 扩展具有类似的功能，除了它们的水平 div 显示在 google 的导航栏上方。我正在使用内容脚本来插入 div。我试过 body.prepend() ，它似乎没有做这项工作。另外，无论滚动位置如何，我都希望栏固定在顶部。我有它作为位置：固定，顶部：0％，但仍然没有运气。任何帮助或指向正确方向将不胜感激。

Answer 1

在处理此类情况时，请务必使用 webkit 检查器中的计算样式框。可能需要一些时间才能找到导致问题的样式的正确元素，但这是值得的。

我在http://google.com的正文中添加了一个 div并应用了以下样式：

element.style {
  position: fixed;
  top: 0;
  left: 0;
  height: 35px;
  width: 100%;
  background-color: red;
}

我注意到红色从 Google 的导航栏后面突出，所以我认为这可能是 z-index 问题。

我将前置 div 的 z-index 设置为 99999，它按预期显示。经过进一步调查，我发现 Google 的 div #gbx3 的 z-index 为 990，其中的导航链接的 z-index 为 991。您不想掩盖 Google 导航栏，因此我们将不得不在上面设置一些自定义样式。

如果您将 Google 的 div #mngb 样式设置为

element.style {
  position: absolute;
  top: 35px;
}

这会将 Google 的导航栏向下推，但不会移动页面上的任何其他内容。

这应该足以让你开始。它并不完美，它不能处理任何其他内容的下推，也不能推广到任何其他网站，但它对您来说是一个好的开始。