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

Question

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

目前，我正在使用一个内容脚本来提供一个iframe，我希望它的position = 'fixed‘，这样它就会停留在那里，而不是滚动，并且有一个高的z值，这样它总是在顶部。

问题:我在调整网页其余部分的大小时遇到了问题，但它的某些部分位于工具栏后面。我尝试添加适量的填充，但它不能适当地调整许多页面的大小，这些页面是为填充屏幕而设计的，例如facebook.com/messages。

理想情况下，它的工作方式应该与Chrome浏览器在屏幕底部的下载架子完全相同。

有什么想法吗？

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

注2:任何知道如何做到这一点并避免使用iframe的人都可以获得奖励。(iframes将不会在任何具有像样的内容安全策略的页面上提供，例如github.com、linkedin.com)

Answer 1

您需要在当前页面的父html上设置与应用程序容器高度相等的下边距。固定的元素，等等。将不得不通过计算出的样式和具有相同高度的偏移量来查询页面底部，然后在容器再次隐藏时重置。

这是一个小提琴，减去固定元素的偏移量：https://jsfiddle.net/oqL56h5q/3/

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