0

I'd like to create a chrome extension that injects a sidebar into all webpages. This sidebar would be injected on the right hand side and would have a width of 10vw. I'd like the rest of the page to shrink to 90vw and appear in that space (as if the viewport had always been 90vw). The effect is similar to what happens when you open chrome console on the right hand side. The console pops up and the rest of the page shrinks to the remaining width and appears as if that width had been there originally.

I'd really appreciate any guidance on how to achieve this affect? There was a previous question asked around this on Stack Overflow here, but the answer only responds to injecting a sidebar on the top/bottom. I've tried modifying the code so that it works on the right hand side, but it doesn't seem to work (My code is attached below). 

//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>";

I'd really appreciate any help on how to get this. Thank you so much!

Somya Agrawal
  • 355
  • 2
  • 14
  • There is no universal solution to this in Chrome, you'll have to do it on a site-by-site basis. A real solution exists in Opera and Firefox which offer a sidebar API for extensions. – wOxxOm Dec 18 '19 at 04:09
  • @wOxxOm Thank you for the response. Do you know if this would be possible using iframes? – Somya Agrawal Dec 18 '19 at 05:06
  • No, like I said there's no universal solution. – wOxxOm Dec 18 '19 at 05:10

0 Answers0