Dynamically resizing Chrome Extension Popup Window Height

Question

I am building a chrome extension which has shows dynamically updated HTML in the popup window when the extension icon is clicked. I have noticed that the size of the popup window is sometimes (about once in every 6 clicks) too small to show the text being displayed. Usually, it is the height that is very reduced (leading to a lot of vertical scrolling being required to view the content of the popup) but sometimes (once in about 15 clicks), the width of the popup is affected as well.

Troubleshooting steps I have already taken with no improvement

Declared <!DOCTYPE html>
Specified in CSS

body { width: 700px, min-height: 400px }

\\ id of div containing the content
#htmlcontent { width: 700px, min-height: 400px }

3. Used javascript to modify body height and width after onload event

window.onload = function(){
    var content = document.getElementById('htmlcontent');
    var height = content.scrollHeight + 20;
    document.body.style.minHeight = height + 'px';
    document.body.style.minWidth = "700px";
    window.scroll(0,0);
}

Using an iFrame is not a practical solution as the content being displayed is local to the machine
There are no hidden elements in the HTML tree

Code snippets

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script type="text/javascript" src="underscore.js"></script>
    <script type="text/javascript" src="popup.js"></script>
    <link rel="stylesheet" href="popup.css">
  </head>
  <body>
    <div class="container">
      <div class="banner">
        <img src="/icons/iconx19.png" width="19" height="19">
        <p>Title Text</p>
      </div>
      <div id="canvas">
        <!--content goes here -->
      </div>
    </div>  
  </body>
</html>

popup.js

var popupText = '<div class="main_record">blah, blah, blah</div>';  // dynamically generated html
document.getElementById('canvas').innerHTML = popupText;


// ensures the popup window is the proper width and height
window.onload = function(){
  var popupWidth = 700;  // default width of popup in px
  var animationDelay = 250;  // wait time for popup animation to complete
  setTimeout(function(){
    var popupHTML = document.getElementById('canvas');
    var rawHeight = parseInt(popupHTML.offsetHeight) + 20;

    document.body.style.minWidth = popupWidth + 'px';
    document.body.style.minHeight = rawHeight + 'px';
    window.scroll(0,0);
  }, animationDelay);
};

popup.css

.container {
  overflow-x: auto;
  background-color: rgb(246, 246, 239);
}

.banner {
  background-color: rgb(255, 102, 0);
  width: 700px;
  overflow: auto;
  height: 24px;
}

.banner img{
  float: left;
  margin-left: 5px;
  margin-top: 3px;
}

.banner p{
  color: #000000;
  font-weight: bold;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10pt;
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
  position: absolute;
  top:0px;
  left: 30px;
}

#canvas {
  overflow-x: auto;
  width: 700px;
}

.main_record {
  margin-left: 5px;
}

.main_record .title {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10pt;
  color: #000000;
  margin-bottom: 2px;
}

.main_record .subtitle {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 7pt;
  color: #828282;
  margin-top: 4px;
}

.main_record a{
  color: #828282;
}

.main_record a:focus{
  outline-style: none;
}

Did you check if there is a hidden element in the HTML tree? The popup of the Chrome Extensions don't resize if there is a hidden element in the HTML tree. That is, basically the whole page which is hiding will prevent to resize the popup frame. The solution is: document.getElementById("hiddenDiv").innerHTML = ""; — Dayton Wang

Nijk Nijk · Accepted Answer · 2016-02-21T22:59:17

It's probably way too late to solve the OP's problem, but for the benefit of others:

The problem seems to be that Chrome is animating the popup to a size calculated on the height of content in the <body> tag. DOM manipulation will be executed by the browser during this calculation/rendering cycle and thus cause the popup to be the wrong height.

My solution is far from ideal but should work for simple use cases:

setTimeout(function(){
    // DOM manipulation stuff
}, 0);

I believe this works because it pushes the execution of DOM manipulation onto a new event loop, probably because chrome is listening for a DOM change and re-calculating/rendering the plugin.

Dynamically resizing Chrome Extension Popup Window Height

1 Answers