Question

我正在尝试创建一个Chrome扩展程序，它会在每个页面的底部显示一个工具栏，并将标签内容缩小到浏览器标签高度的其余部分。

目前，我正在使用内容脚本来提供iframe，我希望它与position ='fixed'一起使用，以便它保持在那里而不是滚动，以及一个高z值，这样它总是在顶部。

问题：我在调整网页其余部分时遇到了问题，但部分网页位于工具栏后面。我尝试添加适当数量的填充，但它没有正确调整大量页面，这些页面设计用于填充屏幕，例如facebook.com/messages。

理想情况下，它应该与Chrome浏览器自己在屏幕底部的下载工具架完全一致。

有什么想法吗？

注意：我不想使用单独的窗口，因为这个扩展名。 https://chrome.google.com/webstore/detail/tidy-sidebar/dgmacifhhpefamjmolpipkijcofcmbgp?hl=en

注2：任何知道如何实现这一目标并避免使用iframe的人的奖励。（iframe不会在任何具有良好内容安全政策的网页上投放，例如github.com，linkedin.com）

Answer 1

您需要在当前页面的父html上设置一个底边距，该边距等于应用容器的高度。固定的元素等等到页面底部的元素必须通过计算出的样式和相同高度的偏移量进行查询，然后在重新隐藏容器后重置。

这是一个小提琴，减去固定元素偏移：https://books.google.com/books?vid=ISBN0812511816&printsec=frontcover

<button id='open-app'>open app</button>
<button id='close-app'>close app</button>

body {
  background-color: red;
}

#appcontainer {
  left: 0px;
  bottom: 0px;
  z-index: 1000001;
  width: 100%;
  background-color: blue;
  transform: translate3d(0px, 0px, 0px);
  position: fixed;
  overflow-x: hidden;
  border-top: 1px solid rgb(221, 221, 221);
  transition: transform 0.2s ease;
}

var APPCONTAINER_HEIGHT = '160px';
var CONTAINER_ID = 'appcontainer';

var html = document.querySelector('html');

var appView = {
    appContainer: null,

    init: function() {
      this.appContainer = document.createElement('DIV');
      this.appContainer.id = CONTAINER_ID;
      this.appContainer.style.height = APPCONTAINER_HEIGHT;
      return appView;
    },

  render: function() {
    html.appendChild(this.appContainer);
    html.marginBottom = APPCONTAINER_HEIGHT;
    return appView;
  },

  hide: function() {
    this.appContainer.style.display = 'none';
  }
}

document.querySelector('#open-app').addEventListener('click', function(event) {
    appView.init();
    return appView.render();
});

document.querySelector('#close-app').addEventListener('click', function(event) {
    if (appView.appContainer) {
    html.marginBottom = '0px';
    return appView.hide();
  }
    return false;
});

如何调整网页大小以便为Chrome扩展程序工具栏腾出空间

1 个答案: