如何防止我的Chrome扩展程序中的弹出窗口放大

Question

我只是注意到,如果我在一个标签中放大网页(通过执行Ctrl-Plus),然后打开我的Chrome扩展程序的弹出窗口,它也会按比例放大.不幸的是,它使它显示垂直,并且在更大的范围内,甚至是水平滚动条.

我看到其他扩展以某种方式通过仅以100%缩放显示弹出窗口来阻止此缩放.问题是如何做到这一点？

Answer 1

快速记录,感兴趣的是我如何解决它.

首先,我刚学到的关于Chrome的一些细节.要缩放插件的弹出窗口,需要从Chrome的设置中打开其" 选项"窗口并放大或缩小.然后,即使关闭" 选项"页面,该相应的插件也会将缩放视为零售.要恢复它,只需在" 选项"页面上恢复缩放.很酷,哈!虽然许多插件的设计不能正确处理,但太糟糕了.正如我在原始问题中提到的,大多数显示奇怪的滚动条或简单地扭曲内容.

以下是我在插件中克服它的方法:

首先,您需要确定弹出窗口的当前缩放.(以下内容仅在Chrome上测试,取自此帖子):

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

然后创建一个可滚动DIV的弹出窗口内容,如果它滚动你就可以了:

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

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

然后DIV使用页面缩放通过小缩放计算设置可滚动的最大高度.一旦DOM加载,比如从onLoad()事件或jQuery中加载,就这样做$(function(){});:

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

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

//Calculate height & offsets of elements inside `mainSection` 
//using jQuery's 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');

所有这些应该只显示一个漂亮的垂直滚动条,只有当用户选择更大的缩放时你想要它.

最后,您需要确保如果用户在显示弹出窗口时开始缩放扩展程序的" 选项"页面,则需要将其关闭.我选择了这个方法:

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