Question

我想创建一个Chrome扩展程序，将侧边栏注入所有网页。此侧边栏将注入到右侧，并且宽度为10vw。我希望页面的其余部分缩小到90vw并显示在该空间中（好像视口始终是90vw）。效果类似于打开右侧的chrome控制台时发生的情况。控制台会弹出，页面的其余部分会缩小到其余宽度，并显示该宽度原来是原来的宽度。

我非常感谢有关如何实现这种影响的任何指导？堆栈溢出here上曾有一个关于此问题的问题，但答案仅是在顶部/底部注入侧边栏。我尝试修改代码，以便它可以在右侧使用，但似乎不起作用（我的代码附在下面）。

//height of top bar, or width in your case
var width = "300px";

//resolve html tag, which is more dominant than <body>
var html;
if (document.documentElement) {
  html = document.documentElement; //just drop $ wrapper if no jQuery
} else if (
  document.getElementsByTagName("html") &&
  document.getElementsByTagName("html")[0]
) {
  html = document.getElementsByTagName("html")[0];
} else {
  alert("no html tag retrieved...!");
  throw "no html tag retrieved son.";
}

//position
if (getComputedStyle(html).position === "static") {
  //or //or getComputedStyle(html).position
  html.style.position = "relative";
}

//top (or right, left, or bottom) offset
var currentTop = getComputedStyle(html).right; //or getComputedStyle(html).top
if (currentTop === "auto") {
  currentTop = 0;
} else {
  currentTop = parseFloat(getComputedStyle(html).right); //parseFloat removes any 'px' and returns a number type
}


html.style.right = currentTop + parseFloat(width) + "px";

var iframeId = "someSidebar";
if (document.getElementById(iframeId)) {
  alert("id:" + iframeId + "taken please dont use this id!");
  throw "id:" + iframeId + "taken please dont use this id!";
}


html.append(
  '<iframe id="' +
    iframeId +
    '" scrolling="no" frameborder="0" allowtransparency="false" ' +
    'style="position: fixed; width: 100%;border:none;z-index: 2147483647; top: 0px;right: 0px;left: 0px;">' +
    "</iframe>"
);
document.getElementById(iframeId).contentDocument.body.innerHTML =
  '<style type="text/css">\
    html, body {          \
      width: 100%;        \
      z-index: 2147483647;\
    }                     \
  </style>                \
  <p>UNSTYLED HTML!</p>";

我非常感谢您对如何获得此帮助。非常感谢！

Chrome扩展程序可在右侧页面中注入侧边栏

0 个答案: