How to prevent popup from scaling in my Chrome extension

A quick note for those wondering how I solved it.

First, a little bit about Chrome, which I just learned about. To enlarge the pop-up window of a plug-in, open its Options window from Chrome preferences and enlarge or shrink it. Then, even when the "Options" page is closed, the corresponding plugin will sell scaling. To restore it, simply restore the scale on the options page. Cool, yeah! Too bad, although many plugins are not designed to handle properly. As I mentioned in my original question, most display weird search scrollbars or just skew the content.

This is how I overcame it in my plugin:

First you need to determine the current scale of the popup. (Below is only on Chrome, taken from this post ):

function getPageZoom()
{
    //RETURN: 1.0 for 100%, and so on
    var zoom = 1;

    try
    {
        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
        svg.setAttribute('version', '1.1');
        document.body.appendChild(svg);
        zoom = svg.currentScale;
        document.body.removeChild(svg);
    }
    catch(e)
    {
        console.error("Zoom method failed: " + e.message);
    }

    return zoom;
}

      

        
        
        
      

    

Then create a scrollable DIV

one to place the popup content in which you are comfortable if it scrolls:

#mainSection{
    margin: 0;
    padding: 0;
    overflow-y: auto;       /* The height will be defined in JS */
}

<div id="mainSection">
</div>

      

        
        
        
      

    

Then set the maximum scroll height DIV

with a little scaling computation using page scaling. Do this as soon as the DOM is loaded, say from an event onLoad()

or inside jQuery $(function(){});

:

//Get page zoom
var zoom = getPageZoom();

//Using jQuery
var objMain = $("#mainSection");

//Calculate height & offsets of elements inside `mainSection` 
//using jQuery offset() and outerHeight()
//Make sure to multiply results returned by zoom

var offsetElement1 = $("someElement1").offset().top * zoom;
var heightElement2 = $("someElement2").outerHeight() * zoom;

//Apply the calculations of the height (in real situation you'll obviously do more...)
var height = offsetElement1 + heightElement2;

//And finally apply the calculated height by scaling it back down
var scaledHeight = height / zoom;

//Need to convert the result to an integer
scaledHeight = ~~scaledHeight;

//And set it
objMain.css("max-height", scaledHeight  + 'px');

      

        
        
        
      

    

All of this should show a nice vertical scroll bar only where you want when the user selects a larger scale.

Finally, you need to make sure that if the user starts modifying the extension settings page while the popup is displayed, you need to close it. I chose this method:

    $(window).resize(function()
    {
        var zoom = getPageZoom();

        //Multiply zoom by 100 (to round it to 2 decimal points) and convert to int
        var iZoom = zoom * 100;
        iZoom = ~~iZoom;

        if(window.izoom &&
            iZoom != window.izoom)
        {
            //Close popup
            window.close();
        }

        window.izoom = iZoom;
    });